Wikipedia:Rendering math
From Wikipedia, the free encyclopedia
For the help page, see Help:Displaying a formula. For the WikiProject, see WP: WikiProject Mathematics. For Wikipedia's mathematics style manual, see WP: Manual of Style/Mathematics.
![]() |
This page is an essay, containing the advice or opinions of one or more Wikipedia contributors. Essays are not Wikipedia policies or guidelines. Some essays represent widespread norms; others only represent minority viewpoints. |
![]() |
This page in a nutshell: There exist at least 3 different forms of math formulae on wiki pages, with at least 7 ways to present them. None is completely satisfactory. |
This essay offers a comparison of different encodings and presentation of mathematical formulae. The three principal ones are the <math>
tag, raw wiki (or HTML) code and "texhtml" templates. The <math>
and "texhtml" encoding may have different presentations for registered users, depending on user preferences and personal styles.
Contents
Comparison of markup encodings[edit]
Encoding | Advantages | Disadvantages |
---|---|---|
<math> LaTeX</math> |
Well-known and standardized. Portable to/from scientific papers. Clearly distinguishes semantics from appearance. Flexible and can handle all formulae. Easy for other software to process. |
Requires knowledge of LaTeX markup language. Lacks Unicode support (such as Cyrillic script).[1] Unable to place wikilinks on parts of formulae. |
<math> MathML</math> |
Standardized. Portable to/from scientific software. Clearly distinguishes semantics from appearance. Flexible and can handle anything. |
Obscure and hard for humans to edit. Conflicts with LaTeX syntax. Not directly available in Wikipedia. |
Raw wiki or HTML code | Built into MediaWiki. | Encodes appearance rather than its semantics. Difficult to process in software. Unable to handle square roots, vertical fractions, and other common formula types. Proper use (italic variables, protected spaces around operators) requires care and is a frequent source of mistakes. |
"texhtml" templates, such as {{math}} | Encourages standardized notation. Distinguishes semantics from appearance. More polished appearance than wiki/HTML code. Recognizable (although not easily processed) by software. |
Proliferation of templates Vulnerable to changes and edit wars. The equal (=) and pipe (|) symbols require special care (the {{=}} and {{!}} templates must be used). |
Comparison of presentations[edit]
Encoding | Presentation | Advantages | Disadvantages |
---|---|---|---|
<math> |
SVG with hidden MathML (Wikipedia’s default) |
Robust. Little overhead in a browser. Supported by screen readers. |
SVG image format that does not match article text in font size, does not usually have proper baseline alignment for inline math, and does not change color when part of a link. Copy-paste as text duplicates the formula, copy-paste as image is not supported in many programs e.g. Word. |
Native MathML | Robust and standard-compliant. Little overhead in Firefox. |
Requires special user CSS and/or plugins for full functionality like copy-paste. Only works well in Firefox. Not well-documented. | |
MathJax | Works in all browsers. Pretty fonts. |
High server load for font assets. Slow rendering.[2] No longer available as a reader preference. |
|
Raw wiki or HTML code | Avoids switching font families in running text. Minimal overhead. Appearance does not depend on user (account) preferences. |
Does not distinguish a formula from the running text. The default sans-serif may render certain characters indistinguishable, such as 1, I and l. In articles mixing raw wiki with <math> formulae, the appearance of the same variable in the two types of formula does not match (serif vs sans-serif). |
|
{{math}} ('texhtml' class) | Distinguishes a formula from the running text. Close match to the appearance of inline <math> . |
Mixing of font families (sans-serif for English, serif for math), in running text, can be jarring. Reverts to the appearance of raw wiki code on systems that don't support font changes (e.g. the Wikipedia Android app) |
|
Specific templates | |||
{{mvar}}: x | A shorthand for variables like {{math|''x''}} .Clean semantics. |
Cannot be used for vectors. (Must use {{math|'''v'''}} to get v, {{math|{{vec|''v''}}}} to get v→.) |
|
{{sqrt}}: √2 | Clean semantics. | The vinculum is slightly interrupted. Does not look well under {{math}} or so, itself. ( {{math|{{sqrt|2}}}} yields: √2.) |
|
{{radic}}: 3√2 | Clean semantics. | Same as above. ({{math|{{radic|2|3}}}} yields: 3√2.) |
|
{{sfrac}}: 1/2 | Clean semantics. | Occupies too much vertical space in a running text. Embedded sub- and superscript causes vertical misalignment. ( yadda {{math|{{sfrac|1|2}}}} yadda yields: yadda 1/2 yadda.) |
|
{{frac}}: 1⁄2 | Clean semantics. | Discouraged by WP:MOSMATH. | |
{{open-open}}: (−∞, +∞) {{open-closed}}: (−∞, 0] {{closed-open}}: [0, +∞) {{closed-closed}}: [0,1] |
Semantically distinguishes intervals from other types of formula. | Because the interval endpoints are coded as a single parameter, the semantics is a bit obscure. | |
Bra–ket notation: {{ket}} |ψ⟩ {{bra}} ⟨ψ| {{bra-ket}} ⟨ψ|ξ⟩ |
Semantically distinguishes bra–ket notation from other types of formula. Avoids complex html coding for angular bracket characters ⟨ &#amp;x27E8; or {{langle}}, ⟩ ⟩ or {{rangle}}, and vertical bar | | and prevents incorrect usage of less-than/greater-than signs for these characters. |
Angular brackets may not render on all browsers. | |
{{vec}}: A→ | Clean semantics. | The arrow is not centered over italicized letters. The arrow is too high over x-height letters. ( {{math|{{vec|''v''}}}} yields: v→.) |
|
{{intmath}}: ∫+∞ 0 |
Clean semantics. | Name differs from math/LaTeX coding conventions. | |
{{overset}}: , {{underset}}: , |
Clean semantics. | Produces bad spacing when combined with fraction templates. |
Pros of HTML[edit]
- Formulas in HTML behave more like regular text. In-line HTML formulae always align properly with the rest of the HTML text and, to some degree, can be copied-and-pasted (this is not a problem if TeX is rendered using MathJax, and the alignment should not be a problem for PNG rendering once bug 32694 is fixed).
- The formula’s background and font size match the rest of HTML contents (this can be fixed on TeX formulas by using the commands
\pagecolor
and\definecolor
) and the appearance respects CSS and browser settings while the typeface is conveniently altered to help you identify formulae. - Pages using HTML code for formulae will load faster and they will create less clutter on your hard disk.
- Formulae typeset with HTML code will be accessible to client-side script links (a.k.a. scriptlets).
- The display of a formula entered using mathematical templates can be conveniently altered by modifying the templates involved; this modification will affect all relevant formulae without any manual intervention.
- The HTML code, if entered diligently, will contain all semantic information to transform the equation back to TeX or any other code as needed. It can even contain differences TeX does not normally catch, e.g.
{{math|''i''}}
for the imaginary unit and{{math|<var>i</var>}}
for an arbitrary index variable. - Unlike generated bitmaps, HTML is not sensitive to dots per inch variances between viewing platforms.
Pros of TeX[edit]
- TeX is semantically more precise than HTML.
- In TeX, "
x
" means mathematical variable "", whereas in HTML "x
" is generic and somewhat ambiguous. - On the other hand, if you encode the same formula as "
{{math|<var>x</var>}}
", you get the same visual result x and no information is lost. This requires diligence and more typing that could make the formula harder to understand as you type it. However, since there are far more readers than editors, this effort is worth considering if no other rendering options are available (such as MathJax, which is available to logged-in users as a preferences opt-in).
- In TeX, "
- One consequence of point 1 is that TeX code can be transformed into HTML, but not vice versa.[3] This means that on the server side we can always transform a formula, based on its complexity and location within the text, user preferences, type of browser, etc. Therefore, where possible, all the benefits of HTML can be retained, together with the benefits of TeX. It is true that the current situation is not ideal, but that is not a good reason to drop information or contents. It is more a reason to help improve the situation.
- Another consequence of point 1 is that TeX can be converted to MathML (e.g. by MathJax) for browsers which support it, thus keeping its semantics and allowing the rendering to be better suited for the reader’s graphic device.
- TeX is the preferred text formatting language of most professional mathematicians, scientists, and engineers. It is easier to persuade them to contribute if they can write in TeX.
- TeX has been specifically designed for typesetting formulae, so input is easier and more natural if you are accustomed to it, and output is more aesthetically pleasing if you focus on a single formula rather than on the whole containing page.
- Once a formula is done correctly in TeX, it will render reliably, whereas the success of HTML formulae is somewhat dependent on browsers or versions of browsers. Another aspect of this dependency is fonts: the serif font used for rendering formulae is browser-dependent and it may be missing some important glyphs. While the browser is generally capable to substitute a matching glyph from a different font family, it need not be the case for combined glyphs (compare "a̅" and " a̅").
- When writing in TeX, editors need not worry about whether this or that version of this or that browser supports this or that HTML entity. The burden of these decisions is put on the software. This does not hold for HTML formulae, which can easily end up being rendered wrongly or differently from the editor’s intentions on a different browser.[4]
- TeX formulae, by default, render larger and are usually more readable than HTML formulae and are not dependent on client-side browser resources, such as fonts, and so the results are more reliably WYSIWYG.
- While TeX does not assist you in finding HTML codes or Unicode values (which you can obtain by viewing the HTML source in your browser), copying and pasting from a TeX PNG image in Wikipedia into simple text will return the LaTeX source.
- ^ Unless your wikitext follows the style of point 1.2
- ^ The entity support problem is not limited to mathematical formulae though; it can be easily solved by using the corresponding characters instead of entities, as the character repertoire links do, except for cases where the corresponding glyphs are visually indiscernible (e.g. – for ‘–’ and − for ‘−’).
In some cases it may be the best choice to use neither TeX nor the HTML substitutes, but instead Unicode or the simple ASCII symbols of a standard keyboard.
Discussions[edit]
- Wikipedia talk:MOSPHYS
- Wikipedia talk:WikiProject Mathematics/Archive/2013/Jan #Destruction of .7B.7Bmath.7D.7D and similar templates
- Discussion about MathJax vs MathML and the future of math formatting on Wikipedia
See also[edit]
- Wikipedia:WikiProject Mathematics/Typography
- Wikipedia:texvc, a
<math>
to HTML converter; not used for HTML anymore - Category:Mathematical formatting templates