Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:Flatlist/doc: Difference between revisions

Template page
Created page with "<noinclude>{{pp|small=yes}} </noinclude>{{redirect|Template:Inline list|a navbox listing templates used within lines of text to mark problems needing attention|Template:Inline cleanup tags}} {{Documentation subpage}} <!-- Add categories where indicated at the bottom of this page and interwikis at Wikidata --> {{used in system|in MediaWiki:Pageinfo-header}} {{cascade-protected template}} {{tlr|startflatlist|flt}} {{Uses TemplateStyles|Template:Hlist/styles.css}} This..."
 
No edit summary
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
<noinclude>{{pp|small=yes}}
{{wikipedia|page name}}
</noinclude>{{redirect|Template:Inline list|a navbox listing templates used within lines of text to mark problems needing attention|Template:Inline cleanup tags}}
{{Documentation subpage}}
{{Documentation subpage}}
<!-- Add categories where indicated at the bottom of this page and interwikis at Wikidata -->
<!-- Add categories where indicated at the bottom of this page and interwikis at Wikidata -->
{{used in system|in [[MediaWiki:Pageinfo-header]]}}
{{cascade-protected template}}
{{cascade-protected template}}
{{tlr|startflatlist|flt}}
This template provides a WCAG/ISO-standards-compliant accessible alternative to comma- or dash- (or other single character-) separated lists, per WP:FLATLIST and MOS:HLIST.
{{Uses TemplateStyles|Template:Hlist/styles.css}}
This template provides a [[Web Content Accessibility Guidelines|WCAG]]/ISO-standards-compliant accessible alternative to comma- or dash- (or other single character-) separated lists, per [[WP:FLATLIST]] and [[MOS:HLIST]].


Lists output by {{tl|Flatlist}} and {{tl|Hlist}} are semantically and visually identical, and differ only in the wiki-markup used to create the lists.
Lists output by {{tl|Flatlist}} and {{tl|Hlist}} are semantically and visually identical, and differ only in the wiki-markup used to create the lists.
{{TOC limit|3}}


== Usage ==
== Usage ==
Line 17: Line 11:


{{flatlist|
{{flatlist|
* [[cat]]
* cat
* [[dog]]
* dog
* [[horse]]
* horse
* [[cow]]
* cow
* [[sheep]]
* sheep
* [[pig]]
* pig
}}
}}


Line 29: Line 23:
== Parameters ==
== Parameters ==
{{#switch:{{NAMESPACE}}:{{ROOTPAGENAME}}|#default=
{{#switch:{{NAMESPACE}}:{{ROOTPAGENAME}}|#default=
{{Format TemplateData|<templatedata>
{
"description": {
"en": "Used to create plain (i.e. unbulleted) lists."
},
"format": "inline",
"params": {
"1": {
"label": {
"en": "Content"
},
"description": {
"en": "The list to wrap."
},
"suggested": true,
"type": "content"
},
"class": {
"label": {
"en": "Extra Classes"
},
"description": {
"en": "Adds extra CSS classes to the containing div."
},
"type": "string"
},
"style": {
"label": {
"en": "CSS Style"
},
"description": {
"en": "Adds extra CSS properties to the containing div. Complex styles should not be used in articles (per [[MOS:DEVIATIONS]]) but may be acceptable on user, project and talk pages."
},
"example": "\n border: solid 1px silver;\n background: lightyellow;\n",
"type": "string"
},
"indent": {
"label": {
"en": "Indent"
},
"description": {
"en": "Indents the list by a number of standard indents (one indent being 1.6[[em (typography)|em]]). (Useful in an indented discussion thread.)"
},
"example": "2",
"type": "number"
}
},
"paramOrder": [
"class",
"style",
"indent",
"1"
]
}
</templatedata>}}
|Template:Endflatlist=
{{Format TemplateData|JSON=
{
"description": "Ends a flat list created by {{tl|flatlist}}.",
"format": "inline",
"params": {
}
}
}}
}}
}}


Line 110: Line 40:


{{flatlist|
{{flatlist|
* [[cat]]
* cat
* [[dog]]
* dog
* [[horse]]
* horse
* [[cow]]
* cow
* [[sheep]]
* sheep
* [[pig]]
* pig
}}
}}


=== Alternative syntax ===
=== Alternative syntax ===
<syntaxhighlight lang="wikitext">
<syntaxhighlight lang="wikitext">
{{startflatlist}}
* cat
* [[cat]]
* dog
* [[dog]]
* horse
* [[horse]]
* cow
* [[cow]]
* sheep
* [[sheep]]
* pig
* [[pig]]
{{endflatlist}}
</syntaxhighlight>
</syntaxhighlight>


produces:
produces:


{{startflatlist}}
* cat
* [[cat]]
* dog
* [[dog]]
* horse
* [[horse]]
* cow
* [[cow]]
* sheep
* [[sheep]]
* pig
* [[pig]]
{{endflatlist}}


=== Syntax for ordered lists ===
=== Syntax for ordered lists ===
<syntaxhighlight lang="wikitext">
<syntaxhighlight lang="wikitext">
{{flatlist|
{{flatlist|
# [[first]]
# first
# [[second]]
# second
# [[3|third]]
# third
# [[fourth]]
# fourth
# [[fifth]]
# fifth
# [[sixth]]
# sixth
}}
}}
</syntaxhighlight>
</syntaxhighlight>
Line 156: Line 82:


{{flatlist|
{{flatlist|
# [[first]]
# first
# [[second]]
# second
# [[3|third]]
# third
# [[fourth]]
# fourth
# [[fifth]]
# fifth
# [[sixth]]
# sixth
}}
}}


Line 169: Line 95:
|style=border:solid 1px silver; background:lightyellow;  
|style=border:solid 1px silver; background:lightyellow;  
|class=nowraplinks |
|class=nowraplinks |
* [[Alpine skiing at the 1936 Winter Olympics]]
* Alpine skiing at the 1936 Winter Olympics
* [[Alpine skiing at the 1948 Winter Olympics]]
* Alpine skiing at the 1948 Winter Olympics
* [[Alpine skiing at the 1952 Winter Olympics]]
* Alpine skiing at the 1952 Winter Olympics
* [[Alpine skiing at the 1956 Winter Olympics]]
* Alpine skiing at the 1956 Winter Olympics
* [[Alpine skiing at the 1960 Winter Olympics]]
* Alpine skiing at the 1960 Winter Olympics
* [[Alpine skiing at the 1964 Winter Olympics]]
* Alpine skiing at the 1964 Winter Olympics
}}
}}
</syntaxhighlight>
</syntaxhighlight>
Line 181: Line 107:


{{flatlist |indent=2 |style=border:solid 1px silver; background:lightyellow; |class=nowraplinks |
{{flatlist |indent=2 |style=border:solid 1px silver; background:lightyellow; |class=nowraplinks |
* [[Alpine skiing at the 1936 Winter Olympics]]
* Alpine skiing at the 1936 Winter Olympics
* [[Alpine skiing at the 1948 Winter Olympics]]
* Alpine skiing at the 1948 Winter Olympics
* [[Alpine skiing at the 1952 Winter Olympics]]
* Alpine skiing at the 1952 Winter Olympics
* [[Alpine skiing at the 1956 Winter Olympics]]
* Alpine skiing at the 1956 Winter Olympics
* [[Alpine skiing at the 1960 Winter Olympics]]
* Alpine skiing at the 1960 Winter Olympics
* [[Alpine skiing at the 1964 Winter Olympics]]
* Alpine skiing at the 1964 Winter Olympics
}}
}}


== Technical details ==
== Technical details ==
This template uses the <code>.hlist</code> [[Cascading Style Sheets|CSS]] class defined in [[MediaWiki:Common.css]] to generate horizontal lists. It causes ordinary html list items to be displayed inline (horizontally), where they would normally display as block elements (vertically). The class also generates the [[interpunct]]s between list items and parentheses around nested lists.
This template uses the <code>.hlist</code> CSS class defined in MediaWiki:Common.css to generate horizontal lists. It causes ordinary html list items to be displayed inline (horizontally), where they would normally display as block elements (vertically). The class also generates the interpuncts between list items and parentheses around nested lists.


{| class="wikitable"
{| class="wikitable"
Line 207: Line 133:
}}
}}
</syntaxhighlight>
</syntaxhighlight>
| {{nowiki2|tag=pre|
|  
{{flatlist|
* cat
* dog
* horse
* cow
* sheep
* pig
}}
}}
| <syntaxhighlight lang="html">
| <syntaxhighlight lang="html">
<div class="hlist">
<div class="hlist">
Line 229: Line 146:
|}
|}


== See also ==
* {{tl|endflatlist}}
* {{tl|hlist}}
* {{tl|plainlist}} and {{tl|unbulleted list}}
* {{tl|bulleted list}}
* {{tl|ordered list}}
* {{tl|nowrap}}
* {{tl|pagelist}}
* [[WP:HLIST]]
{{HTML lists}}
<includeonly>{{Sandbox other||
<includeonly>{{Sandbox other||
<!-- Categories below this line; interwikis at Wikidata -->
<!-- Categories below this line; interwikis at Wikidata -->

Latest revision as of 04:45, 14 April 2025

This page uses Creative Commons Licensed content from Wikipedia (view authors).

This template provides a WCAG/ISO-standards-compliant accessible alternative to comma- or dash- (or other single character-) separated lists, per WP:FLATLIST and MOS:HLIST.

Lists output by {{Flatlist}} and {{Hlist}} are semantically and visually identical, and differ only in the wiki-markup used to create the lists.

Usage

{{flatlist}} starts a horizontal list, such as:

  • cat
  • dog
  • horse
  • cow
  • sheep
  • pig

If this template is used with no parameters, {{endflatlist}} is required. For navigation boxes using {{navbox}}, one can set |listclass=hlist, and achieve the same styling without using this template. For image captions, list (i.e. asterisk) markup does not work, so consider using {{hlist}} instead.

Parameters

Examples

{{flatlist|
* [[cat]]
* [[dog]]
* [[horse]]
* [[cow]]
* [[sheep]]
* [[pig]]
}}

produces:

  • cat
  • dog
  • horse
  • cow
  • sheep
  • pig

Alternative syntax

* cat
* dog
* horse
* cow
* sheep
* pig

produces:

  • cat
  • dog
  • horse
  • cow
  • sheep
  • pig

Syntax for ordered lists

{{flatlist|
# first
# second
# third
# fourth
# fifth
# sixth
}}

produces:

  1. first
  2. second
  3. third
  4. fourth
  5. fifth
  6. sixth

Using optional parameters

{{flatlist |indent=2 
|style=border:solid 1px silver; background:lightyellow; 
|class=nowraplinks |
* Alpine skiing at the 1936 Winter Olympics
* Alpine skiing at the 1948 Winter Olympics
* Alpine skiing at the 1952 Winter Olympics
* Alpine skiing at the 1956 Winter Olympics
* Alpine skiing at the 1960 Winter Olympics
* Alpine skiing at the 1964 Winter Olympics
}}

produces:

Technical details

This template uses the .hlist CSS class defined in MediaWiki:Common.css to generate horizontal lists. It causes ordinary html list items to be displayed inline (horizontally), where they would normally display as block elements (vertically). The class also generates the interpuncts between list items and parentheses around nested lists.

Wikitext Expanded template HTML
{{flatlist|
* cat
* dog
* horse
* cow
* sheep
* pig
}}
<div class="hlist">
<ul><li>cat</li>
<li>dog</li>
<li>horse</li>
<li>cow</li>
<li>sheep</li>
<li>pig</li></ul>
</div>