Copyright © 2026 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.
This specification defines a core subset of Mathematical Markup Language, or MathML, that is suitable for browser implementation. MathML is a markup language for describing mathematical notation and capturing both its structure and content. The goal of MathML is to enable mathematics to be served, received, and processed on the World Wide Web, just as HTML has enabled this functionality for text.
This section describes the status of this document at the time of its publication. A list of current W3C publications and the latest revision of this technical report can be found in the W3C standards and drafts index.
This document was published by the Math Working Group as an Editor's Draft.
Publication as an Editor's Draft does not imply endorsement by W3C and its Members.
This is a draft document and may be updated, replaced, or obsoleted by other documents at any time. It is inappropriate to cite this document as other than a work in progress.
This document was produced by a group operating under the W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent that the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.
This document is governed by the 18 August 2025 W3C Process Document.
This section is non-normative.
The [MATHML3] specification has several shortcomings that make it hard to implement consistently across web rendering engines or to extend with user-defined constructions, e.g.:
This MathML Core specification intends to address these issues by being as accurate as possible on the visual rendering of mathematical formulas using additional rules from the TeXBook’s Appendix G [TEXBOOK] and from the Open Font Format [OPEN-FONT-FORMAT], [OPEN-TYPE-MATH-ILLUMINATED]. It also relies on modern browser implementations and web technologies [HTML] [SVG] [CSS2] [DOM], clarifying interactions with them when needed or introducing new low-level primitives to improve the web platform layering.
Parts of MathML3 that do not fit well in this framework or are less fundamental have been omitted. Instead, they are described in a separate and larger [MATHML4] specification. The details of which math feature will be included in future versions of MathML Core or implemented as polyfills is still open. This question and other potential improvements are tracked on GitHub.
By increasing the level of implementation details, focusing on a workable subset, following a browser-driven design and relying on automated web platform tests, this specification is expected to greatly improve MathML interoperability. Moreover, effort on MathML layering will enable users to implement the rest of the MathML 4 specification, or more generally to extend MathML Core, using modern web technologies such as shadow trees, custom elements or APIs from [HOUDINI].
The term MathML element refers to any element in the MathML namespace. The MathML elements defined in this specification are called the MathML Core elements and are listed below. Any MathML element that is not listed below is called an Unknown MathML element.
aannotationannotation-xmlmactionmathmerrormfracmimmultiscriptsmnmomovermpaddedmphantommprescriptsmrootmrowmsmspacemsqrtmstylemsubmsubsupmsupmtablemtdmtextmtrmundermunderoversemanticsThe grouping elements are
a,
maction,
math,
merror,
mphantom,
mprescripts,
mrow,
mstyle,
semantics and unknown MathML elements.
The scripted elements are
mmultiscripts,
mover,
msub,
msubsup,
msup,
munder and
munderover.
The radical elements are
mroot and msqrt.
The attributes defined in this specification have no namespace and are called MathML attributes:
maction attributesmo attributesmpadded attributesmspace attributesmunderover attributesmtd attributesencodingdisplaylinethicknessMathML specifies a single top-level or root
math element, which encapsulates each
instance of MathML markup within a document. All other MathML content
must be contained in a <math> element.
The <math>
element accepts the attributes described
in 2.1.3 Global Attributes as well as the
following attributes:
The
display
attribute, if present,
must be an
ASCII case-insensitive
match
to block or inline.
The user agent stylesheet
described in A. User Agent Stylesheet
contains rules for this attribute that affect the
default values for the display
(block math or inline math)
and math-style
(normal or compact) properties.
If the display
attribute is absent or has an invalid value, the User Agent
stylesheet treats it the same as inline.
This specification does not define any observable behavior that is specific to the alttext attribute.
alttext attribute may be used as
alternative text by some legacy systems that do not
implement math layout.
If the <math> element does not have its computed
display property equal to
block math or inline math
then it is laid out according to the CSS specification where
the corresponding value is described.
Otherwise the layout algorithm of the
mrow element is used to produce a
math content box. That math content box is used as the content for the layout of
the element, as described by CSS for display: block
(if the computed value is block math) or
display: inline
(if the computed value is inline math).
Additionally, if the computed
display property is equal to
block math then that math content box is rendered
horizontally centered within the content box.
$$...$$
and inline mode $...$ correspond to
display="block" and display="inline"
respectively.
In the following example, a math formula
is rendered in display mode on a new line and taking full width,
with the math content centered within the container:
<div style="width: 15em;">
This mathematical formula with a big summation and the number pi
<math display="block" style="border: 1px dotted black;">
<mrow>
<munderover>
<mo>∑</mo>
<mrow><mi>n</mi><mo>=</mo><mn>1</mn></mrow>
<mrow><mo>+</mo><mn>∞</mn></mrow>
</munderover>
<mfrac>
<mn>1</mn>
<msup><mi>n</mi><mn>2</mn></msup>
</mfrac>
</mrow>
<mo>=</mo>
<mfrac>
<msup><mi>π</mi><mn>2</mn></msup>
<mn>6</mn>
</mfrac>
</math>
is easy to prove.
</div>
As a comparison, the same formula would look as follows in
inline mode. The formula is embedded in the paragraph of text
without forced line breaking.
The baselines specified by the layout algorithm of the
mrow are used for vertical
alignment. Note that
the middle of sum and equal symbols or fractions are all aligned,
but not with the alphabetical baseline of the surrounding
text.
Because good mathematical rendering requires use of mathematical
fonts, the
user agent stylesheet
should set the
font-family
to the
math
value on the <math> element instead of inheriting
it. Additionally, several CSS properties that can be set on
a parent container such as
font-style, font-weight,
direction or text-indent etc
are not expected to apply to the math formula and so the
user agent stylesheet
has rules to reset them by default.
math {
direction: ltr;
text-indent: 0;
letter-spacing: normal;
line-height: normal;
word-spacing: normal;
font-family: math;
font-size: inherit;
font-style: normal;
font-weight: normal;
display: inline math;
math-shift: normal;
math-style: compact;
math-depth: 0;
}
math[display="block" i] {
display: block math;
math-style: normal;
}
math[display="inline" i] {
display: inline math;
math-style: compact;
}
In addition to CSS data types, some MathML attributes rely on the following MathML-specific types:
true or
false.
The following attributes are common to and may be specified on all MathML elements:
autofocusclassdata-*dirdisplaystyleidmathbackgroundmathcolormathsizenoncescriptlevelstyletabindexon* event handler attributes
The
id,
class,
style,
data-*,
autofocus and
nonce and
tabindex
attributes have the same syntax and semantics as defined for
id,
class,
style,
data-*,
autofocus,
nonce and
tabindex
attributes on HTML elements.
The
dir
attribute, if present,
must be an
ASCII case-insensitive match
to ltr or rtl.
In that case, the user agent is expected to treat the attribute as a
presentational hint setting the element's
direction
property to the corresponding value.
More precisely, an
ASCII case-insensitive match
to rtl is mapped to rtl while
an ASCII case-insensitive match to ltr is mapped to ltr.
rtl in Arabic speaking world.
However, languages written from right to left often embed math
written from left to right and so the
user agent stylesheet resets
the
direction
property accordingly on the math
elements.
In the following example, the dir attribute is used to render "𞸎 plus 𞸑 raised to the power of (٢ over, 𞸟 plus ١)" from right-to-left.
<math dir="rtl">
<mrow>
<mi>𞸎</mi>
<mo>+</mo>
<msup>
<mi>𞸑</mi>
<mfrac>
<mn>٢</mn>
<mrow>
<mi>𞸟</mi>
<mo>+</mo>
<mn>١</mn>
</mrow>
</mfrac>
</msup>
</mrow>
</math>
All MathML elements support event handler content attributes, as described in event handler content attributes in HTML.
All event handler content attributes noted by HTML as being supported by all HTMLElements are supported by all MathML elements as well, as defined in the MathMLElement IDL.
The
mathcolor
and
mathbackground
attributes, if present, must
have a value that is a
<color>.
In that case, the user agent is expected to treat these attributes as a
presentational hint setting the element's
color and
background-color
properties to the corresponding values.
The mathcolor attribute describes the foreground fill
color of MathML text, bars etc
while the mathbackground
attribute describes the background color of an element.
The
mathsize
attribute, if present, must
have a value that is a valid <length-percentage>.
In that case, the user agent is expected to treat the attribute as a
presentational hint setting the element's
font-size
property to the corresponding value.
The mathsize property indicates the desired height
of glyphs in math formulas but also scales other parts (spacing, shifts,
line thickness of bars etc) accordingly.
The
displaystyle
attribute, if present, must have a value that is a boolean.
In that case, the user agent is expected to treat the attribute as a
presentational hint setting the element's
math-style
property to the corresponding value.
More precisely, an
ASCII case-insensitive match
to true is mapped to normal while
an ASCII case-insensitive match to false is mapped to compact.
This attribute indicates whether formulas should try to minimize
the logical height (value is false) or not
(value is true) e.g. by changing the size of content or
the layout of scripts.
The
scriptlevel
attribute, if present, must have value
+<U>, -<U> or <U>
where <U> is an
unsigned-integer.
In that case
the user agent is expected to treat the scriptlevel
attribute as a
presentational hint setting the element's
math-depth
property to the corresponding value.
More precisely,
+<U>, -<U> and
<U>
are respectively mapped to
add(<U>)
add(<-U>)
and <U>.
displaystyle and scriptlevel values
are automatically adjusted within MathML elements.
To fully implement these attributes, additional CSS properties must be
specified in the user agent stylesheet
as described in A. User Agent Stylesheet.
In particular, for all MathML elements a default
font-size: math is specified to ensure that
scriptlevel changes are taken into account.
In this example, an munder
element is used to attach a
script "A" to a base "∑". By default, the summation
symbol is rendered with the font-size inherited from its
parent and the A as a scaled down subscript.
If displaystyle is true, the summation symbol is drawn
bigger and the "A" becomes an underscript.
If scriptlevel is reset to 0 on the "A", then it will
use the same font-size as the top-level math root.
<math>
<munder>
<mo>∑</mo>
<mi>A</mi>
</munder>
<munder displaystyle="true">
<mo>∑</mo>
<mi>A</mi>
</munder>
<munder>
<mo>∑</mo>
<mi scriptlevel="0">A</mi>
</munder>
</math>
\displaystyle, \textstyle,
\scriptstyle, and \scriptscriptstyle correspond
to displaystyle and scriptlevel as
true and 0,
false and 0,
false and 1,
and false and 2, respectively.
The attributes intent and arg are reserved as valid attributes.
This specification does not define any observable behavior that is
specific to the intent and arg attributes.
MathML can be mixed with HTML and SVG as described in the relevant specifications [HTML] [SVG].
When evaluating the SVG requiredExtensions
attribute, user agents must claim support for the language extension
identified by the
MathML namespace.
In this example, inline MathML and SVG elements are used inside
an HTML document. SVG elements <switch> and
<foreignObject> (with
proper <requiredExtensions>) are used to
embed a MathML formula with a text fallback, inside a diagram.
HTML input element is used within the
mtext
to include an interactive input field inside a mathematical
formula. See also 3.8 Semantics and Presentation
for an example of SVG and HTML inside an annotation-xml
element.
<svg style="font-size: 20px" width="400px" height="220px" viewBox="0 0 200 110">
<g transform="translate(10,80)">
<path d="M 0 0 L 150 0 A 75 75 0 0 0 0 0
M 30 0 L 30 -60 M 30 -10 L 40 -10 L 40 0"
fill="none" stroke="black"></path>
<text transform="translate(10,20)">1</text>
<switch transform="translate(35,-40)">
<foreignObject width="200" height="50"
requiredExtensions="http://www.w3.org/1998/Math/MathML">
<math>
<msqrt>
<mn>2</mn>
<mi>r</mi>
<mo>−</mo>
<mn>1</mn>
</msqrt>
</math>
</foreignObject>
<text>\sqrt{2r - 1}</text>
</switch>
</g>
</svg>
<p>
Fill the blank:
<math>
<msqrt>
<mn>2</mn>
<mtext><input onchange="..." size="2" type="text"></mtext>
<mo>−</mo>
<mn>1</mn>
</msqrt>
<mo>=</mo>
<mn>3</mn>
</math>
</p>
User agents must support various CSS features mentioned in this specification, including new ones described in 4. CSS Extensions for Math Layout. They must follow the computation rule for display: contents.
In this example, the MathML formula inherits the CSS color of its
parent and uses the font-family specified via the
style attribute.
<div style="width: 15em; color: blue">
This mathematical formula with a big summation and the number pi
<math display="block" style="font-family: STIX Two Math">
<mrow>
<munderover>
<mo>∑</mo>
<mrow><mi>n</mi><mo>=</mo><mn>1</mn></mrow>
<mrow><mo>+</mo><mn>∞</mn></mrow>
</munderover>
<mfrac>
<mn>1</mn>
<msup><mi>n</mi><mn>2</mn></msup>
</mfrac>
</mrow>
<mo>=</mo>
<mfrac>
<msup><mi>π</mi><mn>2</mn></msup>
<mn>6</mn>
</mfrac>
</math>
is easy to prove.
</div>
All documents containing MathML Core elements must include
CSS rules described in A. User Agent Stylesheet
as part of user-agent level style sheet defaults.
In particular, this adds !important rules to force
writing mode
to horizontal-lr on all MathML elements.
The float
property does
not create floating of elements whose parent's computed
display value is
block math or inline math,
and does not take them out-of-flow.
The ::first-line and
::first-letter
pseudo-elements do not apply to elements whose computed
display value is
block math or inline math, and such
elements do not contribute a first formatted line or first letter
to their ancestors.
The following CSS features are not supported and must be ignored:
white-space
is treated as nowrap on all MathML elements.
align-content, justify-content,
align-self, justify-self have
no effects on MathML elements.
User agents supporting Web application APIs must ensure that they keep the visual rendering of MathML synchronized with the [DOM] tree, in particular perform necessary updates when MathML attributes are modified dynamically.
All the nodes representing MathML elements in the DOM
must implement, and expose to scripts, the following
MathMLElement interface, unless otherwise specified.
WebIDL[Exposed=Window]
interface MathMLElement : Element { };
MathMLElement includes GlobalEventHandlers;
MathMLElement includes HTMLOrSVGOrMathMLElement;
The GlobalEventHandlers and
HTMLOrSVGOrMathMLElement
interfaces are defined in [HTML].
The style IDL attribute is defined in [CSSOM].
In the following example, a MathML formula is used to render the fraction "α over 2". When clicking the red α, it is changed into a blue β.
<script>
function ModifyMath(mi) {
mi.style.color = 'blue';
mi.textContent = 'β';
}
</script>
<math>
<mrow>
<mfrac>
<mi style="color: red" onclick="ModifyMath(this)">α</mi>
<mn>2</mn>
</mfrac>
</mrow>
</math>
Because math fonts generally contain very tall glyphs such as big integrals, using typographic metrics is important to avoid excessive line spacing of text. As a consequence, user agents must take into account the USE_TYPO_METRICS flag from the OS/2 table [OPEN-FONT-FORMAT] when performing text layout.
MathML provides the ability for authors to allow for
interactivity in supporting interactive user agents
using the same concepts, approach and guidance to
Focus
as described in HTML, with modifications or
clarifications regarding application
for MathML as described in this section.
When an element is focused, all applicable CSS focus-related pseudo-classes as defined in Selectors Level 3 apply, as defined in that specification.
The contents of embedded math elements
(including HTML elements inside token elements)
contribute to the sequential focus order of the containing owner HTML
document (combined sequential focus order).
The default display property
is described in A. User Agent Stylesheet:
<math> root,
it is equal to inline math or block math
according to the value of the display attribute.
mtable,
mtr,
mtd it is respectively equal to
inline-table,
table-row and
table-cell.
maction
and semantics elements, it is equal to
none.
block math.
In order to specify math layout in different writing modes, this specification uses concepts from [CSS-WRITING-MODES-4]:
horizontal-lr and ltr.
See Figure 4,
Figure 5 and
Figure 6 for examples of other
writing modes that are sometimes used for math layout.
Boxes used for MathML elements rely on several parameters in order to perform layout in a way that is compatible with CSS but also to take into account very accurate positions and spacing within math formulas:
Block metrics. The block size, first baseline set and last baseline set. The following baselines are defined for MathML boxes:
Given a MathML box, the following offsets are defined:
horizontal-tb and rtl that may be used in e.g. Arabic math.vertical-lr and ltr that may be used in e.g. Mongolian math.vertical-rl and ltr that may be used in e.g. Japanese math.Here are examples of offsets obtained from line-relative metrics:
ltr and
is the inline size of the box −
(line-left offset + inline size of
the child box) otherwise.
horizontal-lr,
vertical-rl or sideways-rl
and is the line-descent otherwise.
Each MathML element has an associated math content box, which is calculated as described in this chapter's layout algorithms using the following structure:
The following extra steps must be performed:
The box metrics and offsets of the padding box are obtained from the content box by taking into account the corresponding padding properties as described in CSS.
The baselines of the padding box are the same as the one of the content box.
If the content box has a top accent attachment then the padding box has the same property, increased by the inline-start padding. If the content box has an italic correction then the padding box has the same property, increased by the inline-end padding.
The box metrics and offsets of the border box are obtained from the padding box by taking into account the corresponding border-width property as described in CSS.
In general, the baselines of the border box are the same as the one of the padding box. However, if the line-over border is positive then the ink-over baseline is set to the line-over edge of the border box and if the line-under border is positive then the ink-under baseline is set to the line-under edge of the border box.
If the padding box has a top accent attachment then the border box has the same property, increased by the border-width of its inline-start egde. If the padding box has an italic correction then the border box has the same property, increased by the border-width of its inline-end egde.
The box metrics and offsets of the margin box are obtained from the border box by taking into account the corresponding margin properties as described in CSS.
The baselines of the margin box are the same as the one of the border box.
If the padding box has a top accent attachment then the margin box has the same property, increased by the inline-start margin. If the padding box has an italic correction then the margin box has the same property, increased by the inline-end margin.
During box layout, optional inline stretch size constraint and block stretch size constraint parameters may be used on embellished operators. The former indicates a target size that a core operator stretched along the inline axis should cover. The latter indicates an ink line-ascent and ink line-descent that a core operator stretched along the block axis should cover. Unless specified otherwise, these parameters are ignored during box layout and child boxes are laid out without any stretch size constraint.
An anonymous box is a box without any associated
element in the DOM tree and which is generated for layout purpose
only. The properties of anonymous boxes are inherited from the
enclosing non-anonymous box while non-inherited properties have
their initial value.
An anonymous <mrow> box is
an anonymous box with display equal to
block math and which is laid out as
described in section 3.3.1.2 Layout of <mrow>.
If a MathML element generates an anonymous <mrow> box then it wraps its children in an anonymous <mrow> box. I.e., its subtree in the visual formatting model is made of an anonymous <mrow> box which itself contains the boxes associated to the children of this MathML element.
In the following example, the math and
mrow elements are laid out as described in section
3.3.1.2 Layout of <mrow>. In particular, the
<math> element adds proper spacing around its
<mo>≠</mo> child and the
<mrow> element stretches its
<mo>|</mo> children vertically.
The mtd element has
display: table-cell and the
msqrt element displays a radical symbol around its
children. However, they also place their children in a way that
is similar to what is described in section
3.3.1.2 Layout of <mrow>: the
<msqrt> element adds proper spacing around its
<mo>+</mo> child while the
<mtd> element stretches its
<mo> children vertically.
In order to make this possible,
each of these two elements
generates an anonymous <mrow> box.
<math>
<mrow>
<mo>|</mo>
<mtable>
<mtr>
<mtd>
<mi>x</mi>
</mtd>
<mtd>
<mo>(</mo>
<mfrac linethickness="0">
<mn>5</mn>
<mn>3</mn>
</mfrac>
<mo>)</mo>
</mtd>
</mtr>
<mtr>
<mtd>
<msqrt>
<mn>7</mn>
<mo>+</mo>
<mn>2</mn>
</msqrt>
</mtd>
<mtd>
<mi>y</mi>
</mtd>
</mtr>
</mtable>
<mo>|</mo>
</mrow>
<mo>≠</mo>
<mn>0</mn>
</math>
MathML elements can overlap due to various spacing rules. They
can as well contain extra graphical items
(bars, radical symbol, etc).
A MathML element with computed style
display: block math
or display: inline math generates a new stacking
context. The painting order
of in-flow children of such a MathML element
is exactly the same as block elements. The extra graphical
items are painted after text and background (right after
step 7.2.4 for display: inline math and right after
step 7.2 for display: block math).
Token elements in presentation markup are broadly intended to represent the smallest units of mathematical notation which carry meaning. Tokens are roughly analogous to words in text. However, because of the precise, symbolic nature of mathematical notation, the various categories and properties of token elements figure prominently in MathML markup. By contrast, in textual data, individual words rarely need to be marked up or styled specially.
The
mtext
element is used to represent arbitrary text
that should be rendered as itself. In general, the
<mtext> element is intended to denote
commentary text.
The <mtext> element accepts the attributes described
in 2.1.3 Global Attributes.
In the following example, mtext is used
to put conditional words in a definition:
<math>
<mi>y</mi>
<mo>=</mo>
<mrow>
<msup>
<mi>x</mi>
<mn>2</mn>
</msup>
<mtext> if </mtext>
<mrow>
<mi>x</mi>
<mo>≥</mo>
<mn>1</mn>
</mrow>
<mtext> and </mtext>
<mn>2</mn>
<mtext> otherwise.</mtext>
</mrow>
</math>
If the element does not have its computed
display property equal to
block math or inline math
then it is laid out according to the CSS specification where
the corresponding value is described.
Otherwise, the layout below is performed.
If the <mtext> element contains only text
content without
forced line break
or
soft wrap opportunity
then, the anonymous child node generated for that text is
laid out as defined in the relevant CSS specification and:
<mtext> element.
Otherwise, the mtext element is laid out as a
block box
and corresponding min-content inline size,
max-content inline size,
inline size, block size,
first baseline set and last baseline set are
used for the math content box.
The mi element represents a symbolic name or arbitrary text that should be rendered as an identifier. Identifiers can include variables, function names, and symbolic constants.
The <mi> element accepts the attributes described
in 2.1.3 Global Attributes as well as the following attribute:
The layout algorithm is the same as the mtext element. The
user agent stylesheet
must contain the following property in order to implement automatic
italic via the text-transform value introduced in 4.2 The math-auto transform:
mi {
text-transform: math-auto;
}
The
mathvariant
attribute,
if present, must be an
ASCII case-insensitive
match of normal.
In that case, the user agent is expected to treat the attribute as a
presentational hint setting the element's
text-transform
property to none. Otherwise it has no effects.
In [MathML3], the mathvariant attribute was used
to define logical classes of token elements, each class providing
a collection of typographically-related symbolic tokens with
specific meaning within a given mathematical expression.
In MathML Core, this attribute is only used to cancel automatic
italic of the mi element. For other use cases, the proper
Mathematical Alphanumeric Symbols [UNICODE] should be used
instead. See also section C. Mathematical Alphanumeric Symbols.
In the following example, mi is used to render
variables and function names. Note that per
4.2 The math-auto transform the default
style text-transform: math-auto has
no effect on the first <mi> ("cos" is made of three characters),
makes the second <mi> render as math italic ("c" is made of a single
character U+0063 Latin Small Letter C which is
mapped to
U+1D450 Mathematical Italic Small C per the
italic table), has no effect
on the third <mi> (overridden by
mathvariant="normal", setting
text-transform to none) or on the fourth
<mi> (no mapping defined for U+221E Infinity
in the italic table).
<math>
<mi>cos</mi>
<mo>,</mo>
<mi>c</mi>
<mo>,</mo>
<mi mathvariant="normal">c</mi>
<mo>,</mo>
<mi>∞</mi>
</math>
The mn element represents a "numeric literal" or other data that should be rendered as a numeric literal. Generally speaking, a numeric literal is a sequence of digits, perhaps including a decimal point, representing an unsigned integer or real number.
The <mn> element accepts the attributes described
in 2.1.3 Global Attributes. Its layout algorithm is
the same as the
mtext element.
In the following example, mn is used to
write a decimal number.
<math>
<mn>3.141592653589793</mn>
</math>
The
mo
element represents an
operator or anything that should be rendered as an operator.
In general, the notational conventions for mathematical operators
are quite complicated, and therefore MathML provides a relatively
sophisticated mechanism for specifying the rendering behavior of an
<mo> element.
As a consequence, in MathML the list of things that should "render as an operator" includes a number of notations that are not mathematical operators in the ordinary sense. Besides ordinary operators with infix, prefix, or postfix forms, these include fence characters such as braces, parentheses, and "absolute value" bars; separators such as comma and semicolon; and mathematical accents such as a bar or tilde over a symbol. This chapter uses the term "operator" to refer to operators in this broad sense.
The <mo> element accepts the attributes described
in 2.1.3 Global Attributes as well as the following
attributes:
This specification does not define any observable behavior that is specific to the fence and separator attributes.
fence and separator
to describe specific semantics of operators.
The default values may be determined from the
Operators_fence and Operators_separator tables, or equivalently
the human-readable version
of the operator dictionary.
In the following example, the mo element
is used for the binary operator +. Default spacing is symmetric
around that operator. A tighter spacing is used if you rely
on the form attribute to force it to be
treated as a prefix operator.
Spacing can also be specified explicitly using the
lspace and
rspace attributes.
<math>
<mn>1</mn>
<mo>+</mo>
<mn>2</mn>
<mo form="prefix">+</mo>
<mn>3</mn>
<mo lspace="2em">+</mo>
<mn>4</mn>
<mo rspace="3em">+</mo>
<mn>5</mn>
</math>
Another use case is for big operators such as summation.
When displaystyle is true, such an operator is drawn
larger but one can change that with the largeop attribute.
When displaystyle is false, underscripts are actually
rendered as subscripts but one can change that with the
movablelimits attribute.
<math>
<mrow displaystyle="true">
<munder>
<mo>∑</mo>
<mn>5</mn>
</munder>
<munder>
<mo largeop="false">∑</mo>
<mn>6</mn>
</munder>
</mrow>
<mrow>
<munder>
<mo>∑</mo>
<mn>5</mn>
</munder>
<munder>
<mo movablelimits="false">∑</mo>
<mn>7</mn>
</munder>
</mrow>
</math>
Operators are also used for stretchy symbols such as fences,
accents, arrows etc. In the following example, the vertical arrow
stretches to the height of the mspace element.
One can override default stretch behavior with the
stretchy attribute e.g. to force an unstretched arrow.
The symmetric attribute allows to indicate whether
the operator
should stretch symmetrically above and below the math axis
(fraction bar).
Finally the minsize and maxsize attributes add
additional constraints over the stretch size.
<math>
<mfrac>
<mspace height="50px" depth="50px" width="10px" style="background: blue"/>
<mspace height="25px" depth="25px" width="10px" style="background: green"/>
</mfrac>
<mo>↑</mo>
<mo stretchy="false">↑</mo>
<mo symmetric="true">↑</mo>
<mo minsize="250px">↑</mo>
<mo maxsize="50px">↑</mo>
</math>
Note that the default properties of operators are dictionary-based, as explained in 3.2.4.2 Dictionary-based attributes. For example a binary operator typically has default symmetric spacing around it while a fence is generally stretchy by default.
A MathML Core element is an embellished operator if it is:
mo element;mfrac,
whose first in-flow child exists and is an
embellished operator;
mpadded,
whose in-flow children consist (in any order) of one
embellished operator and zero or more
space-like elements.
The core operator of an embellished operator
is the <mo> element defined recursively as
follows:
mo
element; is the element itself.mfrac
element is the core operator of its first in-flow child.
mpadded
is the core operator of its unique embellished operator
in-flow child.
The stretch axis of an embellished operator
is inline if its
core operator contains only text content
made of a single character c, and that character has
inline intrinsic stretch axis.
Otherwise, the stretch axis of the embellished operator
is block.
The same definitions apply for boxes in the visual formatting model where an anonymous <mrow> box is treated as a grouping element.
The form
property of an embellished operator is either
infix, prefix or
postfix.
The corresponding form attribute on the
mo element, if present, must be an
ASCII case-insensitive
match to one of these values.
The algorithm for determining the form of an embellished operator is as follows:
form attribute is present and valid
on the core operator, then its
ASCII lowercased value
is used.
mpadded or
msqrt with more than one in-flow child
(ignoring all space-like children) then it has
form prefix.
mpadded or
msqrt
with more than one in-flow child
(ignoring all space-like children) then it has
form postfix.
postfix.
infix.
The
stretchy,
symmetric,
largeop,
movablelimits
properties of an embellished operator are
either false or true. In the latter
case, it
is said that the embellished operator has the
property.
The corresponding stretchy, symmetric, largeop, movablelimits attributes on the
mo element, if present, must be a
boolean.
The
lspace,
rspace,
minsize
properties of an embellished operator are
<length-percentage>.
The maxsize property
of an embellished operator is either a
<length-percentage> or ∞.
The
lspace,
rspace,
minsize and
maxsize attributes on the
mo element, if present,
must be a <length-percentage>.
The algorithm for determining the properties of an embellished operator is as follows:
stretchy,
symmetric,
largeop,
movablelimits,
lspace,
rspace,
maxsize or
minsize
attribute is present and valid
on the core operator, then the
ASCII lowercased value
of this property is used.form of an embellished operator.Content, then set Category
to the result of the
algorithm to determine the category of an operator
(Content, Form)
where Form is the form
calculated at the previous step.
Category is Default and
the form
of embellished operator was not explicitly specified
as an attribute on its core operator:
Category to the result of the
algorithm to determine the category of an operator
(Content, Form) where Form is
infix.Category is Default, then
run the algorithm again with Form set to
postfix.Category is Default, then
run the algorithm again with Form set to
prefix.Category.
When used during layout,
the values of stretchy,
symmetric,
largeop,
movablelimits,
lspace,
rspace,
minsize are
obtained by the
algorithm for determining the properties of an embellished operator with the following extra resolutions:
lspace,
rspace are interpreted
relative to the value read from the dictionary
or to the fallback value above.
minsize
and maxsize are described in
3.2.4.3 Layout of operators.
lspace, rspace,
minsize and maxsize rely on the
font style of the core operator, not the one of the
embellished operator.
If the <mo> element does not have its computed
display property equal to
block math or inline math
then it is laid out according to the CSS specification where
the corresponding value is described.
Otherwise, the layout below is performed.
The text of the operator must only be painted if the
visibility of
the <mo> element is visible.
In that case, it must be painted with the
color
of the <mo> element.
Let dir be the element's computed
direction.
Operators are laid out as follows:
<mo> element is not
made
of a single character c then fall back to the
layout algorithm of 3.2.1.1 Layout of <mtext>.
If it is not possible to get a glyph corresponding to
c given directionality dir, then
fall back to the layout algorithm of 3.2.1.1 Layout of <mtext>.
Otherwise, let g be the result of running
get a glyph corresponding to c
given directionality dir.
stretchy property:
g in the inline direction with the
first available font then fall back to the
layout algorithm of 3.2.1.1 Layout of <mtext>.
<mtext>.
Tinline
then
fall back to the
layout algorithm of 3.2.1.1 Layout of <mtext>.
g to
inline dimension Tinline.
g
stretched to inline dimension
Tinline and
at position determined by the previous box metrics.
g in the block direction with the
first available font then fall back to the
layout algorithm of 3.2.1.1 Layout of <mtext>.
(Uascent, Udescent)
then
fall back to the
layout algorithm of 3.2.1.1 Layout of <mtext>.
symmetric property
then set the target sizes
Tascent and
Tdescent to
Sascent and
Sdescent respectively:
Sascent =
max(
Uascent − AxisHeight,
Udescent + AxisHeight
) + AxisHeight
Sdescent =
max(
Uascent − AxisHeight,
Udescent + AxisHeight
) − AxisHeight
Uascent and
Udescent respectively.
Tascent − AxisHeight = Tdescent + AxisHeight means that
an operator stretching exactly
Tascent above the baseline
and Tdescent below the
baseline would actually stretch symmetrically above
and below the math axis.
Sascent and
Sdescent are the minimal
values, that are respectively not less than
Uascent and
Udescent, which satisfy
this property.
minsize and maxsize
be the minsize and maxsize properties on the
operator. Percentage values are interpreted relative
to the height of g.
Let T =
Tascent +
Tdescent be the target size.
If minsize < 0 then set minsize
to 0.
If maxsize < minsize then
set maxsize to minsize.
With 0 ≤ minsize ≤ maxsize:
T ≤ 0 then set
Tascent to
minsize / 2 + AxisHeight and
then set Tdescent
to minsize −
Tascent.
T < minsize
then set Tascent to
max(0, (Tascent − AxisHeight) × minsize / T + AxisHeight) and
Tdescent
to minsize −
Tascent.
maxsize < T
then set Tascent to
max(0, (Tascent − AxisHeight) × maxsize / T + AxisHeight) and
Tdescent
to maxsize −
Tascent.
maxsize is value ∞ is
interpreted above as being larger than any other size,
i.e.
minsize ≤ maxsize is always true while
maxsize < minsize and
maxsize < T are always false.
minsize ≤ T ≤ maxsize holds.
Additionnally, if the target values correspond to symmetric stretching with respect to the math axis then property
Tascent − AxisHeight = Tdescent + AxisHeight is preserved.
g
to block dimension
Tascent +
Tdescent.
The inline size of the math content is the width of
the stretchy glyph. The stretchy glyph is shifted
towards the line-under by a value Δ so that its
center aligns with the center of the target:
the ink ascent of the math content is
the ascent of the stretchy glyph − Δ
and the ink descent of the math content is
the descent of the stretchy glyph + Δ.
These centers have coordinates "½(ascent − descent)"
so Δ = [(ascent of stretchy glyph − descent of stretchy glyph) − (Tascent − Tdescent)] / 2.
g
stretched to block dimension
Tascent +
Tdescent
and at position determined by the previous box metrics
shifted by Δ towards the line-over.
largeop property and
if math-style on
the <mo> element is normal,
then:
g in the block direction with the
first available font then fall back to the
layout algorithm of 3.2.1.1 Layout of <mtext>.
stretchy largeop
glyph as stretchy with target dimension DisplayOperatorMinHeight.
g
to block dimension
DisplayOperatorMinHeight.
The inline size of the math content is the width of
the stretchy glyph. The stretchy glyph is shifted
towards the line-under by a value Δ so that its
center aligns with the center of the target when
symmetric:
the ink ascent of the math content is
the ascent of the stretchy glyph − Δ
and the ink descent of the math content is
the descent of the stretchy glyph + Δ.
symmetric property,
then
Δ = [(ascent of stretchy glyph − descent of stretchy glyph) − 2 * AxisHeight] / 2.
symmetric.
g
stretched to block dimension
DisplayOperatorMinHeight
and at position determined by the previous box metrics
shifted by Δ towards the line-over.
<mtext>.
If the algorithm to shape a stretchy glyph has been used for one of the step above, then the italic correction of the math content is set to the value returned by that algorithm.
The mspace empty element represents a blank space of any desired size, as set by its attributes.
The <mspace> element accepts the attributes described
in 2.1.3 Global Attributes as well as the following
attributes:
The width, height, depth, if present, must have a value that is a valid <length-percentage>.
width
attribute is present, valid and not a percentage then
that attribute is used as a
presentational hint
setting the element's
width
property to the corresponding value.
height
attribute is absent, invalid or a percentage then the requested
line-ascent is 0.
Otherwise the requested line-ascent is the resolved
value of the height attribute, clamping
negative values to 0.
height and depth attributes
are present, valid and not a percentage then they are used as a
presentational hint
setting the element's
height
property to the concatenation of the strings
"calc(", the height attribute value,
" + ", the depth attribute value,
and ")".
If only one of these attributes is
present, valid and not a percentage then it is treated as a
presentational hint
setting the element's
height
property to the corresponding value.
In the following example, mspace is used to
force spacing within the formula (a 1px blue border is
added to easily visualize the space):
<math>
<mn>1</mn>
<mspace width="1em"
style="border-top: 1px solid blue"/>
<mfrac>
<mrow>
<mn>2</mn>
<mspace depth="1em"
style="border-left: 1px solid blue"/>
</mrow>
<mrow>
<mn>3</mn>
<mspace height="2em"
style="border-left: 1px solid blue"/>
</mrow>
</mfrac>
</math>
If the <mspace> element does not have its
computed
display property equal to
block math or inline math
then it is laid out according to the CSS specification where
the corresponding value is described.
Otherwise,
the <mspace> element is laid out as shown on
Figure 9.
The min-content inline size,
max-content inline size and inline size of the math
content are equal to the resolved value of the
width property.
The block size of the math content is equal to the resolved
value of the height property.
The line-ascent of the math content is equal to the
requested line-ascent determined above.
<mspace> elementA number of MathML presentation elements are "space-like" in the sense that they typically render as whitespace, and do not affect the mathematical meaning of the expressions in which they appear. As a consequence, these elements often function in somewhat exceptional ways in other MathML expressions.
A MathML Core element is a space-like element if it is:
mtext or
mspace;
mpadded
all of whose in-flow children are space-like.
The same definitions apply for boxes in the visual formatting model where an anonymous <mrow> box is treated as a grouping element.
mphantom is not
automatically defined to be space-like, unless its content is
space-like. This is because operator spacing is affected by
whether adjacent elements are space-like.
Since the <mphantom> element is
primarily intended as an aid in aligning expressions, operators
adjacent to an <mphantom> should behave
as if they were adjacent to the contents of the
<mphantom>, rather than to an equivalently
sized area of whitespace.
ms element is used to represent "string literals" in expressions meant to be interpreted by computer algebra systems or other systems containing "programming languages".
The <ms> element accepts the attributes described
in 2.1.3 Global Attributes. Its layout algorithm is
the same as the mtext element.
In the following example, ms is used to
write a literal string of characters:
<math>
<mi>s</mi>
<mo>=</mo>
<ms>"hello world"</ms>
</math>
lquote and
rquote attributes to respectively specify the strings
to use as opening and closing quotes. These are no longer supported
and the quotes must instead be specified as part of the text of the
<ms> element. One can add CSS rules to legacy
documents in order to preserve visual rendering. For example,
in left-to-right direction:
ms:before, ms:after {
content: "\0022";
}
ms[lquote]:before {
content: attr(lquote);
}
ms[rquote]:after {
content: attr(rquote);
}
Besides tokens there are several families of MathML presentation elements. One family of elements deals with various "scripting" notations, such as subscript and superscript. Another family is concerned with matrices and tables. The remainder of the elements, discussed in this section, describe other basic notations such as fractions and radicals, or deal with general functions such as setting style properties and error handling.
The
mrow
element is used to group together any number of sub-expressions, usually
consisting of one or more <mo> elements acting as
"operators" on one or more other expressions that are their "operands".
In the following example, mrow is used to
group a sum "1 + 2/3" as a fraction numerator (first child
of mfrac) and to construct a fenced expression
(first child of msup) that is raised to the power of 5.
Note that mrow alone does not add visual fences
around its grouped content, one has to explicitly specify them
using the mo element.
Within the mrow elements, one can see that
vertical alignment of children (according to the
alphabetic baseline or the mathematical baseline)
is properly performed, fences are vertically stretched and
spacing around the binary + operator automatically calculated.
<math>
<msup>
<mrow>
<mo>(</mo>
<mfrac>
<mrow>
<mn>1</mn>
<mo>+</mo>
<mfrac>
<mn>2</mn>
<mn>3</mn>
</mfrac>
</mrow>
<mn>4</mn>
</mfrac>
<mo>)</mo>
</mrow>
<mn>5</mn>
</msup>
</math>
The <mrow> element accepts the attributes described
in 2.1.3 Global Attributes. An <mrow>
element with in-flow children
child1, child2, …, childN
is laid out as shown on Figure 10. The child boxes
are put in a row one after the other with all their
alphabetic baselines
aligned.
<mrow> elementThe algorithm for stretching operators along the block axis consists in the following steps:
LToStretch containing
embellished operators with
a stretchy property and block stretch axis;
and a second list LNotToStretch.
LNotToStretch.
If LToStretch is empty then stop.
If LNotToStretch is empty, perform
layout with block stretch size constraint
(0, 0) for
all the items of LToStretch.
Uascent
and Udescent as respectively the maximum
ink ascent and maximum ink descent of the margin boxes of
in-flow children that
have been laid out in the previous step.
LToStretch with
block stretch size constraint
(Uascent, Udescent).
If the box is not an anonymous <mrow> box
and the associated element does not have its computed
display property equal to
block math or inline math
then it is laid out according to the CSS specification where
the corresponding value is described.
Otherwise, the layout below is performed.
A child box is slanted if it is not an embellished operator and has nonzero italic correction.
lspace and
rspace.
The min-content inline size (respectively max-content inline size) are calculated using the following algorithm:
add-space to true if
the box corresponds to a math element
or is not an
embellished operator; and to false otherwise.
inline-offset to 0.previous-italic-correction to 0.inline-offset by
previous-italic-correction.
add-space is true then
increment inline-offset by
its lspace property.
inline-offset by
the min-content inline size
(respectively max-content inline size) of
the child's margin box.
previous-italic-correction to
its italic correction. Otherwise set it to 0.
add-space is true then
increment inline-offset by
its rspace property.
inline-offset by
previous-italic-correction.
inline-offset.
The in-flow children are laid out using the algorithm for stretching operators along the block axis.
The inline size of the math content is calculated like the min-content inline size and max-content inline size of the math content, using the inline size of the in-flow children's margin boxes instead.
The ink line-ascent (respectively line-ascent) of the math content is the maximum of the ink line-ascents (respectively line-ascents) of all the in-flow children's margin boxes. Similarly, the ink line-descent (respectively line-descent) of the math content is the maximum of the ink line-descents (respectively ink line-ascents) of all the in-flow children's margin boxes.
The in-flow children are positioned using the following algorithm:
add-space to true if
the box corresponds to a math element
or is not an
embellished operator; and to false otherwise.
inline-offset to 0.previous-italic-correction to 0.inline-offset by
previous-italic-correction.
add-space is true then
increment inline-offset by
its lspace property.
inline-offset and its block offset such
that the alphabetic baseline of the child is aligned with the alphabetic baseline.
inline-offset by
the inline size of the child's margin box.
previous-italic-correction to
its italic correction. Otherwise set it to 0.
add-space is true then
increment inline-offset by
its rspace property.
The italic correction of the math content is set to the italic
correction of the last in-flow child, which is
the final value of previous-italic-correction.
The mfrac element is used for fractions. It can also be used to mark up fraction-like objects such as binomial coefficients and Legendre symbols.
If the <mfrac> element does not have its computed
display property equal to block math
or inline math
then it is laid out according to the CSS specification where
the corresponding value is described.
Otherwise, the layout below is performed.
The <mfrac> element accepts the attributes described
in 2.1.3 Global Attributes as well as the
following attribute:
The linethickness attribute indicates the fraction line thickness to use for the fraction bar. If present, it must have a value that is a valid <length-percentage>. If the attribute is absent or has an invalid value, FractionRuleThickness is used as the default value. A percentage is interpreted relative to that default value. A negative value is interpreted as 0.
The following example contains four fractions
with different linethickness values. The bars are always
aligned with the middle of plus and minus signs.
The numerator and denominator are horizontally centered.
The fractions that are not in displaystyle
use smaller gaps and font-size.
<math>
<mn>0</mn>
<mo>+</mo>
<mfrac displaystyle="true">
<mn>1</mn>
<mn>2</mn>
</mfrac>
<mo>−</mo>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
<mo>+</mo>
<mfrac linethickness="200%">
<mn>1</mn>
<mn>234</mn>
</mfrac>
<mo>−</mo>
<mrow>
<mo>(</mo>
<mfrac linethickness="0">
<mn>123</mn>
<mn>4</mn>
</mfrac>
<mo>)</mo>
</mrow>
</math>
The <mfrac> element sets
displaystyle to false,
or if it was already false increments
scriptlevel by 1, within its children.
It sets math-shift to
compact within its second child.
To avoid visual confusion between the fraction bar and another
adjacent items (e.g. minus sign or another fraction's bar),
a default 1-pixel space is added around the element.
The user agent stylesheet
must contain the following rules:
mfrac {
padding-inline: 1px;
}
mfrac > * {
math-depth: auto-add;
math-style: compact;
}
mfrac > :nth-child(2) {
math-shift: compact;
}
If the <mfrac> element
has less or more than two in-flow children, its layout algorithm
is the same as the mrow element.
Otherwise, the first in-flow child is called
numerator, the second in-flow child is called
denominator and the layout algorithm is explained below.
<mfrac> element has two children
that are in-flow. Hence the CSS rules basically perform
scriptlevel, displaystyle
and math-shift
changes for the numerator and
denominator.
If the fraction line thickness is nonzero, the
<mfrac>
element is laid out as shown on Figure 12.
The fraction bar must only be painted if the
visibility of
the <mfrac> element is visible.
In that case, the fraction bar must be painted with the
color
of the <mfrac> element.
<mfrac> elementThe min-content inline size (respectively max-content inline size) of content is the maximum between the min-content inline size (respectively max-content inline size) of the numerator's margin box and the min-content inline size (respectively max-content inline size) of the denominator's margin box.
If there is an inline stretch size constraint or a block stretch size constraint then the numerator is also laid out with the same stretch size constraint, otherwise it is laid out without any stretch size constraint. The denominator is always laid out without any stretch size constraint.
The inline size of the math content is the maximum between the inline size of the numerator's margin box and the inline size of the denominator's margin box.
NumeratorShift is the maximum between:
compact
(respectively normal).
compact
(respectively normal) +
the ink line-descent of the numerator's margin box.
DenominatorShift is the maximum between:
compact
(respectively normal).
compact
(respectively normal) +
the ink line-ascent of the denominator's margin box −
the AxisHeight.
The line-ascent of the math content is the maximum between:
Numerator Shift +
the line-ascent of the numerator's margin box.
Denominator Shift +
the line-ascent of the denominator's margin box
The line-descent of the math content is the maximum between:
Numerator Shift
+ the line-descent of the numerator's margin box.
Denominator Shift
+ the line-descent of the denominator's margin box.
The inline offset of the numerator (respectively denominator) is half the inline size of the math content − half the inline size of the numerator's margin box (respectively denominator's margin box).
The alphabetic baseline of the numerator (respectively denominator)
is shifted away from the alphabetic baseline by a distance of
NumeratorShift (respectively
DenominatorShift)
towards the line-over (respectively line-under).
The math content box is placed within the content box so that their block-start edges are aligned and the middles of these edges are at the same position.
The inline size of the fraction bar is the inline size of the content box and its inline-start edge is the aligned with the one the content box. The center of the fraction bar is shifted away from the alphabetic baseline of the math content box by a distance of AxisHeight towards the line-over. Its block size is the fraction line thickness.
If the fraction line thickness is zero,
the <mfrac> element is instead laid out as
shown on Figure 13.
<mfrac> element without barThe min-content inline size, max-content inline size and inline size of the math content are calculated the same as in 3.3.2.1 Fraction with nonzero line thickness.
If there is an inline stretch size constraint or a block stretch size constraint then the numerator is also laid out with the same stretch size constraint and otherwise it is laid out without any stretch size constraint. The denominator is always laid out without any stretch size constraint.
If the math-style is compact then
TopShift and
BottomShift are respectively
set to StackTopShiftUp and StackBottomShiftDown.
Otherwise math-style is normal and
they are respectively set to StackTopDisplayStyleShiftUp
and StackBottomDisplayStyleShiftDown.
The Gap is defined to be
(BottomShift −
the ink line-ascent of the denominator's margin box) +
(TopShift −
the ink line-descent of the numerator's margin box).
If math-style is compact
then GapMin
is StackGapMin,
otherwise math-style is normal
and it is StackDisplayStyleGapMin.
If Δ = GapMin − Gap is positive then
TopShift and BottomShift
are respectively increased by Δ/2 and Δ − Δ/2.
The line-ascent of the math content is the maximum between:
TopShift +
the line-ascent of the numerator's margin box.
BottomShift
+ the line-ascent of the denominator's margin box.
The line-descent of the math content is the maximum between:
TopShift
+ the line-descent of the numerator's margin box.
BottomShift
+ the line-descent of the denominator's margin box.
The inline offsets of the numerator and denominator are calculated the same as in 3.3.2.1 Fraction with nonzero line thickness.
The alphabetic baseline of the numerator (respectively denominator) is
shifted away from the alphabetic baseline by a distance of
TopShift (respectively −
BottomShift) towards the
line-over (respectively line-under).
The math content box is placed within the content box so that their block-start edges are aligned and the middles of these edges are at the same position.
The radical elements construct an expression with a root symbol √ with a line over the content. The msqrt element is used for square roots, while the mroot element is used to draw radicals with indices, e.g. a cube root.
The <msqrt> and <mroot>
elements accept the attributes described
in 2.1.3 Global Attributes.
The following example contains a square root
written with msqrt and a cube root written
with mroot.
Note that msqrt has several children and the
square root applies to all of them.
mroot has exactly two children: it is a
root of index the second child (the number 3), applied to the
first child (the square root).
Also note these elements only change the font-size within the
mroot index, but it is scaled down more than
within the numerator and denumerator of the fraction.
<math>
<mroot>
<msqrt>
<mfrac>
<mn>1</mn>
<mn>2</mn>
</mfrac>
<mo>+</mo>
<mn>4</mn>
</msqrt>
<mn>3</mn>
</mroot>
<mo>+</mo>
<mn>0</mn>
</math>
The <msqrt> and <mroot>
elements sets math-shift to
compact.
The <mroot> element
increments scriptlevel by 2, and sets displaystyle to "false" in all
but its first child.
The user agent stylesheet
must contain the following rule in order to implement that behavior:
mroot > :not(:first-child) {
math-depth: add(2);
math-style: compact;
}
mroot, msqrt {
math-shift: compact;
}
If the <msqrt> or <mroot>
element do not have their computed
display property equal to block math
or inline math
then they are laid out according to the CSS specification where
the corresponding value is described.
Otherwise, the layout below is performed.
If the <mroot> has less or more than two
in-flow children,
its layout algorithm
is the same as the mrow element.
Otherwise, the first in-flow child is called
mroot base and
the second in-flow child is called
mroot index
and its layout algorithm is explained below.
<mroot> element has two children
that are in-flow. Hence the CSS rules basically perform
scriptlevel and displaystyle changes for the index.
The <msqrt> element
generates an anonymous <mrow> box
called the msqrt base.
The radical symbol must only be painted if the
visibility of
the <msqrt> or <mroot>
element is visible.
In that case, the radical symbol must be painted with the
color
of that element.
Let dir be the computed direction
of the <msqrt> or <mroot> element.
The radical glyph is the glyph obtained as a result of running
get a glyph corresponding to the U+221A SQUARE ROOT character
given dir.
The radical gap is given by
RadicalVerticalGap
if the math-style is compact and
RadicalDisplayStyleVerticalGap
if the math-style is normal.
The radical target size for the stretchy radical glyph is the sum of RadicalRuleThickness, radical gap and the ink height of the base.
The box metrics of the radical glyph and painting of the surd are given by the algorithm to shape a stretchy glyph to the target size for the radical glyph in the block dimension.
The <msqrt> element is laid out as shown on
Figure 14.
<msqrt> elementThe min-content inline size (respectively max-content inline size) of the math content is the sum of the preferred inline size of a glyph stretched along the block axis for the radical glyph and of the min-content inline size (respectively max-content inline size) of the msqrt base's margin box.
The inline size of the math content is the sum of the advance width of the box metrics of the radical glyph and of the inline size of the msqrt base's margin's box.
The line-ascent of the math content is the maximum between:
The line-descent of the math content is the maximum between:
The inline size of the overbar is the inline size of the msqrt base's margin's box. The inline offsets of the msqrt base and overbar are also the same and equal to the width of the box metrics of the radical glyph.
The alphabetic baseline of the msqrt base is aligned with the alphabetic baseline. The block size of the overbar is RadicalRuleThickness. Its vertical center is shifted away from the alphabetic baseline by a distance towards the line-over equal to the line-ascent of the math content, minus the RadicalExtraAscender, minus half the RadicalRuleThickness.
Finally, the painting of the surd is performed:
The <mroot> element is laid out as shown on
Figure 15.
The mroot index is first ignored and the mroot base
and
radical glyph are laid out as
shown on figure Figure 14
using the same algorithm as in
3.3.3.2 Square root
in order to produce a margin box B (represented in green).
<mroot> elementThe min-content inline size (respectively max-content inline size) of the math content is the sum of max(0, RadicalKernBeforeDegree), the mroot index's min-content inline size (respectively max-content inline size) of the mroot index's margin box, max(−min-content inline size, RadicalKernAfterDegree) (respectively max(−max-content inline size of the mroot index's margin box, RadicalKernAfterDegree)) and of the min-content inline size (respectively max-content inline size) of B.
Using the same clamping, AdjustedRadicalKernBeforeDegree and AdjustedRadicalKernAfterDegree are respectively defined as max(0, RadicalKernBeforeDegree) and is max(−inline size of the index's margin box, RadicalKernAfterDegree).
The inline size of the math content is the sum of AdjustedRadicalKernBeforeDegree, the inline size of the index's margin box, AdjustedRadicalKernAfterDegree and of the inline size of B.
The line-ascent of the math content is the maximum between:
The line-descent of the math content is the maximum between:
The inline offset of the index is AdjustedRadicalKernBeforeDegree. The inline-offset of the mroot base is the same + the inline size of the index's margin box.
The alphabetic baseline of B is aligned with the alphabetic baseline. The alphabetic baseline of the index is shifted away from the line-under edge by a distance of RadicalDegreeBottomRaisePercent × the block size of B + the line-descent of the index's margin box.
Historically, the mstyle element was introduced to make style changes that affect the rendering of its contents.
The <mstyle> element accepts the attributes described in
2.1.3 Global Attributes. Its layout algorithm is the
same as the mrow element.
<mstyle> is implemented for compatibility with full MathML. Authors whose only target is MathML Core are encouraged to use CSS for styling.
In the following example,
mstyle is used to set the scriptlevel
and displaystyle.
Observe this is respectively affecting the
font-size and placement of subscripts of their
descendants. In MathML Core, one could just have used
mrow elements instead.
<math>
<munder>
<mo movablelimits="true">*</mo>
<mi>A</mi>
</munder>
<mstyle scriptlevel="1">
<mstyle displaystyle="true">
<munder>
<mo movablelimits="true">*</mo>
<mi>B</mi>
</munder>
<munder>
<mo movablelimits="true">*</mo>
<mi>C</mi>
</munder>
</mstyle>
<munder>
<mo movablelimits="true">*</mo>
<mi>D</mi>
</munder>
</mstyle>
</math>
The merror element displays its contents as an ”error message”. The intent of this element is to provide a standard way for programs that generate MathML from other input to report syntax errors in their input.
In the following example,
merror is used to indicate a parsing error
for some LaTeX-like input:
<math>
<mfrac>
<merror>
<mtext>Syntax error: \frac{1}</mtext>
</merror>
<mn>3</mn>
</mfrac>
</math>
The <merror> element accepts the attributes described in
2.1.3 Global Attributes. Its layout algorithm is the
same as the mrow element.
The user agent stylesheet
must contain the following rule in order to visually highlight the error
message:
merror {
border: 1px solid red;
background-color: lightYellow;
}
The
mpadded
element renders the same as its in-flow child content, but with the
size and relative positioning point of its
content modified according to <mpadded>’s attributes.
The <mpadded> element accepts the attributes described
in 2.1.3 Global Attributes as well as the following
attributes:
The width, height, depth, lspace and voffset if present, must have a value that is a valid <length-percentage>.
In the following example, mpadded is used to
tweak spacing around a fraction
(a blue background is used to visualize it).
Without attributes, it behaves like an mrow but
the attributes allow to specify the size of the box
(width, height, depth) and position of the fraction within that
box (lspace and voffset).
<math>
<mrow>
<mn>1</mn>
<mpadded style="background: lightblue;">
<mfrac>
<mn>23456</mn>
<mn>78</mn>
</mfrac>
</mpadded>
<mn>9</mn>
</mrow>
<mo>+</mo>
<mrow>
<mn>1</mn>
<mpadded lspace="2em" voffset="-1em" height="1em" depth="3em" width="7em"
style="background: lightblue;">
<mfrac>
<mn>23456</mn>
<mn>78</mn>
</mfrac>
</mpadded>
<mn>9</mn>
</mrow>
</math>
The mpadded element
generates an anonymous <mrow> box called the
mpadded inner box with parameters called
inner inline size, inner line-ascent and inner line-descent.
The requested <mpadded>
parameters are determined as follows:
width
attribute is present, valid and not a percentage then
that attribute is used as a
presentational hint
setting the element's
width
property to the corresponding value.
height
attribute is absent, invalid or a percentage then the requested
height is the inner line-ascent.
Otherwise the requested height is the resolved
value of the height attribute, clamping
negative values to 0.
depth
attribute is absent, invalid or a percentage then the requested
depth is the inner line-ascent.
Otherwise the requested depth is the resolved
value of the depth attribute, clamping
negative values to 0.
lspace
attribute is absent, invalid or a percentage then the requested
lspace is 0. Otherwise the requested lspace is the resolved
value of the lspace attribute, clamping
negative values to 0.
voffset
attribute is absent, invalid or a percentage then the requested
voffset is 0. Otherwise the requested voffset is the resolved
value of the voffset attribute.
voffset values are not clamped to
0.
If the <mpadded> element does not have its
computed
display property equal to block math
or inline math
then it is laid out according to the CSS specification where
the corresponding value is described.
Otherwise, it is laid out as shown on
Figure 16.
<mpadded> elementThe min-content inline size (respectively max-content inline size) of the math content is the requested width calculated in 3.3.6.1 Inner box and requested parameters but using the min-content inline size (respectively max-content inline size) of the mpadded inner box instead of the "inner inline size".
The inline size of the math content is the requested width calculated in 3.3.6.1 Inner box and requested parameters.
The line-ascent of the math content is the requested height. The line-descent of the math content is the requested depth.
The mpadded inner box is placed so that its alphabetic baseline is shifted away from the alphabetic baseline by the requested voffset towards the line-over.
Historically, the mphantom element was introduced to render its content invisibly, but with the same metrics size and other dimensions, including alphabetic baseline position that its contents would have if they were rendered normally.
In the following example,
mphantom is used to ensure alignment of
corresponding parts of the numerator and denominator of a
fraction:
<math>
<mfrac>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
<mo>+</mo>
<mi>z</mi>
</mrow>
<mrow>
<mi>x</mi>
<mphantom>
<mo form="infix">+</mo>
<mi>y</mi>
</mphantom>
<mo>+</mo>
<mi>z</mi>
</mrow>
</mfrac>
</math>
The <mphantom> element accepts the attributes described
in 2.1.3 Global Attributes. Its layout algorithm is
the same as the mrow element.
The user agent stylesheet
must contain the following rule in order to hide the content:
mphantom {
visibility: hidden;
}
<mphantom> is implemented for compatibility with full MathML. Authors whose only target is MathML Core are encouraged to use CSS for styling.
The elements described in this section position one or more scripts around a base. Attaching various kinds of scripts and embellishments to symbols is a very common notational device in mathematics. For purely visual layout, a single general-purpose element could suffice for positioning scripts and embellishments in any of the traditional script locations around a given base. However, in order to capture the abstract structure of common notation better, MathML provides several more specialized scripting elements.
In addition to sub-/superscript elements, MathML has overscript and underscript elements that place scripts above and below the base. These elements can be used to place limits on large operators, or for placing accents and lines above or below the base.