User:SMcCandlish/sandbox

HTML5 aside test
Aside test

Block and inline-block elements tests
term 1: Definition 1. term 2: 1. Definition 2a start. Definition 2a conclusion. 2. Definition 2b.

term 3: Definition 3. term 4: 1. Definition 4a start. Definition 4a conclusion. 2. Definition 4b.

term 5: Definition 5. term 6: 1. Definition 6a start.

Definition 6a conclusion. 2. Definition 6b.

term 7: Definition 7. term 8: 1. Definition 8a start.

Definition 8a conclusion. 2. Definition 8b.

"Paragraph 1. Paragraph 2."
 * Compare blockquote handling : :

Paragraph 3. Paragraph 4.

Paragraph 5.

Paragraph 6.

Paragraph 7.

Paragraph 8.

Item 1a.
 * Compare unordered list handling : :

Item 1b.

Item 2.

 Item 3a.

Item 3b.

 Item 4. 

 Item 5a.

Item 5b.



 Item 6. </li> </ul>

<ul> <li>Item 7a.

Item 7b.</li> <li>Item 8.</li> </ul>

<ol><li>Item 1a.
 * Compare ordered list handling : :

Item 1b.

</li><li>Item 2.</li></ol>

<ol> <li>Item 3a.

Item 3b.

</li> <li>Item 4.</li> </ol>

<ol> <li>Item 5a.

Item 5b.

</li>

<li> Item 6. </li> </ol>

<ol> <li>Item 7a.

Item 7b.</li> <li>Item 8.</li> </ol>

CatScan test
This was not working (ToolServer error) as of 2012-12-24. ⇒

Template:B test
B |b1 = |b2 = |b3 = |b4 = |b5 = |b6 =

Sig tests date formatting gadget
— SMcCandlish   Talk⇒ ɖ∘¿ ¤ þ  Contribs. 12:36, 27 February 2012 (UTC)

— SMcCandlish   Talk⇒ ɖ∘¿ ¤ þ  Contribs. 1:36, 26 February 2012 (UTC)

— SMcCandlish   Talk⇒ ɖ∘¿ ¤ þ  Contribs. 12:36, 27 January 2012 (UTC)

— SMcCandlish   Talk⇒ ɖ∘¿ ¤ þ  Contribs. 12:36, 27 February 2011 (UTC)

Indexes of articles

 * Propose renaming:
 * Category:Indexes of articles to Category:Indexes of topics
 * Category:Indexes of biographical articles to Category:Indexes of biographical topics
 * Category:Indexes of engineering articles to Category:Indexes of engineering topics
 * Category:Indexes of mathematics articles to Category:Indexes of mathematics topics
 * Category:Indexes of philosophy articles to Category:Indexes of philosophy topics
 * Category:Indexes of religion articles to Category:Indexes of religion topics
 * Category:Indexes of articles by country to Category:Indexes of topics by country
 * Category:Indexes of articles by U.S. state to Category:Indexes of topics by U.S. state
 * Propose merging redundant category Category:Indexes of articles by region with Category:Lists of topics by region and renaming to Category:Indexes of topics by region
 * Nominator's rationale: The names need to be "Index" not lists, per main category Category:Indexes of topics and more importantly because they're not regular, free-form list articles, but bare alphabetical indexes. The majority of new ones being created are named "Index of...". And it needs to be "topics", despite current name of main category, because more and more indexes in these categories are named with "topics", since a large number of these indexes are indexing more than articles (portals, categories, maps, etc., etc). "Articles" in their title is a misleading misnomer. Even in individual cases where it isn't yet, it probably eventually will be; meanwhile, the more general "topics" is never inaccurate, even when an index is presently just of articles. — SMcCandlish   Talk⇒ ʕ(Õلō)ˀ  Contribs. 08:02, 17 December 2011 (UTC)

Complex, copy-pasteable lists
No known graphical browsers include the automatically generated list item numbers or bullets as copy-pasteable content. Try it yourself:


 * 1) An ordered list item
 * An unordered list item

Note that you can copy-paste neither the item number nor the bullet. The entire block of content will paste (e.g. into a word processor file or an e-mail) as just:

In, which is intended to be re-used in as many ways as possible, the numbering is important to the content, and in some cases crucial (see, for example, the numbered lists at Billiard balls). Bullets are usually less important, but they are a strong aid to readability in both graphical and text-based browsers, and in copy-pasted list content. Because these list item markers are, in the encyclopedic context, actually, it is better to suppress the display of auto-generated numbers and bullets, and instead number and bulletize the items manually. This largely does not apply to project pages, talk pages, and other non-article material, since it is generally internal to the project and not intended for broad reuse.

As of this writing, the only known technique for making list numbers and bullets copy-pasteable requires manual use of HTML and CSS, instead of just wiki markup's "#" and "*" shorthand, which do not work properly for this purpose. While there is not presently a non-manual means of resolving this copy-paste issue, the MediaWiki developers and/or some Wikipedia template editors may eventually provide improved, easier methods.

The next few sections on different pasteable list types shows basic coding, without getting into alignment formatting, which is in subsequent sections.

Pasteable ordered numeric lists
<ol style="list-style: none;"> <li>1.&amp;nbsp;&amp;nbsp;An unordered item</li> <li>2.&amp;nbsp;&amp;nbsp;Another unordered item</li> </ol> gives <ol style="list-style: none;"> <li>1. An unordered item</li> <li>2. Another unordered item</li> </ol>

If the list does not begin with 1, it is good for metadata reasons to ensure that the  position is correct anyway, since software tools parsing the content may not even notice that the display is visually suppressed, and use this value for their own purposes: <ol style="list-style: none;" start="242"> <li>242.&amp;nbsp;&amp;nbsp;An unordered item</li> <li>243.&amp;nbsp;&amp;nbsp;The next item</li> </ol> gives <ol style="list-style: none;" start="242"> <li>242. An unordered item</li> <li>243. The next item</li> </ol>

Descending series (or numbers otherwise not incrementally ascending) should be be done individually: <ol style="list-style: none;"> 242.&amp;nbsp;&amp;nbsp;An unordered item</li> 241.&amp;nbsp;&amp;nbsp;The next descending item</li> </ol> gives <ol style="list-style: none;"> 242. An unordered item</li> 241. The next descending item</li> </ol>

Pasteable unordered bullet lists
<ul style="list-style: none; margin-left: 0.5em;"> <li>A bullet item</li> <li>Another bullet item</li> </ul> gives <ul style="list-style: none; margin-left: 0.5em;"> <li>A bullet item</li> <li>Another bullet item</li> </ul>

Pasteable nested lists
<ul style="list-style: none; margin-left: 0.5em;"> <li>Dog <ul style="list-style: none; margin-left: 1.5em;"> <li>Retriever <ul style="list-style: none; margin-left: 1.5em;"> <li>Labrador</li> </li> <li>Hound</li> </ul> </li> <li>Cat</li> </ul> gives <ul style="list-style: none; margin-left: 0.5em;"> <li>Dog <ul style="list-style: none; margin-left: 1.5em;"> <li>Retriever <ul style="list-style: none; margin-left: 1.5em;"> <li>Labrador</li> </li> <li>Hound</li> </ul> </li> <li>Cat</li> </ul> Compare the autogenerated version:
 * Dog
 * Retriever
 * Labrador
 * Hound
 * Cat

Vertical alignment
MediaWiki's built-in parsing of wikicode leaves a lot to be desired when it comes to flexible and consistent formatting of lists. By using HTML and wiki templates, a much richer system of list control is available.

The MediaWiki parser puts the manual numbering (and bulleting) of custom lists like this the content of each list item, but does not move the lists items to the left when the auto-generated bullets and numbers are suppressed; it is as if the parse is reserving space for "phantom" number.

<ol style="list-style: none;"> <li> 1. A copy-pasteable ordered list item, with no alignment formatting</li> </ol>
 * 1) A n auto-generated ordered list item. Note how much further to the left it is, and that the pasteable one's number is aligned with this one's content (as highlighted in grey, in graphical browsers, for this example).

We have to overcome this minor formatting problem with CSS (when it matters - in articles with only one, short list, or several formatted the same way, the exact positioning isn't really of any concern).

Numbers
Ordered, numbered lists look best when aligned to the decimal point (or other punctuation) following the number. The MediaWiki parser does this automatically with its very simple but limited wikicode markup. For more complex lists done in HTML, this compensation has to be performed manually.

For simpler lists that will not clash in appearance with other lists on the same page (because they're formatted this way too, they're bullet lists, or there aren't any), the easy way is to just use  to the left of the shorter numbers enough times that it looks right, usually twice per missing digit: <ol style="list-style: none; margin-left: 0.7em;"> <li>   1. The first ordered item</li> <li>   2. The second ordered item...</li> <li> 10. The tenth ordered item...</li> <li>100. The one-hundredth ordered item</li> </ol> This is really only practical for short lists, and is only approximate (because some numerals are wider than others in most fonts). The technique remains useful for lists with few item, each of which has a substantial amount of content, making it difficult to notice any slight misalignment. Note that the  value will have to be adjusted for longer lists (see single, double and triple digit code below for exact values) to get positioning that is near-identical to auto-generated lists.

Compare the poor formatting of the unadjusted version: <ol style="list-style: none; margin-left: 1.8em;"> <li>1. The first ordered item</li> <li>2. The second ordered item...</li> <li>10. The tenth ordered item...</li> <li>100. The one-hundredth ordered item</li> </ol>

Compare auto-generated code:
 * 1) The first ordered item
 * 2) The second ordered item...
 * 3) The tenth ordered item...</li>
 * 4) The hundred ordered item</li>

The initially more complex but more precise and much less tedious method is to use CSS to adjust the positions of base-10 blocks of list items:: <ol style="list-style: none; margin-left: 1.8em;"> <li>1. The first ordered item</li> <li>...</li> <li>8. The eighth ordered item</li> <li>9. The ninth ordered item</li> </ol> <ol start="10" style="list-style: none; margin-left: 1.3em; margin-top: -0.4em;"> <li>10. The tenth ordered item</li> <li>11. The eleventh ordered item</li> <li>...</li> <li>98. The ninety-eighth ordered item</li> <li>99. The ninety-ninth ordered item</li> </ol> <ol start="100" style="list-style: none; margin-left: 0.7em; margin-top: -0.4em;"> <li>100. The one-hundredth ordered item</li> <li>101. The one-hundred-first ordered item</li> <li>...</li> <li>999. The nine-hundred-ninety-ninth ordered item</li> </ol> Each sublist after the first must be kerned upward 0.4em a little bit to conform the gap between lists to the size of the space between items. This is done with   The   specifics for lining up the decimals are detailed below.

One digit: <ol style="list-style: none; margin-left: 1.8em;"> <li>1. The first ordered item</li> <li>2. The second ordered item</li> <li>3. The third ordered item</li> </ol> Compare the auto-generated version:
 * 1) The first ordered item
 * 2) The second ordered item
 * 3) The third ordered item

Two digits: <ol start="10" style="list-style: none; margin-left: 1.3em;"> <li>10. The tenth ordered item</li> <li>11. The eleventh ordered item</li> <li>12. The twelfth ordered item</li> </ol> Compare the auto-generated versions: <li>The tenth ordered item</li> <li>The eleventh ordered item</li> <li>The twelfth ordered item</li> </ol> or the sloppy but shorter
 * 1) The tenth ordered item</li>
 * 2) The eleventh ordered item
 * 3) The twelfth ordered item

Three digits: <ol start="100" style="list-style: none; margin-left: 0.7em;"> <li>100. The one-hundredth ordered item</li> <li>101. The one-hundred-first ordered item</li> <li>102. The one-hundred-second ordered item</li> </ol> Compare the auto-generated versions: <li>The one-hundredth ordered item</li> <li>The one-hundred-first ordered item</li> <li>The one-hundred-second ordered item</li> </ol> or the sloppy but shorter
 * 1) The one-hundredth ordered item</li>
 * 2) The one-hundred-first ordered item
 * 3) The one-hundred-second ordered item

Just for the record, four digits: <ol start="100" style="list-style: none; margin-left: 0.2em;"> <li>1000. The one-thousandth ordered item</li> <li>1001. The one-thousand-first ordered item</li> <li>1002. The one-thousand-second ordered item</li> </ol> Compare the auto-generated versions: <li>The one-thousandth ordered item</li> <li>The one-thousand-first ordered item</li> <li>The one-thousand-second ordered item</li> </ol> or the sloppy but shorter
 * 1) The one-thousandth ordered item</li>
 * 2) The one-thousand-first ordered item
 * 3) The one-thousand-second ordered item

Really, if there are more than three digits, this method is not likely to be practical, and auto-generated lists should be used, and/or consider breaking the page up into a series of pages.

Bullets
Bullets, unordered, aligned with first ordered digit: <ul style="list-style: none; margin-left: 1.8em;"> <li>An unordered item</li> <li>Another unordered item</li> <li>And another unordered item</li> </ul>
 * 1) Numbered alignment example
 * 1) Numbered alignment example

When used at end of an ordered list:

<ol style="list-style: none; margin-left: 1.8em;"> <li>1. A numbered item</li> <li>2. Another numbered item</li> </ol> <ul style="list-style: none; margin-left: 1.8em; margin-top: -0.4em;"> <li>An unnumbered item</li> </ul>

Bullets, unordered, aligned with auto-generated unordered bullets (to the extent possible): <ul style="list-style: none; margin-left: 0.5em;"> <li>An unordered item</li> <li>Another unordered item</li> <li>And another unordered item</li> </ul> This is the best compromise alignment possible, as noted above. For browser-by-browser details, see Template:Lidot's documentation.
 * Bulleted alignment example

No numbers or bullets
No digits or bullets, ordered in metadata, aligned with first ordered digit: <ol style="list-style: none; margin-left: 1.8em;"> <li>An unordered item</li> <li>Another unordered item</li> <li>And another unordered item</li> </ol>
 * 1) Numbered alignment example

No digits or bullets, ordered in metadata, aligned with ordered values: <ol style="list-style: none; margin-left: 3.2em;"> <li>An unordered item</li> <li>Another unordered item</li> <li>And another unordered item</li> </ol>
 * 1) Numbered alignment example

No digits or bullets, unordered, aligned with first ordered digit: <ul style="list-style: none; margin-left: 1.8em;"> <li>An unordered item</li> <li>Another unordered item</li> <li>And another unordered item</li> </ul>
 * 1) Numbered alignment example

No digits or bullets, unordered, aligned with ordered values: <ul style="list-style: none; margin-left: 3.2em;"> <li>An unordered item</li> <li>Another unordered item</li> <li>And another unordered item</li> </ul>
 * 1) Numbered alignment example

No digits or bullets, unordered, aligned with unordered bullets: <ul style="list-style: none; margin-left: 0.5em;"> <li>An unordered item</li> <li>Another unordered item</li> <li>And another unordered item</li> </ul> This is the best compromise alignment possible. It is a hair too far to the right in Firefox and Explorer, and a bit too leftward for Chrome and Safari, but this is all we can do, because bullet size and spacing are not codified in the W3C HTML specifications, so each browser maker does whatever they want.
 * Bulleted alignment example

No digits or bullets, unordered, aligned with unordered values: <ul style="list-style: none;"> <li>An unordered item</li> <li>Another unordered item</li> <li>And another unordered item</li> </ul> is generally close enough, but off by approximately -0.01em in most browsers; this can be fixed with the following, with no adverse effect on browsers that do not support kerning this fine: <ul style="list-style: none; margin-left: 1.51em;"> <li>An unordered item</li> <li>Another unordered item</li> <li>And another unordered item</li> </ul>
 * Bulleted alignment example
 * Bulleted alignment example

Nested
Unordered bullet list inside ordered numbered list item: <ol style="list-style: none; margin-left: 1.8em;"> <li>1. The first ordered item <ul style="list-style: none; margin-left: 1.5em;"> <li>A nested unordered item</li> <li>Another nested unordered item</li> <li>And another nested unordered item</li> </ul> </li> <li>2. The second ordered item</li> </ol> Compare auto-generated version, with bullets indented too far (and blue):
 * 1) The first ordered item
 * 2) *A nested unordered item
 * 3) *Another nested unordered item
 * 4) *And another nested unordered item
 * 5) The second ordered item

Unordered no-bullet list inside ordered numbered list item: <ol style="list-style: none; margin-left: 1.8em;"> <li>1. The first ordered item <ul style="list-style: none; margin-left: 2.5em;"> <li>An unordered item</li> <li>Another unordered item</li> <li>And another unordered item</li> </ul> </li> <li>2. The second ordered item</li> </ol> There is no auto-generated equivalent.

Unordered bullet list inside unordered bullet list item (and blue like the auto-generated ones): <ul style="list-style: none; margin-left: 0.5em;"> <li>An unordered item <ul style="list-style: none; margin-left: 1.5em;"> <li>A nested unordered item</li> <li>Another nested unordered item</li> <li>And another nested unordered item</li> </ul> </li> <li>Another unordered item</li> </ul> Compare auto-generated version: For black bullets, use
 * An unordered item
 * A nested unordered item
 * Another nested unordered item
 * And another nested unordered item
 * Another unordered item

A traditional outline, in the order I., A., 1., a., i., then I)..., then (I)...; the first six levels are shown: <ol style="list-style: none; margin-left: 1.8em;"> <li> I. Top level <ol style="list-style: none; margin-left: 1.8em;"> <li>A.  First nest  <ol style="list-style: none; margin-left: 1.8em;">  <li>1.  Second nest   <ol style="list-style: none; margin-left: 1.8em;">   <li>a.  Third nest    <ol style="list-style: none; margin-left: 1.8em;">    <li>i.  Fourth nest     <ol style="list-style: none; margin-left: 1.8em;">     <li> I)  Fifth nest</li> <li>II) Fifth nest, second item</li>     </ol>    </li>    <li>ii.  Fourth nest, second item</li>    </ol>   </li>   <li>a.  Third nest, second item</li>   </ol>  </li>  <li>2.  Second nest, second item</li>  </ol> </li> <li>B.  First nest, second item</li> </ol> </li> <li>II.  Top level, second item</li> </ol> There is no auto-generated equivalent, only a hybrid HTML and wiki-markup version that isn't really any easier.

When to use complex vs. basic lists
As a rule of thumb: then it is recommended to use pasteable lists to increase the usability of the article.
 * If the lists in the article are confusing or poorly formed;
 * or if the article is at least somewhat well developed, i.e.,
 * the article is "C"-class or better (above "Start" or "Stub"),
 * or contains lists not likely to need a great deal of further work,
 * or is a list article that is not being actively expanded,
 * and the article is not in the middle of a lot of editorial churn, especially involving inexperienced editors in large numbers;

No editor should feel to use the more complex pasteable list code; the top priority at Wikipedia is the creation of verifiable, reliable articles, and any impediment to doing so can be ignored by convention. The other side of this coin is that editors are free to improve articles in many ways, and a major goal of the entire WikiMedia project is to make this content as broadly useful and usable as possible, so revert-warring to prevent another editor from converting a list to the more detailed but flexible format is strongly discouraged.

Text rotation trick (with multi-browser support)
<span style="display: inline-block; transform: rotate(-5deg); -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg);">Chicken Nuggets