View source for Help:Advanced text formatting

{{essay|WP:TYPESET|H:ATF}}
{{ombox
| text      = '''Not suitable for articles''': The text formatting described in this help page may not be suitable for articles and may cause accessibility issues.
|type=content |image=[[File:OOjs UI icon notice-warning.svg|40px|alt=|link=]]}}

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 defective: fix immediately"''. Most of those tag-box templates allow&nbsp;a parameter "|section" when lowering the tag-box further down the page. For example: {{tlx|RefImprove|section|date{{=}}{{CURRENTMONTHNAME}} {{CURRENTYEAR}}}}. Moving a distracting tag-box can vastly improve the readability for readers, who might otherwise become alarmed and distracted by a 2-year-old gripe box someone threw on the page, unopposed, years ago, giving the impression that the tag-box must be read to avoid critically dangerous information in an article.

==Setting wrap-indent by tag <nowiki>{{wbr}}</nowiki>==
The template {{tl|wbr}} can be used to wrap before non-breaking spaces, as <code>{{tnull|wbr}}&amp;nbsp;</code> at the wrap position, which allows the wrapped portion to be indented by a non-breaking space. See table:
{| class=wikitable width=330px
! scope="col" | Text 
! scope="col" style="max-width:5em;" | Typical wrapping
! scope="col" style="max-width:5em;" | With{{wbr}}{{nbsp}}<nowiki>{{wbr}}</nowiki>
|-
| Rhianna&nbsp;Lea&nbsp;Doe || Rhianna Lea Doe || Rhianna{{wbr}}{{nbsp|2}}Lea Doe
|-
| 486 plus 6 at-large || 486 plus&nbsp; 6 at-large || 486 plus{{wbr}}{{nbsp|2}}6&nbsp;at-large
|-
| Advanced{{nbsp|2}}typesetting || Advanced typesetting || Advanced{{wbr}}{{nbsp|2}}typesetting
|}
More indentation can be set by additional non-breaking spaces; this is made easier (and arguably more readable) with the {{tl|nbsp}} template, using the 2nd parameter to specify how many {{mono|&amp;nbsp;}} characters to insert: <code><nowiki>Rhianna{{wbr}}{{spaces|2}}Lea</nowiki></code>. However, the extra space might seem excessive between some words (unless all nearby spaces are doubled). The width to trigger a wrap-indent depends on the user's browser TextSize zoom level, where larger levels trigger the wrapping more often, and a single space indents more at higher zoom. This type of space-adjusting by inserting individual extra space characters is not generally recommended while editing Wikipedia articles.

This technique has been previously suggested for use to wrap and indent text within infobox lists (where a non-indented wrapped line might be misinterpreted as 2 entries, rather than as a long entry which has wrapped onto the next line), this is not an appropriate technique. Instead, use the {{tlf|indented plainlist}} template, which creates semantically-correct HTML lists and uses CSS to control the indentation of list items:

{| class=wikitable
|+ Example use of {{tnull|indented plainlist}}
|-
! scope="col" | Wikitext
! scope="col" style="max-width:4em;" | Output
|-
| <syntaxhighlight lang="wikitext">{{indented plainlist|
* A long list item that will likely wrap
* Another list item that will also wrap
* A short list item
* And finally another long list item
}}
</syntaxhighlight>
| style="max-width:10em;" | {{indented plainlist|
* A long list item that will likely wrap
* Another list item that will also wrap
* A short list item
* And finally another long list item
}}
|}

The {{tag|wbr|s}} HTML tag also works with older browsers, but not in [[Internet Explorer]] since version 7. The {{tnull|wbr}} template relies on the combination of the {{tag|wbr|s}} HTML tag and the {{Unichar|200B|ZERO WIDTH SPACE}} character (which is compatible with IE prior to version 7). See {{slink|Template:wbr|Technical details}} for more details.

==Avoiding wrap of end-quote or apostrophe==
One of the most troublesome typesetting glitches is the wrapping of the last word in a quotation onto a second line, when followed by 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 methods to allow the end-word to stay on the same line, without wrapping. Perhaps the most common fix is to append the blank-code <code>&amp;#160;</code> (or even a comma) after the end 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 <code>&amp;#160;</code> (after the quotemark: <code>... dogs"&amp;#160;</code>). 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–2009, 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 (1996 film)|101 Dalmatians]]'' concerns all the [[Dalmatian (dog)|dalmatians]]' safety (problem only if a parenthesis after apostrophe).
: The film ''[[101 Dalmatians (1996 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 (1996 film)|101 Dalmatians]]'' concerns all the [[Dalmatian (dog)|dalmatians]]'&#160; (there are 100+1 dogs) safety.
|}
Besides using <code>&amp;#160;</code> 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:
:: {{code|2=wikitext|1=<span style="font-size:88%">German: ''Der Lange-Annoying-Name-der-Dinge''</span>}}
That font-size will shrink the text somewhat: <span style="font-size:88%">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 88% or 85% might be needed. To reduce a larger section of text, consider using the paired {{tag|div}} tags (instead of {{tag|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 <code>&lt;span style="font-family:Georgia;"></code>, to switch from default [[Arial font]] to <code>&lt;span style="font-family:Georgia;"></code> ([[Georgia font]]), the small text will appear as: <small>small Georgia-font a b c x y z</small>.

=== Guidelines ===

Editors should avoid manually inserting large and small [[Wikipedia:Manual of Style/Text formatting#Font size|font sizes]] into [[prose]]. Increased and decreased font size should primarily be produced through automated facilities such as [[Wikipedia:Manual of Style#Section headings|headings]] or through carefully designed [[Help:Template|templates]]. Below is one list of [[Help:Fonts|font]] sizing templates that have been tested and are available if needed:

{{font size templates}}

Example: {{tlx|big|Will make the text here larger}} renders as: {{big|Will make the text here larger}}

To put this chart on your User page for reference use: {{tlx|font size templates}}

Read more: '''[[Wikipedia:Manual of Style/Text formatting#Font size]].'''
{{clear}}

==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: <code>1.3[[Em (typography)|em]]</code>, such as by:
:: <code>&lt;span style="font-size:88%; '''''line-height:''''' 1.3em;">xxx&lt;/span></code>
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 {{tlx|crossref|(see image)}} from that text.

==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:
:: <code>&lt;span style="font-size:92%; '''''line-height:''''' 1.31em;">xxx&lt;/span></code>
Then enclose the text of a quote, such as the following:
::: <span style="font-size:92%; line-height: 1.31em;">For scientific endeavor is a natural whole, the parts<br />of which mutually support one another in a way which,<br />to be sure, no one can anticipate.<br/>{{in5|32}}–&nbsp;[[Albert Einstein]], ''Out of My Later Years''</span>
Sometimes, the setting must be precise, where <code>1.20em</code> would be too close, or <code>1.35em</code> would separate lines too much, while <code>1.31em</code> 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 {{tlx|in5|32}} was used to indent across 32 spaces further than the quoted lines: <code>{{tlf|in5|32}}–&amp;nbsp;Albert ...</code>.

==Line height of text==
The line-height of text, in CSS, sets the height of text's line box.<ref>{{cite web |title=line-height - CSS: Cascading Style Sheets {{!}} MDN |url=https://developer.mozilla.org/en-US/docs/Web/CSS/line-height |website=[[Mozilla Developer Network]] |access-date=1 January 2022}}</ref> On the default desktop skin (Vector) it is set at 1.6 (times the font size) by default for readability.

=== Examples ===

'''This block of text has line-height 1:'''

<blockquote>
<p style="line-height:100%; width:30em;">''Typography'' (Greek: ''typos'' "form", ''graphein'' "to write") is the art and technique of setting written subject matter in type using a combination of typeface styles, point sizes, line lengths, line leading, character spacing, and word spacing to produce typeset artwork in physical or digital form.</p></blockquote>

'''The same block of text set with line-height 1.5 is easier to read:'''

<blockquote>
<p style="line-height:150%; width:30em;">''Typography'' (Greek: ''typos'' "form", ''graphein'' "to write") is the art and technique of setting written subject matter in type using a combination of typeface styles, point sizes, line lengths, line leading, character spacing, and word spacing to produce typeset artwork in physical or digital form.</p></blockquote>

'''The same block of text with line-height 2 is again easier to read, but makes less efficient use of vertical page space:'''

<blockquote>
<p style="line-height:200%; width:30em;">''Typography'' (Greek: ''typos'' "form", ''graphein'' "to write") is the art and technique of setting written subject matter in type using a combination of typeface styles, point sizes, line lengths, line leading, character spacing, and word spacing to produce typeset artwork in physical or digital form.</p></blockquote>

==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;div style="font-size:92%; '''''line-height:''''' 2.1em;">xxx&lt;/div>

Then enclose the song lyrics as "xxx", wrapped with {{tag|poem}}, which preserves line-breaking, as follows:
{{block indent|1=<poem style="font-size:92%; line-height: 2.1em;">"I hear Jerusalem, bells are ringing,
Roman cavalry, choirs are singing,
"Be my mirror, my sword and shield,
My missionairies in a foreign field",
For some reason....</poem>
{{in5|10}}&mdash;[[Coldplay]], "[[Viva la Vida]]"{{refn|group=Note|name=copyright}}}}

This is coded as:

{{block indent|1=<syntaxhighlight lang="wikitext"><poem style="font-size:92%; line-height: 2.1em;">I hear Jerusalem, bells are ringing,
Roman cavalry, choirs are singing,
"Be my mirror, my sword and shield,
My missionairies in a foreign field",
For some reason....</poem>
{{in5|10}}—&nbsp;[[Coldplay]], "[[Viva la Vida]]"<ref>...</ref></syntaxhighlight>}}

In either case, because the line-height is increased, the effect of the quoted text appears similar to having used double-spaced lines in the text.  (The lyrics are truncated, to keep them short, per copyright restrictions limiting to 10%, or prohibiting the display of an entire performable unit, of a composition).

These examples are shown indented here, to set them off from the explanatory text, but would not be in the actual article. If this effect were desired, it could be done like this, using the {{tlx|quote}} template:

{{block indent|1=<syntaxhighlight lang="wikitext">{{quote
|text=<poem style="font-size:92%; line-height: 2.1em;">I hear Jerusalem, bells are ringing,
Roman cavalry, choirs are singing,
"Be my mirror, my sword and shield,
My missionairies in a foreign field",
For some reason....</poem>
|author=[[Coldplay]]
|source="[[Viva la Vida]]"<ref>...</ref>}}</syntaxhighlight>
}}

Which renders as:

{{quote
|text=<poem style="font-size:92%; line-height: 2.1em;">I hear Jerusalem, bells are ringing,
Roman cavalry, choirs are singing,
"Be my mirror, my sword and shield,
My missionairies in a foreign field",
For some reason....</poem>
|author=[[Coldplay]]
|source="[[Viva la Vida]]"{{refn|group=Note|name=copyright}}
}}

==Word-joining to avoid one-word-per-line==
Words can be joined by <code>&amp;nbsp;</code> or {{tlx|nowrap|xx xx}} to force the words 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. In such cases, by word-joining the first few words of a phrase (such as <code>At&amp;nbsp;the&amp;nbsp;outset</code> or <code>The&amp;nbsp;region&amp;nbsp;covers</code>), 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. This obviously should only be done with a few words, not long strings of text, or undesirable (and, browser-by-browser, unpredictable) display results will occur.

==Bold but not too bold==
Bold-faced text can be softened, or visually thinned, by using <span style="color: #666666;">'''dark gray text'''</span>, rather than typical black, as the text font-color. For example:
{{block indent|1=<syntaxhighlight lang="wikitext" inline><span style="color: #666666;">'''One''' and '''Two''' and '''Three'''</span></syntaxhighlight>}}
The dark-gray color (<code>#666666</code>) will appear as:
{{block indent|1=<span style="color:#666666;">'''One'''</span> and <span style="color:#666666;">'''Two'''</span> and <span style="color:#555555;">'''Three'''</span>}}
Compare the bolded text of "One", "Two" and "Three" against the starker contrast of the default boldfacing results:
{{block indent|1='''One''' and '''Two''' and '''Three'''}}

In Wikipedia, bold-faced text is used, primarily, to highlight words that are:
* the title of the article, repeated in the lead;
* alternative names of the article's or section's topic, that [[WP:Redirect|redirect]] to this location;
* section headings;
* table headers;
* [[MOS:GLOSSARY|terms in glossaries]];
* and a few other special uses.
Bold-faced text could be confusing when used in other ways, so the use of a lighter bolded text allows for this style of highlighting, with less ambiguity.

Also, other, lively colors could be bolded without much confusion with the article-title words {{crossref|(see color choices in: [[Web colors]]). Also see topic below: {{section link||Changing font color or span style=color}})}}.

==Adjusting spaces for kerning between letters==
Typically, when using ''italic text'', the spacing after an italic word often will seem too narrow (as a [[kerning]] problem), and hence a small amount of extra space could be added after the italic text as <code>&amp;thinsp;</code> to insert a so-called "[[thin space]]", or for small text, a <code>&amp;#8202;</code> "[[Whitespace characters|hair space]]" (a normal-width space is too large for this purpose). In many cases, the wording could be phrased so that a comma, or period ([[full stop]]) or right [[parenthesis]] (curved bracket) follows the italic text, which would also act to widen the spacing at the end of the italic text. Some examples:
{{block indent|1=<nowiki />
* The book ''[[To Kill a Mockingbird]]''&thinsp; by [[Harper Lee]] &nbsp; &larr; title followed by <code>&amp;thinsp;</code> then a regular space
* The overture [[Romeo and Juliet (Tchaikovsky)|''Romeo and Juliet'']], by Tchaikovsky &nbsp; &larr; title followed by comma: <code>,</code> then a regular space
* The city of Munich (German: ''Muenchen'') in Bavaria  &nbsp; &larr; followed by parenthesis: <code>)</code> then a regular space
* In [[particle physics]], {{var|J}}&#8202;<sup>{{var|p}}</sup>&thinsp; denotes &nbsp; &larr; a <code>&amp;#8202;</code> hair space between {{tlx|var|J}} and small [[superscript]]ed <code><nowiki><sup>{{var|p}}</sup></nowiki></code>, in turn followed by <code>&amp;thinsp;</code> then a regular space
}}
Perhaps the most common adjustment would be to insert <code>&amp;thinsp;</code> after italic text which ends with a tall letter (such as:&nbsp;''h'', ''l'', ''t'', or any capital, e.g. ''W''). However, by planned phrasing, instead, a comma could be added after italic words to widen the visual spacing after the italicized part.

==Changing font faces==
{{see also|Wikipedia:Typography}}
The [[MediaWiki]] markup language supports many HTML tags, including <code>&lt;span style="font-family:Garamond;"></code> and such. Some of the fonts are:
:* Arial: &nbsp; &nbsp; &nbsp; <span style="font-family:Arial;">This is [[Arial font]] (default).</span>
:* Courier: &nbsp; &nbsp; <span style="font-family:Courier;">This is [[Courier (typeface)|Courier font]].</span>
:* Garamond: <span style="font-family:Garamond;">This is [[Garamond|Garamond font]].</span>
:* Georgia: &nbsp; &nbsp; <span style="font-family:Georgia;">This is [[Georgia font]].</span>
:* Helvetica: &nbsp; <span style="font-family:Helvetica;">This is [[Helvetica|Helvetica font]].</span>
:* Linux Libertine: &nbsp; <span style="font-family:Linux Libertine;">This is [[Linux Libertine]].</span>
:* Noto: &nbsp; <span style="font-family:Noto Sans;">This is [[Noto fonts|Noto Sans]].</span>
:* Times New Roman: <span style="font-family:Times New Roman;">This is [[Times New Roman font]].</span>

==Changing font color or span style=color==
{{seealso|Help:Using colours}}
The [[MediaWiki]] markup language supports HTML-style color tags, to change the color of text, such as "&lt;span style="color:gray;">xx&lt;/span>". Templates like {{tl|color}} also exist to change text color.

To change text colors, some colors are (or see all: [[Web colors]]):
:* Darkgreen: <span style="color:darkgreen">This is "darkgreen" font color.</span>
:* Darkred & crimson: <span style="color:darkred">This is "darkred" font color </span><span style="color:crimson"> and "crimson" here.</span>
:* Blue: <span style="color:blue">This is "blue" font color </span><span style="color:darkblue">and "darkblue" here.</span>
:* Darkorange: <span style="color:darkorange">This is darkorange font color.</span>
:* Chocolate & SaddleBrown: <span style="color:chocolate">This is "chocolate" font color </span><span style="color:SaddleBrown">and "SaddleBrown" here.</span>
:* Gray: <span style="color:gray">This is "gray" font color </span><span style="color:darkgray">and "darkgray" here.</span>
:* #515151: <span style="color:#515151;">Using &lt;span style="color:#515151;"> here.</span>
The default color is black (or hex-code #000000). When changing the text color, care must be taken to put the "/" in the end tag, such as "&lt;/span>" to reset text color afterward. For an extensive list of hundreds of screen colors, see: [[Web colors]].

==Undenting/bracketing of text==
Real typesetting software 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: {{tag|center|o}}). 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":
{{markupv|
|m=
<syntaxhighlight lang="wikitext" inline>

<table cellspacing=0 cellpadding=0><tr><td valign=top>Bee<td>thoven
{{in5|16}}composed [[Moonlight Sonata]]
while he was losing his hearing.</table>
</syntaxhighlight>
|r=
<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:
{{markupv|
|m=
<syntaxhighlight lang="wikitext" inline><table><tr><td valign=top>[<td>This is line 1.<br />Line 2.<td>]</table></syntaxhighlight>
|r=
<table><tr><td valign=top>[<td>This is line 1.<br />Line 2.<td valign=bottom>]</table>
}}
The original design of the [[HTML]] language included presentational markup, such as the {{tag|center|o}} tag. However, this type of presentational markup tags has been [[Deprecation|deprecated]] in current HTML and [[XHTML]] recommendations and is illegal in HTML5. Cascading Style Sheets (CSS) have been encouraged by the [[World Wide Web Consortium]] (W3C) for presentational markup and other styling.

==See also==
* [[WP:Advanced article editing]]
* [[WP:Advanced footnote formatting]]
* [[WP:Advanced table formatting]]

== Notes ==
{{Reflist|group="Note"|refs=
{{refn|group=Note|name=copyright|The lyrics are truncated, to keep them short, per copyright restrictions limiting display to 10%, or prohibiting the display of an entire performable unit, of a composition.}}
}}
{{reflist}}

{{Essays on building Wikipedia}}

[[Category:Wikipedia essays|Advanced text formatting]]
[[Category:Wikipedia essays about article formatting]]
[[Category:Wikipedia how-to essays|Advanced text formatting]]