Styled Text Formatting

From Exterior Memory
Jump to: navigation, search

There are many ways to style plain text. Current mechanisms include text-to-html in Wikis, blogs, and forums. Before that, setext and e-mail also had conventions for text styling. The quote character (>) in e-mail replies is one of those conventions. Markdown is clear spin-off from those attempts.

The list includes Markup languages HTML, BB code, MarkDown, reStructuredText, Trac, MediaWiki, DokuWiki, LaTeX, and ConTeXt. For the interested few, you may also want to look at DocBook, CSS, WakkaWiki, Setext, atx, Textile, Grutatext, and EtText. Wikipedia's List of Lightweight markup language also gives a short comparison.

Obviously, the purpose of these markup languages differs. While CSS and BB Code focus on the font layout, other language such as DocBook, MarkDown and XMHTML focus mostly on the text structure. Unfortunately, only few languages have such a clear distinction between structure and layout, and we see lots of markup languages that mix this up, such as LaTeX and HTML (despite their false promises to distinguish between the two).

Layout Features

Font Style and Weight

Bold Italic Underline Strikethrough
HTML <strong>Bold</strong>
or <b>Bold</b>
<em>Italic</em>
or <i>Italic</i>
<u>Underline</u>
(or unofficial <ins>Underline</ins>)
<strike>Strikethrough</strike>
or <s>Strikethrough</s>
(or unofficial <del>Strikethrough</del>)
BB code [b]Bold[/b] [i]Italic[/i] [u]Underline[/u] N/A
MarkDown **Bold**
or __Bold__
_Italic_
or *Italic*
N/A N/A
reStructuredText **Bold** *Italic* N/A N/A
Trac '''Bold'''
or **Bold**
''Italic''
or //Italic//
__Underline__ --Strikethrough--
MediaWiki '''Bold''' ''Italic'' <u>Underline</u> <del>Strikethrough</del>
DokuWiki **Bold** //Italic// __Underline__ <del>Strikethrough</del>
WakkaWiki **Bold** //Italic// __Underline__ ++Strikethrough++
LaTeX \textbf{Bold}
or {\bf Bold}
\emph{Italic}
or \textit{Italic}
or {\em Italic}
\underline{Underline} \usepackage{soul}
\st{Strikethrough}
ConTeXt {\bf Bold} {\em Italic} \underbar{Underline} (can not be combined with italic) \overstrike{Strikethrough}
CSS font-weight: bold font-style: italic text-decoration: underline text-decoration: line-through

Typesetting

Monospaced Superscript Subscript Coloured
HTML <tt>Monospaced</tt>
or <code>Code</code>
<sup>Superscript</sup> <sub>Subscript</sub> <span style="color:red">Coloured</span>
or <font color="red">Coloured</font> (deprecated)
BB code N/A N/A N/A [color=red]Coloured[/color]
MarkDown `Code` (for code) N/A N/A N/A
reStructuredText ``Monospaced`` N/A N/A N/A
Trac {{{Monospaced}}}
or `Monospaced`
^superscript^ ,,subscript,, [[span(style=color:red, Coloured )]]
MediaWiki <tt>Monospaced</tt> <sup>Superscript</sup> <sub>Subscript</sub> <span style="color:red">Coloured</span>
DokuWiki ''Monospaced'' <sup>Superscript</sup> <sub>Subscript</sub> N/A
WakkaWiki ##Monospaced##
or #%Key#% (to signify a key press)
- - {{color c="red" text="Coloured"}}
or Highlight (for one specific highlight color)
LaTeX \texttt{Monospaced} ^{Superscript} _{Subscript} \usepackage{color}
{\color{red} Coloured}
ConTeXt {\tt Monospaced} ^{Superscript} _{Subscript} \setupcolors[state=start]
\color[red]{Coloured}
CSS font-family:monospace N/A N/A text-color: red


The tables above do not contain font size changes, centered text and lesser used features such as slanted (oblique), overbar (the opposite of underline), small capitals, etc. For these features, consult the documentation of each markup language.

Text Structure Features

Headers

Main Title
Section Heading
Subsection
HTML <h1>Main Title</h1> <h2>Section Heading</h2> <h3>Subsection</h3>
BB code N/A N/A N/A
MarkDown Main Title
==========

or # Main Title
Section Heading
==============

or ## Section Heading
### Subsection
reStructuredText ==========
Main Title
==========
Section Heading
---------------
Subsection
----------
Trac == Main Title == === Section Heading === ==== Subsection ====
MediaWiki == Main Title == === Section Heading === ==== Subsection ====
DokuWiki ====== Main Title ====== ===== Section Heading ===== ==== Subsection ====
WakkaWiki ====== Main Title ====== ===== Section Heading ===== ==== Subsection ====
LaTeX \chapter{Main Title} \section{Section Heading} \subsection{Subsection}
ConTeXt \chapter{Main Title} \section{Section Heading} \subsection{Subsection}

Lists

  • Unordered List
  • Unordered List
  1. Ordered List
  2. Ordered List
Term
      Definition List
HTML <ul>
  <li>Unordered List</li>
</ul>
<ol>
  <li>Ordered List</li>
</ol>
<dl>
  <dt>Term</dt>
  <dd>Definition List</dd>
</dl>
BB code [list]
[*]Unordered List
[/list]
[list=1]
[*]Ordered List
[/list]
N/A
MarkDown * Unordered List
or + Unordered List
or - Unordered List
1. Ordered List N/A
reStructuredText * Unordered List
or + Unordered List
or - Unordered List
1. Ordered List Term
⎵⎵⎵⎵Definition List
Trac * Unordered List 1. Ordered List term:: Definition List
MediaWiki * Unordered List # Ordered List ; Term : Definition List
DokuWiki ⎵⎵* Unordered List ⎵⎵- Ordered List N/A (available with plugin)
WakkaWiki ⎵⎵⎵⎵- Unordered List
or ~- Unordered List
⎵⎵⎵⎵1) Ordered List
or ~1) Ordered List
N/A
LaTeX \begin{itemize}
&nbs[; \item Ordered List
\end{itemize}
\begin{enumerate}
  \item Ordered List
\end{enumerate}
\begin{description}
  \item[Term] Description List
\end{description}
ConTeXt \startitemize
\item[1] Unordered List
\stopitemize
\startitemize[n]
\item Ordered List
\stopitemize
\startvariable{Term}
Definition List</br/>\stopvariable

Some markup languages (HTML, MarkDown) allow multiple paragraphs within a list, but most don't allow this (Mediawiki, BB code)

Text Blocks

Plain text

Indentation

Multiline
Code
HTML <blockquote>
<p>Indentation</p>
</blockquote>
<pre>Multiline
Code</pre>
BB code N/A N/A
MarkDown > Indentation ⎵⎵⎵⎵Multiline
⎵⎵⎵⎵Code
reStructuredText | Line blocks (preserves line breaks)
or ⎵⎵⎵⎵Block quote (line wrapped)
::
⎵⎵⎵⎵Literal block
Trac ⎵⎵⎵⎵Block quote {{{
Preformatted test
}}}
MediaWiki : Indentation {{{
Preformatted test
}}}
DokuWiki N/A N/A
WakkaWiki ⎵⎵⎵⎵Indented Text
or ⎵⎵⎵⎵Commented Text
%%
Multiline
Code
%%
LaTeX \begin{quote}
Indentation
\end{quote}

or \begin{quotation}
Indentation
\end{quotation}
\begin{verbatim}
Multiline
Code
\end{verbatim}
ConTeXt \startquotation
Indentation
\stopquotation
\definetyping[Lang]

\startLang Multiline Code \stopLang

For other layout elements such as horizontal lines, floats, etc. consult the documentation of the respective markup language.

Hypertext

Internal cross-reference External Link Image.png
HTML <a href="Main_Page">Internal Link</a> <a href="http://www.example.com/">External Link<a/> <img src="images/Image.png"/>
BB code N/A [url]http://www.example.com/[/url]
or [url=http://www.example.com/]External Link[/url]
[img]images/Image.png[/img]
MarkDown N/A [External Link](http://www.example.com/)
or <http://www.example.com/>
![alt text](image/image.png)
reStructuredText `phrase reference`_
or [1]_ to .. [1] Footnote/citation
http://www.example.com/ or `External Link <http://www.example.com/>`_ .. image:: images/image.png
Trac MainPage (CamelCase)
or wiki:"main page"
http://www.example.com/ [[Image(images/image.png)]]
MediaWiki [[Main Page|Internal Link]] [http://www.example.com/ External Link] [[Image:image.png]]
DokuWiki [[Main Page|Internal Link]] [[http://www.example.com/|External Link]] {{image/image.png}}
WakkaWiki MainPage
(CamelCase) or [[MainPage Internal Link]]
http://www.example.com
or [[http://www.example.com/ External Link]]
{{image url="image/image.png"}}
LaTeX Section \ref{section.2} \usepackage{hyperref}
\href{http://www.example.com/}{External Link}
\begin{figure}[ht]
\includegraphics{image}
\end{figure}
ConTeXt \goto{Internal Link}[section.2] \setupinteraction[state=start]
\useURL[example][http://www.example.com/]
\from[example]
\externalfigure[image]

Some markup language have special features to link to e-mail addresses next to web pages. Consult the documentation for each respective markup language for details.

Tables

Head 1Head 2
Field1Field2
Field3Field4
HTML <table>
<tr><th>Head 1</th><th>Head 2</th></tr>
<tr><td>Field1</td><td>Field2</td></tr>
<tr><td>Field3</td><td>Field4</td></tr>
</table>
BB code N/A
MarkDown N/A
reStructuredText +---------+---------+
| Head 1  | Head 2  |
+=========+=========+
| Field 1 | Field 2 |
+---------+---------+
| Field 3 | Field 4 |
+---------+---------+
Trac ||= Head 1 =||= Head 2 =||
|| Field 1  || Field 2  ||
|| Field 3  || Field 4  ||
MediaWiki {|
! Head 1 || Head 2
|-
| Field1 || Field2
|-
| Field3 || Field4
|}
DokuWiki ^ Head 1 ^ Head 2 ^
| Field1 | Field2 |
| Field3 | Field4 |
WakkaWiki {{table columns="2" cells="Head 1;Head2;Field1;Field2;Field3;Field4"}}
LaTeX \begin{tabular}{ll}
Head 1 & Head 2 \\
Field1 & Field2 \\
Field3 & Field4 \\
\end{tabular}
ConTeXt \starttable[ll]
\NC Head 1 \NC Head 2 \SR
\NC Field1 \NC Field2 \AR
\NC Field3 \NC Field4 \AR
\stoptable