Template:Lino

{{{1}}}.  

Template documentation[view] [edit] [history] [purge]

Usage

The template {{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.

The purpose of the template 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 style="list-style: none;" 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 is, without doubt, the vast majority of cases of ordered lists 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, {{lino}} is a meta-template used by other templates, such as {{linum}}, to create more complicated list templates without writing redundant code.

Example

 <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>

gives:

1. 1.  The first ordered list item
2. 2.  The second ordered list item
3. 3.  The third ordered list item

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.

1. An auto-generated list item

1. 1.  A {{lino}} list item

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:

1. 1.  A {{lino}} list item

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

1.  Not actually a list item, but might have its uses.

Use in nested lists

The example below uses entirely manual ordered numbering that is copy-pasteable:

 <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>

1. 1.  Numbered item
   1. A.  Lettered nested item
      1. i.  Roman lower-cased item, nested further
   2. 2.  Another numbered item

   Precise placement of different numbering types (1, A, i, 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.

   At the same level: The {{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:

    <ol style="list-style: none; margin-left: 1.8em;">
    <li>1.  Numbered item</li>
    <li>2.  Another numbered item</li>
    </ol>
    <ul style="list-style: none; margin-left: 1.8em; margin-top: -0.3em;">
    <li>{{lidot3}}Unnumbered item</li>
    </ul>
   

   gives

   1. 1.  Numbered item
   2. 2.  Another numbered item
   • •  Unnumbered item

   The formatting is as good as it gets

   Please 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 Template:Lino/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

   The copy-pasteable lists templates:
   • {{unbulleted list}} container list generator for copy-pasteable lists
   • {{linum}} - ordered list item with number (uses {{lino}})
   • {{libull}} - unordered list item with bullet
   • {{lidot}} - bullet for unordered lists and stand-alone bullet items
   • {{lidot2}} - black variant for nested lists
   • {{lidot3}} - spaced & black variant for use in series with ordered lists
   • Sarkarverse:Lists
   • Sarkarverse:Manual of Style/Stand-alone lists
   • Help:List