Sjabloon:Varserif/doc

Usage

This template is to help facilitate the displaying of variable names (in mathematics, computer source code, etc.) with the semantically correct <var>...</var>, which also renders the variable in italics, as is customary, and to do so in a serif font. This is specifically for the use of the characters "I" (upper-case i) and "l" (lower-case L), which in many sans-serif fonts can be difficult to distinguish. The template also very slightly adjusts the font size of the enclosed variable, to account for typical difference in x-height between non-fancy serif (e.g., Times and Times New Roman) and sans-serif (e.g. Arial and Helvetica) typefaces. The template should not be used generally, but only for "I" and "l", and perhaps other cases where a known visual ambiguity can be shown to exist in common sans-serif fonts for readers without acute vision. It is recommended to use {{var|1}} rather than {{varserif|1}} for "1" (numeral one), as it is usually more clearly distinguishable from "I" and "l" in sans-serif than serif fonts.

{{Varserif}} need not be used for variables that simply contain "I" or "l", only for cases in which readers are likely to be unable to distinguish them visually.

The {{varserif}} method is preferred to simply italicizing and using inline style to specify the font, for accessibility, content/presentation separation, semantic Web, and metadata reasons; XHTML's <var> element has semantic meaning, while simple font changes like italicizing does not.

Because the font styling in the template is done entirely with CSS, it has no effect at all upon content semantics, nor does it change the output for users of screen reader software.

Example:

{{varserif|I}}

outputs:

<var style="font-family: serif; font-size: 118%;">I</var>

which renders as:

I

Comparisons

{{var|I}} = I

{{var|l}} = l

{{var|1}} = 1

{{varserif|I}} = I

{{varserif|l}} = l

{{varserif|1}} = 1

Please note that {{varserif}} is not a panacea – its treatment of the numeral "1" is easily mistaken for the letter "l" (lower-case "L") in many serif fonts.

Recommended usage

{{varserif|I}} = I

{{varserif|l}} = l

{{var|1}} = 1

{{var|variable}} for any other variable

See also

• {{strong}} – For semantically indicating strong emphasis instead of simple typographical boldfacing.
• {{strongbad}} – Same as {{strong}} but red like this: "Never use {{strongbad}} in articles."
• {{stronggood}} – Same as {{strongbad}} but green like this: "Only use {{stronggood}} on non-article pages."
• {{em}} – Similar template for semantically indicating mild emphasis instead of simple typographical italicization.
• {{var}} – Same as {{varserif}} use for all variables (e.g. strIllustratePrefix), except for "I" (upper-case i) and "l" (lower-case L), for which use {{varserif}}.
• {{varserif}} – Same as {{var}} but uses serif font (e.g. strIllustratePrefix), especially for distinguishing between "I" (upper-case i) and "l" (lower-case L) as variables.
• {{wikivar}} – For displaying wikicode variables and magicwords as they would appear in source code, e.g. {{PAGENAME}}, {{DEFAULTSORT:Lastname, Firstname}}.
• {{para}} – For displaying wiki template parameters (|title=) or parameters and values (|year=2008).
• {{tlx}} and related – For displaying entire templates (with or without parameters and values) as code.
• {{tag}} – For using HTML elements ("tags") in prose (e.g. "When coding HTML <img>...</img> tags, always include …").
• {{code}} – For computer source code (e.g. "always include the alt= parameter"). (Note: to nest other templates like {{var}} inside, use <code>...</code> instead of {{code}}.)
• {{syntaxhighlight}} or {{sxhl}} – Wrapper for <syntaxhighlight>...</syntaxhighlight>, but will wrap overflowing text.
• {{deprecated code}} or {{dc}} – For deprecated source code in template documentation, articles on HTML specs, etc.
• {{pre}} – For larger blocks of source code and other pre-formatted text.
• {{bq}} – For indented blocks of content, such as block quotations, examples, poems, etc.
• {{kbd}} – For indicating user input.
• {{key press}} – For indicating the input of specific keystrokes, e.g. CtrlX.
• {{PlayStation key press}} – For indicating PlayStation-style gamepad key presses, e.g. Sjabloon:Pskeypress.
• {{samp}} – For example output.