Template:Abbr/doc: Difference between revisions

From Indian River Lagoon Project
(Created page with "__NOTOC__ The template {{tl|Abbr}} is used to write an abbreviation with its meaning. It is a wrapper for the HTML element {{...")
 
mNo edit summary
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
__NOTOC__
__NOTOC__
The template {{tl|Abbr}} is used to write an abbreviation with its meaning. It is a wrapper for the [[HTML]] [[HTML element#General phrase elements|element]] {{tag|abbr}}, the element used by most [[WWW|web]] [[Web browser|browsers]] to create a [[tooltip]] indicating the meaning of an abbreviation or [[acronym]].
The template {{Abbr}} is used to write an abbreviation with its meaning. It is a wrapper for the HTML element abbr, the element used by most browsers to create a tooltip indicating the meaning of an abbreviation or acronym.


{{strong|Please note: Do not use {{abbr}} or {{tag|abbr|o}} to mark up material other than abbreviations or acronyms. Using it to generate tooltips elsewhere is a misuse of the underlying HTML and causes accessibility problems.}} See {{Hover title}} for how to implement similar functionality without abusing markup.
Please note: Do not use {{abbr}} or <abbr> to mark up material other than abbreviations or acronyms. Using it to generate tooltips elsewhere is a misuse of the underlying HTML and causes accessibility problems. See {{Hover_title}} for how to implement similar functionality without abusing markup.


== Usage ==
== Usage ==


The template&nbsp;{{abbr}} takes two unnamed parameters, in order:
The template {{abbr}} takes two unnamed parameters, in order:
;<code>1</code>: abbreviation – the abbreviation, acronym, or initialism to be explained; shows as text, and may use wikimarkup, such as a link to an article about what it refers to.
;1: abbreviation – the abbreviation, acronym, or initialism to be explained; shows as text, and may use wikimarkup, such as a link to an article about what it refers to.
;<code>2</code>: meaning – the expansion or definition of the abbreviation; shows as the popup when you hover over the <kbd><var>abbreviation</var></kbd>. No wikimarkup can be used in this parameter.
;2: meaning – the expansion or definition of the abbreviation; shows as the popup when you hover over the abbreviation. No wikimarkup can be used in this parameter.
These can also be given as explicitly numbered parameters; this is necessary if a parameter's content contains the equals ({{kbd|{{=}}}}) character:
These can also be given as explicitly numbered parameters; this is necessary if a parameter's content contains the equals (=) character:
* Complex example: <code><nowiki>[[Mass–energy equivalence|{{</nowiki>'''abbr'''<nowiki>|{{math|''E'' {{=}} ''mc''<sup>2</sup>}}|</nowiki>'''2='''<nowiki>Energy = mass times the speed of light squared}}]]</nowiki></code>
* Complex example: <code><nowiki>[[Mass–energy equivalence|{{</nowiki>'''abbr'''<nowiki>|{{math|''E'' {{=}} ''mc''<sup>2</sup>}}|</nowiki>'''2='''<nowiki>Energy = mass times the speed of light squared}}]]</nowiki></code>
* Produces: [[Mass–energy equivalence|{{abbr|{{math|''E'' {{=}} ''mc''<sup>2</sup>}}|2=Energy = mass times the speed of light squared}}]]
* Produces: [[Mass–energy equivalence|{{abbr|{{math|''E'' {{=}} ''mc''<sup>2</sup>}}|2=Energy = mass times the speed of light squared}}]]
Line 15: Line 15:


A third unnamed parameter accepts the following values (which have the same effect):
A third unnamed parameter accepts the following values (which have the same effect):
;<code>3</code>: IPA or i – applies the IPA template to fix the International Phonetic Alphabet rendering on Windows XP.
;3: IPA or i – applies the IPA template to fix the International Phonetic Alphabet rendering on Windows XP.




Named parameters and the input they take:
Named parameters and the input they take:
;<code>class</code>: One or more CSS classes (space-separated if more than one)
;<code>class</code>: One or more CSS classes (space-separated if more than one)
;<code>id</code>: An HTML id (i.e., a <code>#{{var|ID name here}}</code> link anchor); this must be unique on the entire page
;<code>id</code>: An HTML id (i.e., a <code>#ID name here</code> link anchor); this must be unique on the entire page
;<code>style</code>: Arbitrary inline CSS to apply to the {{kbd|abbreviation}} text. For any input that needs to be quotation-marked (e.g. because it contains a space character), use straight single-quotes only, e.g. {{para|style|font-family: 'Times New Roman', serif;}}
;<code>style</code>: Arbitrary inline CSS to apply to the {{kbd|abbreviation}} text. For any input that needs to be quotation-marked (e.g. because it contains a space character), use straight single-quotes only, e.g. font-family: 'Times New Roman', serif;


== Examples ==
== Examples ==
Line 45: Line 45:
!Renders as
!Renders as
|-
|-
!{{yes|Compatible}}
!Compatible
|{{code|<nowiki>[[Knockout#Technical knockout|{{abbr|TKO|technical knockout}}]]</nowiki>}}
|<nowiki>[[Knockout#Technical knockout|{{abbr|TKO|technical knockout}}]]</nowiki>
|[[Knockout#Technical knockout|{{abbr|TKO|technical knockout}}]]
|[[Knockout#Technical knockout|{{abbr|TKO|technical knockout}}]]
|-
|-
!{{no|Less compatible}}
!Less compatible
|{{code|<nowiki>{{abbr|[[Knockout#Technical knockout|TKO]]|technical knockout}}</nowiki>}}
|<nowiki>{{abbr|[[Knockout#Technical knockout|TKO]]|technical knockout}}</nowiki>
|{{abbr|[[Knockout#Technical knockout|TKO]]|technical knockout}}
|{{abbr|[[Knockout#Technical knockout|TKO]]|technical knockout}}
|}
|}


'''Do not link, or use any other wikimarkup or HTML markup, in the <kbd><var>meaning</var></kbd> (popup) – only plain text.'''<br />
'''Do not link, or use any other wikimarkup or HTML markup, in the meaning (popup) – only plain text.'''<br />
The mouse-over popup for the <kbd><var>meaning</var></kbd> text is created by a <code>title=</code> attribute inside an {{tag|abbr|o}} HTML element's opening tag, so it cannot itself contain any HTML (or markup that resolves to HTML when rendered). This includes simple things like <code><nowiki>''italics''</nowiki></code>.
The mouse-over popup for the meaning text is created by a <code>title=</code> attribute inside an <abbr> HTML element's opening tag, so it cannot itself contain any HTML (or markup that resolves to HTML when rendered). This includes simple things like <code><nowiki>''italics''</nowiki></code>.


== Accessibility and HTML validity concerns ==
== Accessibility and HTML validity concerns ==


This template is intended {{em|only}} for use with abbreviations (including acronyms and initialisms).
This template is intended only for use with abbreviations (including acronyms and initialisms).


The [[Web Content Accessibility Guidelines]] contain guidelines for using the {{tag|abbr|o}} element generated by this template; see section [http://www.w3.org/TR/WCAG20-TECHS/H28.html H28: Providing definitions for abbreviations by using the abbr and acronym elements].
Furthermore, the HTML specifications (both those of the W3C and WHATWG) strictly define the {<abbr> element as reserved for markup of abbreviations.  Abusing it for mouse-over tooltips breaks our [[Semantic HTML|semantic markup]] and makes our content invalid HTML (technically, "not well-formed"; it will pass an basic automated validator test because such a tool can't tell that the logical application of the data to the structure isn't correct, only that tags are nested properly, etc.).
 
Furthermore, the HTML specifications (both those of the [[W3C]] and [[WHATWG]]) strictly define the {{tag|abbr|o}} element as reserved for markup of abbreviations.  Abusing it for mouse-over tooltips breaks our [[Semantic HTML|semantic markup]] and makes our content {{em|invalid HTML}} (technically, "not [[Well-formed document|well-formed]]"; it will pass an basic [[Validator|automated validator]] test because such a tool can't tell that the logical application of the data to the structure isn't correct, only that tags are nested properly, etc.).


== Template data ==
== Template data ==

Latest revision as of 11:37, January 26, 2020

The template  is used to write an abbreviation with its meaning. It is a wrapper for the HTML element abbr, the element used by most browsers to create a tooltip indicating the meaning of an abbreviation or acronym.

Please note: Do not use or to mark up material other than abbreviations or acronyms. Using it to generate tooltips elsewhere is a misuse of the underlying HTML and causes accessibility problems. See {{{2}}} for how to implement similar functionality without abusing markup.

Usage

The template takes two unnamed parameters, in order:

1
abbreviation – the abbreviation, acronym, or initialism to be explained; shows as text, and may use wikimarkup, such as a link to an article about what it refers to.
2
meaning – the expansion or definition of the abbreviation; shows as the popup when you hover over the abbreviation. No wikimarkup can be used in this parameter.

These can also be given as explicitly numbered parameters; this is necessary if a parameter's content contains the equals (=) character:

  • Complex example: [[Mass–energy equivalence|{{abbr|{{math|''E'' {{=}} ''mc''<sup>2</sup>}}|2=Energy = mass times the speed of light squared}}]]
  • Produces: [[Mass–energy equivalence|Template:Math]]


A third unnamed parameter accepts the following values (which have the same effect):

3
IPA or i – applies the IPA template to fix the International Phonetic Alphabet rendering on Windows XP.


Named parameters and the input they take:

class
One or more CSS classes (space-separated if more than one)
id
An HTML id (i.e., a #ID name here link anchor); this must be unique on the entire page
style
Arbitrary inline CSS to apply to the Template:Kbd text. For any input that needs to be quotation-marked (e.g. because it contains a space character), use straight single-quotes only, e.g. font-family: 'Times New Roman', serif;

Examples

Template:Markup

When hovering over the text "MSLP", something like Template:Titlehint will appear as a tooltip in most browsers. Popular screen readers, used by visually impaired readers, give the meaning in a different way.

Template:Markup

Linking must be done a particular way

To wiki-link the abbreviation being marked up by this template, wrap the template in the link, not vice-versa, or the meaning will not appear in some browsers, including Chrome.

Compatibility Markup Renders as
Compatible [[Knockout#Technical knockout|{{abbr|TKO|technical knockout}}]] TKO
Less compatible {{abbr|[[Knockout#Technical knockout|TKO]]|technical knockout}} TKO

Do not link, or use any other wikimarkup or HTML markup, in the meaning (popup) – only plain text.
The mouse-over popup for the meaning text is created by a title= attribute inside an HTML element's opening tag, so it cannot itself contain any HTML (or markup that resolves to HTML when rendered). This includes simple things like ''italics''.

Accessibility and HTML validity concerns

This template is intended only for use with abbreviations (including acronyms and initialisms).

Furthermore, the HTML specifications (both those of the W3C and WHATWG) strictly define the { element as reserved for markup of abbreviations. Abusing it for mouse-over tooltips breaks our semantic markup and makes our content invalid HTML (technically, "not well-formed"; it will pass an basic automated validator test because such a tool can't tell that the logical application of the data to the structure isn't correct, only that tags are nested properly, etc.).

Template data

Template:TemplateDataHeader

This template defines an abbreviation or acronym, by creating a tooltip that is displayed on mouse-over.

Template parameters

ParameterDescriptionTypeStatus
Abbreviation1

Shows as text

Linerequired
Meaning2

Shows as a tooltip

Stringrequired
IPAIPA

Applies {{IPA}} to fix strings in the International Phonetic Alphabet rendered in Internet Explorer on Windows XP

Lineoptional
Classclass

Adds a HTML class

Lineoptional
IDid

Adds a HTML id

Lineoptional

See also

  • Template:Abbrlink, a variant of this template that includes wikilinking.
  • Template:H:title, used for generating tooltips in general.
  • Template:Finedetail, which allows a main fact to be presented in an article while hiding finer detail which, although factually accurate and maybe of interest to specific readers, might detract from the general readability of the article by cluttering the article if always presented; it allows referencing.