User:Opencooper/Proper indentation

From Wikipedia, the free encyclopedia

One prevalent problem I've noticed in Wikipedia articles is the misuse of the colon in wikitext to indent. The colon in wikitext forms part of a definition list, where a semicolon is used for the term and the colon for its definition.

An example would be:

;Wikipedia
:An online encyclopedia
;Britannica
:A print encyclopedia

which forms the HTML:

<dl>
  <dt>Wikipedia</dt>
  <dd>An online encyclopedia</dd>
  <dt>Britannica</dt>
  <dd>A print encyclopedia</dd>
</dl>

and results in:

Wikipedia
An online encyclopedia
Britannica
A print encyclopedia

However, a problem arises when only the colon by itself is used for indentation:

Pi is the constant
:3.14

which form the html:

<p>Pi is the constant</p>
<dl>
  <dd>3.14</dd>
</dl>

and results in:

Pi is the constant

3.14

What happens is that using the colon markup for our text turned it into definition list which incidentally, is also indented. This violates the semantics of the HTML and presents an accessibility issue. (the mobile site and some mirrors also format blockquotes distinctively which will also cause these to look off)

I've also found that the semicolon part of the definition list is misused at times.

  • When you just want to make things bold, use the bold markup: '''test''' results in test
  • For section headers, use subheadings that are a lower level of the parent heading. If you really just want a bold false heading, use the bold formatting (though keep in mind MOS:PSEUDOHEAD)

Alternatives[edit]

Instead of colon indentation, there are several alternatives one can use depending on what they need.

  • For quotations, use the <blockquote> tag or the {{Quote}} template. Repeat to nest quotations. The template also supports attribution
  • For indentation in poems, use the <poem> tag inside a blockquote along with spaces for formatting. {{Poemquote}} also works.
  • For mathematical formulas, add display=block to the inside of the math tag, like so: <math display=block>
  • For hatnotes, use {{hatnote}} or one of the more specific hatnote templates
  • For lists, use asterisks. For nested lists, use additional asterisks; so ** would form the second level and so on. For numbered lists, use #. For lists using letters or roman numerals, use {{Ordered list}}
  • While tables generally shouldn't be indented, should you need to for legends or specific cases: add style="margin-left: 1.6em;" to the first line, which starts with {|
  • When you actually just want to indent, use {{Block indent}} or {{Indent}} (although keep in mind that Wikipedia does not indent the beginning of paragraphs). {{in5}} or {{indent|5}} are approximately equivalent to one colon indentation for most browsers.

Unfortunately, for talk pages, colons for indentation are far too ingrained to ever likely change, so that issue will have to be solved by the Wikimedia developers with either new talk software or by parsing lone semicolons differently in the wikitext. (though for the other cases listed, there are usually better semantics that can be indicated than plain indentation, unlike for nested conversations)

Finding colon-indents[edit]

You can add the following to your common.css so you can spot instances where definition list syntax has been used for indentation:

/* Add gray mark to left of improper uses of `:` to indent text */
dd {
    border-left: 3px solid #dedede;
    padding-left: 2px;
}
dt + dd, dd + dd {
	border-left: none;
	padding-left: 0;
}

This would cause the pi example given above to look like this:

Pi is the constant

3.14

Regular definition lists will still look normal. It also won't look too out-of-place on talk pages. Of course you could use any CSS you want to style it to your taste as well.

See also[edit]