View source for TCS Wiki:Advanced text formatting

{{essay|WP:TYPESET}}
This essay, '''Wikipedia:Advanced text formatting''' or '''Advanced typesetting''', describes many techniques to control (or adjust) the alignment of text on a page. For people with professional backgrounds in [[typesetting]], this essay is not intended as a joke, but rather, an advancement over the default typesetting of stub articles. Techniques listed here are still intended for general readers.
__TOC__
==Moving vanity-boxes lower in articles==
Perhaps the single greatest improvement to many articles is to lower those grandstanding top tag-boxes that proclaim, ''"This article is bad: change it now"''. Most of those tag-box templates allow&nbsp;a parameter "|section" when lowering the tag-box further down the page. For example: &#123;{<code>RefImprove|section|date=May 2009</code>}}. Moving a distracting tag-box can greatly improve the readability for readers, who might otherwise become surprised and alarmed by a 2-year-old gripe box which someone threw on the page, unopposed, years ago. Some tag-boxes give the idea that the box must be read to avoid very dangerous [[information]] in an article.

==Avoiding wrap of end-quote or apostrophe==
One of the most troublesome typesetting [[wikt:glitch|glitch]]es is the wrapping of the last word in a quotation onto a second line, when followed by [[parenthesis|parentheses]] or brackets "[ ]":
{| class=wikitable width=410 align=center
|Typical wrapping of end-quotemark:
: "The quick brown fox jumped over the lazy<br>dogs" (typewriter exercise).
|}
There are several ways to allow the end-word to stay on the same line, without wrapping. Perhaps the most common fix is to append the blank-code "&amp;#160;" (or even a comma) after the end [[Quotation mark|quotemark]] so that it will not wrap too soon:

{| class=wikitable width=415 align=center
|Wrapping of end-quotemark plus &#160:
: "The quick brown fox jumped over the lazy dogs"&#160; (typewriter exercise).
|}
To fix wrapping, the word ''dogs'' is followed by &amp;#160 (after the quotemark:&nbsp; dogs"&amp;#160; ). Because thousands of articles begin with formally defining a term, with stating a quoted meaning, the forced wrapping of end-quotemarks has become a major typesetting nightmare in Wikipedia. The wrapping of end-quotes grew to be so common, during 2005-2010, that it has become instinctive to expect an end-quote to almost always be prematurely wrapped onto a second line, and the first line to be truncated as bizarrely too short. The premature wrapping of the 18-character phrase "dogs...typewriter" is typical, not an exaggeration of how much text gets forced onto the second line in many articles.

A similar problem occurs with an end-apostrophe & parentheses:
{| class=wikitable width=370 align=center
|Typical wrapping of end-apostrophe:
: The film ''[[101 Dalmatians]]'' concerns all the [[Dalmatian (dog)|dalmatians]]' safety (''problem only if a parenthesis after apostrophe).
: The film ''[[101 Dalmatians]]'' concerns all the [[Dalmatian (dog)|dalmatians]]' (there are 100+1 dogs) safety.
|-
|Wrapping of end-apostrophe plus &160:
: The film ''[[101 Dalmatians]]'' concerns all the [[Dalmatian (dog)|dalmatians]]'&#160; (there are 100+1 dogs) safety.
|}
Besides using "&amp;#160;" other characters, such as comma, semicolon or slash, could be appended after the end-quotemark, if they fit the meaning. There might be other situations of forced wrapping in Wikipedia text.

==Setting small font-size of lesser text==
Lesser text can be reduced to a smaller ''[[font size]]'', such as by using a span-tag:
:: &lt;span style="font-size:87%">German: ''Der Lange-Annoying-Name-der-Dinge''&lt;/span>
That font-size will shrink the text somewhat: <span style="font-size:87%">German: ''Der Lange-Annoying-Name-der-Dinge''</span>. A highly irritating problem can be the placement of too much foreign (or off-topic text) in the intro section. Much tangent-level wording should be moved to lower sections. However, the use of a reduced font-size can help minimize the glaring impact of off-topic text. Sizes such as 95% or 92% retain the original font shape; however, sizes of 87% or 82% might be needed. To reduce a larger section of text, consider using the paired &lt;div>...&lt;/div> tags (instead of "&lt;span>...&lt;/span>").

The default small text-size, with almost no shape, is selected by &lt;small>aa bb cc xx yy zz&lt;/small>, which appears as: <small>aa bb cc xx yy zz</small>. Using &lt;font face=Georgia>, to switch from default [[Arial font]] to <font face=Georgia>[[Georgia font]], the small text will appear as: <small>small Georgia-font a b c x y z</small></font>.

==Reducing line-height when wrapping small text==
A very common problem, when using a smaller font, is the gapping caused by large [[interline spacing]] between the lines. A better [[line height|line-height]] (for small-font notes) is: 1.3[[em]], such as by:
:: &lt;span style="font-size:87%; '''''line-height:''''' 1.3em;">xxx&lt;/span>
Such small lines could be used in a lengthy image caption, where the typical caption size would take too much space, for the amount of detailed caption being displayed. Of course, once again, a full solution often involves removing some excess text (from the image-caption) to a lower spot on the page, and then referring to the image, such as "(''see image at right'')" from that text.

The colon-indent prefix ":" which indents lines (by about 7 spaces) also triggers a smaller line-height, so any indented wrapped-text will appear closer to the upper-text on the indented line.

==Reducing line-height in a quote-box==
Another use of reduced line-height might be for an indented quote-box, where the smaller line-height might help in emphasizing the quote as being a special text section. For example, using:
:: &lt;span style="font-size:92%; '''''line-height:''''' 1.33em;">xxx&lt;/span>
Then enclose the text of a quote, such as the following:
::: <span style="font-size:92%; line-height: 1.33em;">For Science is a natural whole, the parts of which<br>mutually support one another in a way which,<br>to be sure, no one can anticipate.<br>{{in5|32}}&mdash;[[Albert Einstein]], ''[[Out of My Later Years]]''</span>
Sometimes, the setting must be precise, where 1.30em would be too close, or 1.35 would separate lines too much, while 1.33em provides an even balance, for the particular lines in the quotation. Because the line-height is reduced, the effect of the quotation is different than merely indenting the text. Note how the line for author "Einstein" has been indented, far to the right: the new indenter template {{tl2|in5|32}} was used to indent across 32 spaces further than the quoted lines: &#123;{in5|32}}&amp;mdash;Albert...

==Expanding line-height for song lyrics or poems==
The opposite technique, of ''increased'' line-height, might be used for some indented [[song lyrics]] (or [[poetry]]), where the larger line-height could help in emphasizing the "double-spaced" appearance of a text section. For example, using:
:: &lt;span style="font-size:92%; '''''line-height:''''' 2.1em;">xxx&lt;/span>
Then enclose the song lyrics as "xxx", with line-breaks &lt;br>, as follows:
:::: <span style="font-size:92%; line-height: 2.1em;">I hear Jerusalem, bells are ringing,<br>Roman cavalry, choirs are singing,{{in5|15}}<code>&lt;</code>--(cavalry are horse-soldiers)<br>"Be my mirror, my sword and shield,<br>My missionairies in a foreign field",<br>For some reason....{{in5|10}}&mdash;[[Coldplay]], ''"[[Viva la Vida]]"''</span> <sup>[a]</sup>
Because the line-height is increased, the effect of the quoted text appears similar to having used double-spaced lines in the text. The extra spacing also helps for annotations, such as noting, in the chorus (for the 2008 song "[[Viva la Vida]]") how "Roman cavalry" refers to horse-soldiers, while the "choirs are singing" the lines "Be my mirror" (etc.). The length of each line is chosen to reflect the cadence or rhythm of the music, where the singer could take a breath at the end of each line. (Only part of the lyrics are listed, to keep them short, per copyright laws limiting to 10%, or prohibiting the display of an entire performable unit, of a song).

The exact coding of the song lyrics could be a single line, as follows:
: <nowiki>:::: <span style="font-size:92%; line-height: 2.1em;">I hear Jerusalem, bells are ringing, <br>Roman cavalry, choirs are singing,{{in5|15}}<code>&amp;lt;</code>--(cavalry are horse-soldiers) <br>"Be my mirror, my sword and shield,<br>My missionairies in a foreign field",<br>For some reason....{{in5|10}}&mdash;[[Coldplay]], ''"[[Viva la Vida]]"''</span> <sup>[a]</sup></nowiki>
For coding on multiple lines, use "&lt;div>" rather than "&lt;span>" tags.

==Word-joining to avoid one-word-per-line==
Words can be joined by "&amp;nbsp;" or {{tl2|nowrap|xxx xxx}} to force them to appear together, on one line. Sometimes text, next to a wide image-box or wide [[WP:infobox|infobox]], tends to get squeezed into a narrow column of text. A very narrow column can cause text-wrapping as, sometimes, one-word-per-line, all the way down the entire column. By word-joining the first few words of a phrase (such as "<font color="#666666">'''At'''&amp;nbsp;'''the'''&amp;nbsp;'''outset'''</font>"&nbsp; or&nbsp; "<font color="#666666">'''The'''&amp;nbsp;'''region'''&amp;nbsp;'''covers'''</font>"), the text can be forced down the page, into a wider column, where all the joined-words can fit side-by-side, across the line.  Then, even when the page is viewed in larger browser Text-Size settings, the joined text will float down to columns where the typesetting looks more logical, rather than the default, of one-word-per-line, in a narrow column.

==Bold but not too bold==
Bold-faced text can be softened, or thinned, by using <font color="#777777">'''dark-gray'''</font>, rather than typical black, as the text font-color. For example:
::<nowiki><font color="#666666">'''One''' and '''Two''' and '''Three'''</font></nowiki>
The dark-gray color (#666666) will appear as:
<font color="#666666">'''One''' and '''Two''' and '''Three'''</font>". Compare the bolded text of One/Two, against the stark contrast, of the shortcut title of this essay page: '''WP:TYPESET'''.

In Wikipedia, the use of bold-faced text is used, primarily, to highlight words that are titles, or redirected terms, that name each article. Such bold-faced text could be confusing when not connected to the article title, so the use of a lighter bolded text allows for highlighting, with less confusion about the article-title words.

Also, other, lively colors could be bolded without much confusion with the article-title words (''see color choices in:'' [[Web colors]]).

==Auto-indenting of text==
Text can be auto-indented, depending on screen width, using ":" followed by "&amp;nbsp;" as follows:
<pre>
: &amp;nbsp; {{nowrap|"There is no substitute for knowledge". -Deming}}
</pre>
The indented line will indent less, on a narrow screen, because the non-breaking spaces will be on an upper line, and the text will shift to the next line. The result will appear as:
: &nbsp; &nbsp; {{nowrap|"There is no substitute for knowledge". -[[W. Edwards Deming|Deming]]}}

The reason for auto-indenting: sometimes, text needs to be indented on wide screens but not indented, as much, on narrow windows because it would not fit across the line, if fully indented on a narrow window. This is typically the case for a long math equation or formula, such as the following:
<pre>
: &amp;nbsp; &amp;nbsp; <math>I_D= \mu_n C_{ox}\frac{W}{L} \left(
&nbsp; &nbsp; &nbsp; &nbsp; (V_{GS}-V_{th})V_{DS}-\frac{V_{DS}^2}{2} \right)</math>
</pre>
The generated formula will appear as:
:&nbsp; &nbsp; <math>I_D= \mu_n C_{ox}\frac{W}{L} \left( (V_{GS}-V_{th})V_{DS}-\frac{V_{DS}^2}{2} \right)</math>
On a very-narrow window, then the formula would auto-indent with less left-side spacing.

Such use of auto-indented text is, typically, rare, but can avoid large text-gaps where the page would become half-blank on a narrow window. Otherwise, many long equations (especially, near images or [[WP:infobox|infoboxes]]) would be shifted down a page, causing a wide text-gap to appear, because they would be too long to fit when fully indented.

==Changing font faces==
The [[MediaWiki]] markup language supports many HTML tags, including "&lt;font face=Garamond>" and such. Some of the fonts are:
* Garamond: <font face=Garamond>This is [[Garamond|Garamond font]].</font>
* Georgia: &nbsp; &nbsp; <font face=Georgia>This is [[Georgia font]].</font>
* Courier: &nbsp; &nbsp; <font face=Courier>This is [[Courier (typeface)|Courier font]].</font>
* Helvetica: &nbsp; <font face=Helvetica>This is [[Helvetica|Helvetica font]].</font>
* Times Roman: <font face=Times Roman>This is [[Times Roman font]].</font>
* Arial: &nbsp; &nbsp; &nbsp; <font face=Arial>This is [[Arial font]] (default).</font>

==Using commas & repetition for clarity==
Adding commas, and repeating key-phrases, can clarify many long, complex sentences. Consider the following text:
: In Japan along dark side streets small vending machines are used to sell food and drinks where in many American cities such machines would be enclosed in steel-reinforced cages.
The above text tends to run together, with the result of seeming to be too long for a proper sentence. However, consider the addition of some commas, and also, repeating some words:
: In Japan, along dark side-streets, small vending machines are used to sell food and drinks, whereas in many American cities, such machines would be enclosed in steel-reinforced cages, if on dark side-streets.
The commas clearly separate the long sentence into specific phrases. The subject of "vending machines on dark side-streets" is clarified, at the end, by repeating "on dark side-streets" which readers might have forgotten, since that was the 2nd phrase in the long sentence. By using the trick of adding commas and repeating key-phrases, many long sentences can appear clarified, without extensive re-writing. The commas act, almost like magic, to simplify a long sentence, without the need to drastically cut and reword the text to be easier to read. The term "whereas" was used to be more specific than the word "where" (other similar precise terms, used to help clarify, include ''"instead"'' or ''"rather than"'' ). Often, it is not necessary to re-write technical articles for better clarity; instead, just add several commas and see if an article can be easily clarified, within minutes, rather than spend hours re-writing, or splitting, the technical descriptions.

==Undenting/bracketing of text==
Real typesetting software, for over 30 years, typically has had simple directives to trigger alignments as left, right, center, or ''undented'' (beyond the left-margin line). However, for decades, HTML has had only limited options for easy alignment (one: &lt;center>). A method for undenting the first word of a paragraph is to put the paragraph into a text-table, where the first word (or syllable) is (alone) in column 1, while the other text is in column 2. For example, undenting "Beethoven":
: Wikicode: <nowiki> :::<table cellspacing=0 cellpadding=0><tr><td valign=top>Bee<td>thoven</nowiki><br>{{in5|16}}<nowiki>composed [[Moonlight Sonata]]<br>while he was losing his hearing.</table></nowiki>
: Results:
:::<table cellspacing=0 cellpadding=0><tr><td valign=top>Bee<td>thoven composed [[Moonlight Sonata]]<br>while he was losing his hearing.</table>

Note the use of both "cellspacing=0 cellpadding=0" so as to not separate the spacing between the first syllable "Bee" and "thoven".

A third column can be used to enclose text in outside brackets, then putting the closing-bracket "]" in column 3, as follows:

: Wikicode: <nowiki> :::<table><tr><td valign=top>[<td>This is line 1.<br>Line 2.<td>]</table></nowiki>
: Results:
::: <table><tr><td valign=top>[<td>This is line 1.<br>Line 2.<td valign=bottom>]</table>

Again, the designers of the [[HTML]] language had only limited knowledge of typesetting (thus they invented: font size=1 to 5!), so the only alignment directive was "&lt;center>". However, the currently invalid options "&lt;left>" and "&lt;right>" could be added someday, as a trivial implementation, because to handle "center" then the left/right margins must already be known to the computer. The pitfalls of HTML, developed with little knowledge of typesetting (or even of computer languages), are typical when amateurs (or [[college dropout]]s) try to create a new technology. Note that there are some examples of the opposite effect: such as an opera singer ([[Luciano Pavarotti]]) learning to sing well without being able to read music. However, in general, most attempts by hacks are botched failures. It is important to seek the knowledge of experts, but hacks might not even understand the basics that experts know, so some humility is needed in such discussions.

==Related pages==
{|
|
* [[WP:Advanced article editing]]
* [[WP:Advanced footnote formatting]]
* [[WP:Advanced table formatting]]
* [[WP:Alert]]
* [[WP:Thinking outside the infobox]]
|width="30px"|&nbsp;<!--spacer-->
| valign=top |
* [[WP:Pruning article revisions]]
* [[WP:Overlink crisis]]
* [[WP:Authors of Wikipedia]]
* [[WP:Avoiding difficult users]]
|}
==Notes==
<div style="font-size:87%; line-height: 1.33em;">
:<sup>[a]</sup> - Only part of the lyrics are listed, to keep them short, per copyright laws limiting display to 10%, or prohibiting the display of an entire performable unit, of a composition.

</div>
::::[ ''This essay is a draft to be expanded, later...'' ]

[[Category:Wikipedia essays|Advanced text formatting]]