## Вы не знаете MathML
Почти никто не знает

##
ML в MathML это
не Machine Learning

## С чего вдруг?

a 2 + b 2 = c 2

## HTML

    			<p>
    				a<sup>2</sup> +
    				b<sup>2</sup> =
    				c<sup>2</sup>
    			</p>

## HTML

a2 + b2 = c2

## SVG

    			<svg width="334" height="90">
    			    <text x="0" y="67" font-size="70" dy="0 -27 27 0 0 0 -27 0 27 0 0 -27">
    			        a<tspan font-size="52">2</tspan> +
    			        b<tspan font-size="52">2</tspan> =
    			        c<tspan font-size="52">2</tspan>
    			    </text>
    			</svg>

## SVG

## MathML

    			<math>
    			    <msup>
    			        <mi>a</mi>
    			        <mn>2</mn>
    			    </msup>
    			    <mo>+</mo>
    			    <msup>
    			        <mi>b</mi>
    			        <mn>2</mn>
    			    </msup>
    			    <mo>=</mo>
    			    <msup>
    			        <mi>c</mi>
    			        <mn>2</mn>
    			    </msup>
    			</math>

## MathML

    				<math>
    				    <msup>
    				        <mi>a</mi>
    				        <mn>2</mn>
    				    </msup>
    				    <mo>+</mo>
    				    <msup>
    				        <mi>b</mi>
    				        <mn>2</mn>
    				    </msup>
    				    <mo>=</mo>
    				    <msup>
    				        <mi>c</mi>
    				        <mn>2</mn>
    				    </msup>
    				</math>

    					<math>
    					    <msup>
    					        <mi>a</mi>
    					        <mn>2</mn>
    					    </msup>
    					    <mo>+</mo>
    					</math>

∑ n = 1 + ∞

## MathML

    				<math>
    				    <munderover>
    				        <mo>∑</mo>
    				        <mrow>
    				            <mi>n</mi>
    				            <mo>=</mo>
    				            <mn>1</mn>
    				        </mrow>
    				        <mrow>
    				            <mo>+</mo>
    				            <mn>∞</mn>
    				        </mrow>
    				    </munderover>
    				</math>

    					<math>
    					    <munderover>
    					        <mo>∑</mo>
    					        <mrow>under</mrow>
    					        <mrow>over</mrow>
    					    </munderover>
    					</math>

X = { 1 2 3 4 5 6 7 8 9 }

## MathML

    				<math>
                        <mi>X</mi>
                        <mo>=</mo>
                        <mrow>
                            <mo>{</mo>
                            <mtable>
                                <mtr>
                                    <mtd><mn>1</mn></mtd>
                                    <mtd><mn>2</mn></mtd>
                                    <mtd><mn>3</mn></mtd>
                                </mtr>
                                …
                            </mtable>
                            <mo>}</mo>
                        </mrow>
    				</math>

    					<mo>{</mo>
    					<mtable>
    					    <mtr>
    					        <mtd><mn>1</mn></mtd>
    					        <mtd><mn>2</mn></mtd>
    					        <mtd><mn>3</mn></mtd>
    					    </mtr>
    					</mtable>
    					<mo>}</mo>

## Крепкий пробел

a b

## Крепкий пробел

    			<math>
    				<mi>a</mi>
    				<mspace
    					width="400px"
    					height="150px"
    					depth="150px"
    				/>
    				<mi>b</mi>
    			</math>

## Крепкий пробел

    			<math>
    				<mi>a</mi>
    				<mspace
    					width="400px"
    					height="150px"
    					depth="150px"
    				/>
    				<mi>b</mi>
    			</math>

## Но зачем?

x = − b ± b 2 − 4 ⁢ a ⁢ c 2 ⁢ a

## MathML?

## Формат файлов MML

    			<math xmlns="http://www.w3.org/1998/Math/MathML">
    				<mrow>
    					<msup>
    						<mi>x</mi>
    						<mn>2</mn>
    					</msup>
    					<mo>+</mo>
    					<mi>y</mi>
    				</mrow>
    			</math>

## MathML в HTML

    			<p>
    				<math>
    					<mrow>
    						<msup>
    							<mi>x</mi>
    							<mn>2</mn>
    						</msup>
    						<mo>+</mo>
    						<mi>y</mi>
    					</mrow>
    				</math>
    			</p>

## MathML Core

`<annotation>` `<annotation-xml>` `<maction>` `<math>` `<merror>` `<mfrac>` `<mi>` `<mmultiscripts>` `<mn>` `<mo>` `<mover>` `<mpadded>` `<mphantom>` `<mprescripts>` `<mroot>` `<mrow>` `<ms>` `<mspace>` `<msqrt>` `<mstyle>` `<msub>` `<msubsup>` `<msup>` `<mtable>` `<mtd>` `<mtext>` `<mtr>` `<munder>` `<munderover>` `<semantics>`

30 элементов

## MathML 4.0

`<a>` `<abs>` `<and>` `<annotation>` `<annotation-xml>` `<apply>` `<approx>` `<arg>` `<bind>` `<bvar>` `<card>` `<cartesianproduct>` `<cbytes>` `<ceiling>` `<cerror>` `<ci>` `<cn>` `<codomain>` `<compose>` `<condition>` `<conjugate>` `<cs>` `<csymbol>` `<curl>` `<declare>` `<degree>` `<determinant>` `<diff>` `<divergence>` `<divide>` `<domain>` `<domainofapplication>` `<emptyset>` `<eq>` `<equivalent>` `<exists>` `<exp>` `<factorial>` `<factorof>` `<floor>` `<fn>` `<forall>` `<gcd>` `<geq>` `<grad>` `<gt>` `<ident>` `<image>` `<imaginary>` `<img>` `<implies>` `<in>` `<int>` `<intersect>` `<interval>` `<inverse>` `<lambda>` `<laplacian>` `<lcm>` `<leq>` `<limit>` `<list>` `<ln>` `<log>` `<logbase>` `<lowlimit>` `<lt>` `<maction>` `<maligngroup>` `<malignmark>` `<math>` `<matrix>` `<matrixrow>` `<max>` `<mean>` `<median>` `<menclose>` `<merror>` `<mfenced>` `<mfrac>` `<mfraction>` `<mglyph>` `<mi>` `<min>` `<minus>` `<mlabeledtr>` `<mlongdiv>` `<mmultiscripts>` `<mn>` `<mo>` `<mode>` `<moment>` `<momentabout>` `<mover>` `<mpadded>` `<mphantom>` `<mprescripts>` `<mroot>` `<mrow>` `<ms>` `<mscarries>` `<mscarry>` `<msgroup>` `<msline>` `<mspace>` `<msqrt>` `<msrow>` `<mstack>` `<mstyle>` `<msub>` `<msubsup>` `<msup>` `<mtable>` `<mtd>` `<mtext>` `<mtr>` `<munder>` `<munderover>` `<neq>` `<none>` `<not>` `<notin>` `<notprsubset>` `<notsubset>` `<ol>` `<oma>` `<omatp>` `<omattr>` `<omb>` `<ombind>` `<ombvar>` `<ome>` `<omf>` `<omforeign>` `<omi>` `<omr>` `<oms>` `<omstr>` `<omv>` `<or>` `<otherwise>` `<outerproduct>` `<partialdiff>` `<piece>` `<piecewise>` `<plus>` `<power>` `<product>` `<prsubset>` `<quotient>` `<real>` `<reln>` `<rem>` `<root>` `<scalarproduct>` `<sdev>` `<selector>` `<semantics>` `<sep>` `<set>` `<setdiff>` `<share>` `<sin>` `<span>` `<subset>` `<sum>` `<svg>` `<table>` `<td>` `<tendsto>` `<times>` `<tr>` `<transpose>` `<union>` `<uplimit>` `<variance>` `<vector>` `<vectorproduct>` `<xor>`

около 180 элементов

## 2013 ☠️ 2023

10 тёмных лет без MathML в Chrome

## Baseline

Уже стал newly available 12 января 2023
Скоро станет widely available 12 июля 2025

## MathJax

## KaTeX

## В коде

## Инлайн

Taking into account that the Euclidean distance between two points A and B is (A x−B x)2+(A y−B y)2+(A z−B z)2, our formula for point vs. sphere collision detection would work out like so…

## Инлайн

    <p>Taking into account that the Euclidean distance
    between two points <em>A</em> and <em>B</em> is
    <math> … </math>, our formula for point vs. sphere
    collision detection would work out like so…</p>

`<math>` or `<math display="inline">`

## Блоком

The energy of each sample is calculated by dividing the sample's value by the highest-intensity encodable value, squaring the result, and then multiplying by the duration of the sample in seconds.

duration×(sample_level max_level)2

## Блоком

    <p>The energy of each sample is calculated by dividing
    the sample's value by the highest-intensity encodable
    value, squaring the result, and then multiplying by
    the duration of the sample in seconds.</p>
    <math display="block">
    	…
    </math>

## Сегодня на MDN

    Taking into account that the Euclidean distance between
    two points _A_ and _B_ is <math><msqrt><mrow><mo stretchy="false">(</mo>
    <msub><mi>A</mi><mi>x</mi></msub><mo>−</mo><msub><mi>B</mi><mi>x</mi></m
    sub><msup><mo stretchy="false">)</mo><mn>2</mn></msup><mo>+</mo><mo stre
    tchy="false">(</mo><msub><mi>A</mi><mi>y</mi></msub><mo>−</mo><msub><mi>
    B</mi><mi>y</mi></msub><msup><mo stretchy="false">)</mo><mn>2</mn></msup
    ><mo>+</mo><mo stretchy="false">(</mo><msub><mi>A</mi><mi>z</mi></msub><
    mo>−</mo><msub><mi>B</mi><mi>z</mi></msub><msup><mo stretchy="false">)</
    mo><mn>2</mn></msup></mrow></msqrt></math> our formula for point vs.
    sphere collision detection would work out like so…

## Когда-нибудь на MDN

    Taking into account that the Euclidean distance between
    two points _A_ and _B_ is <ma-th>\sqrt{(A_x - B_x)^2 +
    (A_y - B_y)^2 + (A_z - B_z)^2}</ma-th>, our formula
    for point vs. sphere collision detection would
    work out like so…

## Когда-нибудь на MDN

    Taking into account that the Euclidean distance between
    two points _A_ and _B_ is <ma-th>\sqrt{(A_x - B_x)^2 +
    (A_y - B_y)^2 + (A_z - B_z)^2}</ma-th>, our formula
    for point vs. sphere collision detection would
    work out like so…

## ma-th?

Спокойствие, это просто кастомный элемент

1 − e − n 1 - e^{-n}

## Аннотация

    			<math>
    				<semantics>
    					<mrow> … </mrow>
    					<annotation encoding="application/x-tex">
    						1-e^{-n}
    					</annotation>
    				</semantics>
    			</math>

a 2 + b 2 = c 2

    			a^2 + b^2 = c^2

[ a c e b d f 0 0 1 ]

    \begin{bmatrix}
    a & c & e \\
    b & d & f \\
    0 & 0 & 1
    \end{bmatrix}

## LaTeX

    			<annotation encoding="application/x-tex">
    				\begin{aligned}
    				ax^2 + bx + c &= 0 \
    				ax^2 + bx &= -c \
    				x^2 + \frac{b}{a}x &= -\frac{c}{a} & \text{\color{red} \small Divide out leading coefficient.} \
    				x^2 + \frac{b}{a}x + \left(\frac{b}{2a}\right)^2 &= \frac{-c(4a)}{a(4a)} + \frac{b^2}{4a^2} & \text{\color{red} \small Complete the square.} \
    				\left(x + \frac{b}{2a}\right)\left(x + \frac{b}{2a}\right) &= \frac{b^2 - 4ac}{4a^2} & \text{\color{red} \small Discriminant revealed.} \
    				\left(x + \frac{b}{2a}\right)^2 &= \frac{b^2 - 4ac}{4a^2} \
    				x + \frac{b}{2a} &= \sqrt{\frac{b^2 - 4ac}{4a^2}} \
    				x &= \frac{-b}{2a} \pm \{C} \sqrt{\frac{b^2 - 4ac}{4a^2}} & \text{\color{red} \small There's the vertex formula.} \
    				x &= \frac{-b \pm \{C}\sqrt{b^2 - 4ac}}{2a}
    				\end{aligned}
    			</annotation>

Yuriy Bogdanov

## Выводы

- Внезапно, есть язык разметки MathML для математики
- Если вы используете MathJax, KaTeX или картинки, подумайте про MathML
- Веб-платформа полна спрятанных сокровищ ✨

∫t=2 17 2 9 d t(t+1 2 3 4)2+1=2 9∫u=5 3 35 3 3 4 d u u 2+1=1 3 3[arctan u]u=5 3 35 3

## Спасибо!