Математика в вебе

Hands on the orange typewriter in a park

$$v_1 = \sqrt{G {M \over R_0 + h}}$$

$$P(Y = 1|x) ={1 \over 1 + e^{-(w^Tx + b)}}$$

$$M_{ij} = \begin{cases} h^t_j I^C_i h_i, & \mbox{if } i \in v(j) \\ h^T_jI^c_j, & \mbox{if } j \in v(i) \\ 0, & \mbox{otherwise} \end{cases}$$

$$ A = \begin{bmatrix} w_0 A_0\\ w_1 A_1\\ \vdots\\ w_n A_n\\ \end{bmatrix}, b = \begin{bmatrix} w_0 b_0\\ w_1 b_1\\ \vdots\\ w_n b_n\\ \end{bmatrix}$$

😮

Latin vs Arabic vs Mirrored latin

Orange typewriter on a wooden table close-up

$$He \\H \cdot e \\H \times e$$

Сложности

Шрифт.
Двумерность и нестандартная компоновка.
Доступность.
Культурные особенности.

$$ Q(\lambda,\hat{\lambda}) = \\ \qquad\qquad\quad -\frac{1}{2} P{(O \mid \lambda )} \sum_s \sum_m \sum_t \gamma_m^{(s)} (t) \left( n \log(2 \pi ) \\ + \log \left| C_m^{(s)} \right| + \left( \mathbf{o}_t - \hat{\mu}_m^{(s)} \right) ^T C_m^{(s)-1} \left(\mathbf{o}_t - \hat{\mu}_m^{(s)}\right) \right)$$

TEX

MathML

Визуальная разметка

Токены
Лайаут

$$ \lim_{x\to 0}{\frac{e^x-1}{2x}} \overset{\left[\frac{0}{0}\right]}{\underset{\mathrm{H}}{=}} \\ \lim_{x\to 0}{\frac{e^x}{2}}={\frac{1}{2}}$$

Семантическая разметка

Базовые выражения
Операторы
Лайаут семантики
Разметка ошибок

$$ 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \\ \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad \text{for $|q|<1$}.$$

$${a \over b} = c$$

Визуальная разметка

					<mrow>
					  <mfrac>
					      <mrow>
								<mi> a </mi>
							</mrow>
							<mrow>
								<mi> b </mi>
							</mrow>
						</mfrac>
						<mo> = </mo>
						<mi> c </mi>
					</mrow>

Семантическая разметка

                    <apply><eq/>
                      <apply><divide/>
                          <ci>a</ci>
                          <ci>b</ci>
                      </apply>
                      <cn>0</cn>
                    </apply>

MathML vs LaTeX

					<mrow>
					  <mfrac>
					      <mrow>
								<mi> a </mi>
							</mrow>
							<mrow>
								<mi> b </mi>
							</mrow>
						</mfrac>
						<mo> = </mo>
						<mi> c </mi>
					</mrow>

$${a \over b} = c$$

Способы

нативная поддержка MathML
SVG
HTML и CSS

$$ \begin{align} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \quad \nabla \cdot \vec{\mathbf{B}} & = 0 \end{align}$$

MathJax

Форматы ввода

LaTeX
MathML
AsciiMath

$$ \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix}$$

Форматы вывода

HTML
SVG
MathML

$$ \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \end{vmatrix}$$

						<script type="math/tex; mode=display" id="MathJax-Element-8">
                          M_{ij} =
						  \begin{cases} h^t_j I^C_i h_i, & \mbox{if } i \in v(j)
						  \\ h^T_jI^c_j, & \mbox{if } j \in v(i)
						  \\ 0, & \mbox{otherwise}
						  \end{cases}
						</script>

Конфигурация

                    <script type="text/javascript"
                      src="path-to-MathJax/MathJax.js?config=default">
                    </script>

Конфигурация

                    MathJax.Hub.Config({
                      config: ["MMLorHTML.js"],
                      jax: ["input/TeX","input/MathML","input/AsciiMath",
                          "output/HTML-CSS", "output/NativeMML", "output/PreviewHTML"
                      ],
                      extensions: ["tex2jax.js","mml2jax.js","asciimath2jax.js",
                          "MathMenu.js", "MathZoom.js", "fast-preview.js",
                          "AssistiveMML.js", "a11y/accessibility-menu.js"],
                      "HTML-CSS":: {
                           { fonts: ["TeX"] }
                      }
                    });

Wikipedia

$$\int_{a}^{b} f(x) dx$$

					<img src="https://wikimedia.org/api/..."
						class="mwe-math-fallback-image-inline"
						aria-hidden="true" style="vertical-align: -3.838ex; width:9.544ex; height:9.176ex;"
						alt="{\displaystyle \int \limits _{a}^{b}f(x)dx}"
					/>

WolframAlpha

$$\int_{0}^{\pi} sin(x) dx = 2$$

						<img
							alt="integral_0^π sin(x) dx = 2"
							img-on-load="doPodLoad(results, pod)" onerror="this.style.color = 'black'" 
							onload="this.style.opacity='1'" class="ng-isolate-scope" 
							src="http://www4f.wolframalpha.com/Calculate/..." 
						/>

Katex

                    katex.render("c = \\pm\\sqrt{a^2 + b^2}\\in\\RR", 
                      element,
                      {
                          displayMode: true,
                          macros: {
                                  "\\RR": "\\mathbb{R}"
                      }
                    });

Математика в вебе