View source for Template:Lidot/doc

{{Documentation subpage |[[Template:Lidot]], [[Template:Lidot2]] and [[Template:Lidot3]]}}
<!-- Categories and interwikis go at the bottom of this page. -->

== Usage ==
The template {{tlx|lidot}} (for "list item dot") simulates, as closely as possible within the bounds of differences between browsers, the appearance of the bullet used by Wikipedia in unordered lists.  Its variants {{tlx|lidot2}} and {{tlx|lidot3}} do the same, with minor enhancements for more consistent list appearance in certain cases, as documented below.

The purpose of the templates is to replace the auto-generated bullet, 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-bullet suppressed with <code>style="list-style: none;"</code> CSS. This is useful in cases where the content would be hard to read or understand were the bullets missing when the content is copy-pasted, e.g. into a word processor document or an e-mail.  This is, arguably, most cases of unordered lists {{em|used in actual articles}} on the site. It can also be used to preserve bullets in block-quoted material where the bullets 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 is also useful for creating single bullet items in articles and other pages; a list of one item isn't really a list, so there isn't any reason to use list code to create a lone bullet item.

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

===Examples===
<syntaxhighlight lang="html">
 <ul style="list-style: none; margin-left: 0.5em;">
 <li>{{lidot}}A bullet item</li>
 <li>{{lidot}}Another bullet item</li>
 <li>{{lidot}}A third bullet item</li>
 </ul></syntaxhighlight>
gives:
<ul style="list-style: none; margin-left: 0.5em;">
<li>{{lidot}}A bullet item</li>
<li>{{lidot}}Another bullet item</li>
<li>{{lidot}}A third bullet item</li>
</ul>

<syntaxhighlight lang="html">
 {{plainlist|1=
 <li>{{lidot}}A bullet item</li>
 <li>{{lidot}}Another bullet item</li>
 <li>{{lidot}}A third bullet item</li>
 }}
</syntaxhighlight>
gives no indentation:
{{plainlist|1=
<li>{{lidot}}A bullet item</li>
<li>{{lidot}}Another bullet item</li>
<li>{{lidot}}A third bullet item</li>
}}
<pre>
 {{Unbulleted list
 |{{lidot}}A bullet item
 |{{lidot}}Another bullet item
 |{{lidot}}A third bullet item
 }}
</pre>
also gives no indentation:
{{Unbulleted list
|{{lidot}}A bullet item
|{{lidot}}Another bullet item
|{{lidot}}A third bullet item
}}

===Comparison to auto-generated list items===
The template must be put inside a list item in an unordered list with CSS positioning in order to be aligned as a list item.
*An auto-generated bullet item
<ul style="list-style: none; margin-left: 0.5em;">
<li>{{lidot}}A {{tnull|lidot}} bullet item</li>
</ul>
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:
<ul style="list-style: none;">
<li>{{lidot}}A {{tnull|lidot}} bullet item</li>
</ul>

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

{{lidot}}Not actually a list item, but might have its uses.

===Use with ordered (numbered) lists===

{{strong|Nested:}} The {{tlx|lidot2}} version of the template has a bullet that is black like ordered list numbers instead of dark blue like auto-generated unordered list bullets, for a more consistent appearance in complex lists. The example below uses manual ordered numbering that, like manual unordered bulleting, is copy-pasteable:
<syntaxhighlight lang="html">
 <ol style="list-style: none; margin-left: 1.8em;">
 <li>1.&nbsp;&nbsp;Numbered item
   <ul style="list-style: none; margin-left: 1.5em;">
   <li>{{lidot2}}Unnumbered nested item</li>
   </ul>
 </li>
 <li>2.&nbsp;&nbsp;Another numbered item</li>
 </ol>
</syntaxhighlight>
<ol style="list-style: none; margin-left: 1.8em;">
<li>1.&nbsp;&nbsp;Numbered item
  <ul style="list-style: none; margin-left: 1.5em;">
  <li>{{lidot2}}Unnumbered nested item</li>
  </ul>
</li>
<li>2.&nbsp;&nbsp;Another numbered item</li>
</ol>


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

==The formatting is as good as it gets==
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 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: It is a bit smaller than the real thing in most if not all Mac browsers, and a bit bigger in Windows browsers, using default system and browser fonts and Wikipedia's CSS unmodified by user CSS. At default font sizes, it is a bit to the left of an auto-generated bullet in Chrome/Mac and Firefox/Win; a bit to the right in Explorer/Win, Firefox/Win, Firefox/Mac; and about right in Chrome/Win, Chrome/Mac and Safari/Mac.  Its vertical alignment shifts a little upward, and the space between bullet and text increases, at increasingly large font sizes. More importance has been attached to ensuring text alignment than bullet alignment, 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>