View source for Template:Lino/doc

{{Documentation subpage}}
<!-- Categories and interwikis go at the bottom of this page. -->

== Usage ==
The template {{tlx|lino}} (for "list item no.") simulates, as closely as possible within the bounds of differences between browsers, the appearance of the numbering used by Wikipedia in ordered lists.  <!--Its variant {{tlx|lino2}} does the same, with minor enhancements for more consistent list appearance in certain cases, as documented below.-->  It is primarily a metatemplate for the {{tlx|linum}} template which produces entire list items inside the {{tlx|unbulleted list}} wrapper template; {{tnull|linum}} can be used to lay out complex outlines (e.g. in "I) ... A) ... 1) ... i) ..." format, etc.).

The purpose of the template<!--s are--> is to replace the auto-generated number, which cannot be copy-pasted in most if not all graphical browsers, with a copy-pasteable one, by adding it to the beginning of a list item that has its auto-numbering suppressed with <code>style="list-style: none;"</code> CSS. This is useful in cases where the content would be hard to read or even understand at all were the numbers missing when the content is copy-pasted, e.g. into a word processor document or an e-mail.  This includes many if not most cases of ordered lists {{em|used in actual articles}} on the site. It can also be used to preserve list item number in block-quoted material where the numbers are part of the quotation.  The copy-paste concern is much less important when it comes to projects, talk pages and other non-article content, since these usually are not reused elsewhere.

This template can also be used to simulate list items, e.g. in template documentation, where there is no need to create a real list, or where real list code might complicate an example.

Finally, {{tnull|lino}} is a meta-template used by other templates, such as {{tl|linum}}, to create more complicated list templates without writing redundant code.

===Example===
<syntaxhighlight lang="html">
 <ol style="list-style: none; margin-left: 1.8em;">
 <li>{{lino|1}}The first ordered list item</li>
 <li>{{lino|2}}The second ordered list item</li>
 <li>{{lino|3}}The third ordered list item</li>
 </ol>
</syntaxhighlight>
gives:
<ol style="list-style: none; margin-left: 1.8em;">
<li>{{lino|1}}The first ordered list item</li>
<li>{{lino|2}}The second ordered list item</li>
<li>{{lino|3}}The third ordered list item</li>
</ol>

===Comparison to auto-generated list items===
The template must be put inside a list item in an ordered list with CSS positioning in order to be aligned as a list item.
#An auto-generated list item
<ol style="list-style: none; margin-left: 1.8em;">
<li>{{lino|1}}A {{tnull|lino}} list item</li>
</ol>
Note: Try to copy-paste both lines, and you'll find that the auto-generated bullet on the first is not copy-pasteable in any major browser, and in most browsers not even selectable.

Without CSS positioning, it will align to the beginning of the content, after the number, of the auto-generated version:
<ol style="list-style: none;">
<li>{{lino|1}}A {{tnull|lino}} list item</li>
</ol>

Simply used by itself, without any list code, it looks like:

{{lino|1}}Not actually a list item, but might have its uses.

===Parameters===

* {{para|1}} or first unnumbered parameter – the number, letter or other designation of the line item (e.g. <code>1</code>, <code>A</code>, <code>xiv</code>, <code>physics</code>, etc.). This can have wikimarkup (e.g. style, even a link) applied to it.
* {{para|punct}} – the punctuation after the number or other designation (e.g. <code>)</code>, <code>:</code>, <code>&amp;nbsp;–</code>; defaults to <code>.</code> like our default list <code>#</code>-formatted wikicode list style's output).
* {{para|extra}} – immediately after {{para|punct}}; can be used to insert one or more <code>&amp;nbsp;</code> spaces to content alignment in list with 10 or more (or 100 or more, etc.) items.
* {{para|color}} – a <code>#{{var|XXXXXX}}</code> color code or [[Web color]] name for the color of the text (not its background), for unusual cases in which this is needed.  This should not normally be used in mainspace {{crossref|(see [[MOS:COLOR]])}}.

===Use in nested lists===

The example below uses entirely manual ordered numbering that is copy-pasteable:
<syntaxhighlight lang="html">
 <ol style="list-style: none; margin-left: 1.8em;">
 <li>{{lino|1}}Numbered item
   <ol style="list-style: none; margin-left: 1.4em;">
   <li>{{lino|A}}Lettered nested item
     <ol style="list-style: none; margin-left: 1.6em;">
     <li>{{lino|i}}Roman lower-cased item, nested further</li>
   </li>
   </ol>
 </li>
 <li>{{lino|2}}Another numbered item</li>
 </ol>
</syntaxhighlight>
<ol style="list-style: none; margin-left: 1.8em;">
<li>{{lino|1}}Numbered item
  <ol style="list-style: none; margin-left: 1.4em;">
  <li>{{lino|A}}Lettered nested item
    <ol style="list-style: none; margin-left: 1.6em;">
    <li>{{lino|i}}Roman lower-cased item, nested further</li>
    </ol>
  </li>
  </ol>
</li>
<li>{{lino|2}}Another numbered item</li>
</ol>

Precise placement of different numbering types (1, A, i, {{serif|I}}, etc.) can require some CSS fine tuning, as shown here.  The simplest method is to use 1.8em for the first level, and 1.4 for each subsequent level, and adjust those as needed if there are minor display problems.

{{strong|At the same level:}} The {{tlx|lidot3}} version, also black, has extra spacing between the bullet and the content to make it align properly with ordered rather than unordered listss. The example below again uses copy-pasteable manual ordered numbering:
<syntaxhighlight lang="html">
 <ol style="list-style: none; margin-left: 1.8em;">
 <li>1.&nbsp;&nbsp;Numbered item</li>
 <li>2.&nbsp;&nbsp;Another numbered item</li>
 </ol>
 <ul style="list-style: none; margin-left: 1.8em; margin-top: -0.3em;">
 <li>{{lidot3}}Unnumbered item</li>
 </ul></syntaxhighlight>
gives
<ol style="list-style: none; margin-left: 1.8em;">
<li>1.&nbsp;&nbsp;Numbered item</li>
<li>2.&nbsp;&nbsp;Another numbered item</li>
</ol>
<ul style="list-style: none; margin-left: 1.8em; margin-top: -0.3em;">
<li>{{lidot2}}Unnumbered item</li>
</ul>

==Formatting==
Please {{strongbad|do not tweak}} the values used in this template in an effort to make it look better in your browser; you'll make it look much worse in most if not all of the others. It has already been tested and refined, cross-platform, in every major browser, and its present sizing and positioning values are the best compromise that can be achieved for multi-browser display. Feel free to use the [[{{FULLPAGENAME}}/sandbox]] to experiment, of course; maybe you'll hit on an improvement.

If anyone is wondering about the details: Because the encyclopedia's text is not using a monospaced font, absolutely pixel-perfect alignment is not possible. The positioning has been tested on Safari, Firefox, Chrome and Opera under Mac OS X, and Explorer, Firefox, Chrome, Safari and Opera on Windows, with surprisingly successful and consistent results that handle resizing.

== See also ==
{{olist/see-also}}

<includeonly>{{Sandbox other||
<!-- Categories and interwikis go here: -->
[[Category:Copy-pasteable list templates]]
}}</includeonly>