Skip to content

Instantly share code, notes, and snippets.

@pkra

pkra/deep_labels.html

Last active March 30, 2017 09:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pkra/3dc56add129faa2def1452602985983d to your computer and use it in GitHub Desktop.
Save pkra/3dc56add129faa2def1452602985983d to your computer and use it in GitHub Desktop.
Download ZIP
Deep Labels, cf. codepen.io/pkra/pen/xRBZjq
Raw
deep_labels.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="https://production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" />
<link rel="mask-icon" type="" href="https://production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" />
<title>CodePen - Deep labels</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body translate="no" >
<fieldset>
<legend>Choose MathJax renderer</legend>
<input id="html" type="radio" name="renderer" value="html" checked>
<label for="html">HTML output</label><br>
<input id="svg" type="radio" name="renderer" value="svg">
<label for="svg">SVG output</label><br>
<button id="mj">Process with MathJax</button>
</fieldset>
<h2>Real world content</h2>
<p>The examples below are not optimized in terms of the MathML itself (i.e., improving the structure and markup such as inserting mrows or invisible operators). The goal was take regular, in-the-wild samples and improve them with ARIA markup. (Note that one change that was made is the insertion of hacks for screenreader hints. You can compare with the original source.)</p>
<p>Some test runs are available <a href="https://www.youtube.com/playlist?list=PL1ATLkPgTEBqYOb7CYz7Kv6gNHh_pXbQq">as a YouTube playlist</a></p>
<p>Older versions are available via <a href="https://gist.github.com/pkra/3dc56add129faa2def1452602985983d">GitHub's gist</a></p>
<ol>
<li>
<math display="block">
<mtable columnalign="right left right left right left right left right left right left" rowspacing="3pt" columnspacing="0em 2em 0em 2em 0em 2em 0em 2em 0em 2em 0em" displaystyle="true">
<mtr>
<mtd>
<mrow>
<mover aria-label="derivative of x ">
<mi>x</mi>
<mo>&#x02D9;<!-- ˙ --></mo>
</mover>
</mrow>
</mtd>
<mtd>
<mi></mi>
<mo aria-label="is equal to ">=</mo>
<mi aria-label="sigma ">&#x03C3;<!-- σ --></mi>
<mrow>
<mo aria-label="left parenthesis " stretchy="false">(</mo>
<!-- Test for SVG: content as label; genreally works in VoiceOver but lots of image/group noise -->
<mi aria-label="y ">y</mi>
<mo aria-label="minus ">&#x2212;<!-- − --></mo>
<mi aria-label="x ">x</mi>
<mo aria-label="right parenthesis " stretchy="false">)</mo>
</mrow>
</mtd>
</mtr>
<mtr>
<mtd>
<mrow>
<mover aria-label="derivative of y ">
<mi>y</mi>
<mo>&#x02D9;<!-- ˙ --></mo>
</mover>
</mrow>
</mtd>
<mtd>
<mi></mi>
<mo aria-label="is equal to ">=</mo>
<mi aria-label="rho ">&#x03C1;<!-- ρ --></mi>
<mi aria-label="x ">x</mi>
<mo aria-label="minus ">&#x2212;<!-- − --></mo>
<mi aria-label="y ">y</mi>
<mo aria-label="minus ">&#x2212;<!-- − --></mo>
<mi aria-label="x ">x</mi>
<mi aria-label="z ">z</mi>
</mtd>
</mtr>
<mtr>
<mtd>
<mrow>
<mover aria-label="derivative of z ">
<mi>z</mi>
<mo>&#x02D9;<!-- ˙ --></mo>
</mover>
</mrow>
</mtd>
<mtd>
<mi></mi>
<mo aria-label="is equal to ">=</mo>
<mo aria-label="minus ">&#x2212;<!-- − --></mo>
<mi aria-label="beta ">&#x03B2;<!-- β --></mi>
<mi aria-label="z ">z</mi>
<mo aria-label="plus ">+</mo>
<mi aria-label="x ">x</mi>
<mi aria-label="y ">y</mi>
</mtd>
</mtr>
</mtable>
</math>
</li>
<li>
<math display="block">
<mrow aria-label="P of E ">
<mi>P</mi>
<mo>(</mo>
<mi>E</mi>
<mo>)</mo>
</mrow>
<mo aria-label="equals">=</mo>
<mrow aria-label="n choose k">
<mrow>
<mo>(</mo>
<mfrac linethickness="0" >
<mi>n</mi>
<mi>k</mi>
</mfrac>
<mo>)</mo>
</mrow>
</mrow>
<msup>
<mi aria-label="p ">p</mi>
<!--"k" will (usually?) be ignored by AT (not combining accessible name with content for span). Could a redefined role=math help?-->
<mi aria-label="to the power of k">k</mi>
</msup>
<msup>
<mrow>
<mo aria-label="left paren ">(</mo>
<mn aria-label="one ">1</mn>
<mo aria-label="minus ">&#x2212;<!-- − --></mo>
<mi aria-label="p ">p</mi>
<mo aria-label="right paren ">)</mo>
</mrow>
<mrow aria-label="to the power of n minus k">
<mi>n</mi>
<mo>&#x2212;<!-- − --></mo>
<mi>k</mi>
</mrow>
</msup>
</mrow>
</math>
</li>
<li>
<math display="block">
<mrow>
<msup>
<mrow>
<mo>(</mo>
<mrow>
<munderover>
<mo aria-label="sum from ">&#x2211;<!-- ∑ --></mo>
<mrow>
<mi aria-label="k ">k</mi>
<mo aria-label="equals ">=</mo>
<mn aria-label="one ">1</mn>
</mrow>
<mi aria-label="through n">n</mi>
</munderover>
<msub aria-label="a sub k ">
<mi>a</mi>
<mi>k</mi>
</msub>
<msub aria-label="b sub k ">
<mi>b</mi>
<mi>k</mi>
</msub>
</mrow>
<mo>)</mo>
</mrow>
<mrow aria-label="squared ">
<mspace width="negativethinmathspace" />
<mspace width="negativethinmathspace" />
<mn>2</mn>
</mrow>
</msup>
<mo aria-label="is less or equal than ">&#x2264;<!-- ≤ --></mo>
<mrow>
<!--HACK testing nasty hack to avoid empty span with label (which AT should ignore) -->
<mrow aria-label="the product of "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mo>(</mo>
<mrow>
<munderover>
<mo aria-label="sum from ">&#x2211;<!-- ∑ --></mo>
<mrow>
<mi aria-label="k ">k</mi>
<mo aria-label="equals ">=</mo>
<mn aria-label="one ">1</mn>
</mrow>
<mi aria-label="through n ">n</mi>
</munderover>
<msubsup aria-label="a sub k, squared ">
<mi>a</mi>
<mi>k</mi>
<mn>2</mn>
</msubsup>
</mrow>
<mo>)</mo>
</mrow>
<mrow>
<mo>(</mo>
<mrow>
<munderover>
<mo aria-label="sum from">&#x2211;<!-- ∑ --></mo>
<mrow>
<mi aria-label="k ">k</mi>
<mo aria-label="equals ">=</mo>
<mn aria-label="one ">1</mn>
</mrow>
<mi aria-label="through n">n</mi>
</munderover>
<msubsup aria-label="b sub k, squared ">
<mi>b</mi>
<mi>k</mi>
<mn>2</mn>
</msubsup>
</mrow>
<mo>)</mo>
</mrow>
</math>
</li>
<li>
<math display="block">
<mrow>
<mfrac>
<mn aria-label="one over ">1</mn>
<mrow>
<mrow>
<mo aria-label="left paren ">(</mo>
<msqrt aria-label="square root of ">
<mi aria-label="phi ">&#x03D5;<!-- ϕ --></mi>
<msqrt aria-label="square root of five ">
<mn>5</mn>
</msqrt>
</msqrt>
<mo aria-label="minus ">&#x2212;<!-- − --></mo>
<mi aria-label="phi ">&#x03D5;<!-- ϕ --></mi>
<mo aria-label="right paren ">)</mo>
</mrow>
<msup>
<mi aria-label="e ">e</mi>
<mrow>
<mrow aria-label="to the power of "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mfrac aria-label="two fifth ">
<mn>2</mn>
<mn>5</mn>
</mfrac>
<mi aria-label="pie ">&#x03C0;<!-- π --></mi>
</mrow>
</msup>
</mrow>
</mfrac>
<mo aria-label="is equal to ">=</mo>
<mn aria-label="one ">1</mn>
<mo aria-label="plus ">+</mo>
<mrow aria-label="continued fraction" ><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mfrac>
<msup>
<mi aria-label="e ">e</mi>
<mrow>
<mrow aria-label="to the power of "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mo aria-label="minus ">&#x2212;<!-- − --></mo>
<mn aria-label="two ">2</mn>
<mi aria-label="pie ">&#x03C0;<!-- π --></mi>
</mrow>
</msup>
<mrow>
<mrow aria-label="over "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mn aria-label="one ">1</mn>
<mo aria-label="plus ">+</mo>
<mrow aria-label="fraction "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mfrac>
<msup>
<mi aria-label="e ">e</mi>
<mrow class="MJX-TeXAtom-ORD">
<mrow aria-label="to the power of "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mo aria-label="minus ">&#x2212;<!-- − --></mo>
<mn aria-label="four ">4</mn>
<mi aria-label="pie ">&#x03C0;<!-- π --></mi>
</mrow>
</msup>
<mrow>
<mrow aria-label="over "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mn aria-label="one ">1</mn>
<mo aria-label="plus ">+</mo>
<mrow aria-label="fraction "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mfrac>
<msup>
<mi aria-label="e ">e</mi>
<mrow class="MJX-TeXAtom-ORD">
<mrow aria-label="to the power of "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mo aria-label="minus ">&#x2212;<!-- − --></mo>
<mn aria-label="six ">6</mn>
<mi aria-label="pie ">&#x03C0;<!-- π --></mi>
</mrow>
</msup>
<mrow>
<mrow aria-label="over "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mn aria-label="one ">1</mn>
<mo aria-label="plus ">+</mo>
<mrow aria-label="fraction"></mrow>
<mfrac>
<msup>
<mi aria-label="e ">e</mi>
<mrow class="MJX-TeXAtom-ORD">
<mrow aria-label="to the power of "><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mo aria-label="minus ">&#x2212;<!-- − --></mo>
<mn aria-label="eight ">8</mn>
<mi aria-label="pie ">&#x03C0;<!-- π --></mi>
</mrow>
</msup>
<mrow>
<mrow aria-label="over"><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mn aria-label="one ">1</mn>
<mo aria-label="plus ">+</mo>
<mo aria-label="… ">&#x2026;<!-- … --></mo>
</mrow>
</mfrac>
</mrow>
</mfrac>
</mrow>
</mfrac>
</mrow>
</mfrac>
</mrow>
</math>
</li>
<li>
<math display="block">
<mrow>
<mrow>
<mrow aria-label="sum of"><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mn>1</mn>
<mo>+</mo>
<mrow></mrow>
<mfrac>
<msup aria-label="q squared">
<mi>q</mi>
<mn>2</mn>
</msup>
<mrow>
<mrow aria-label="over"><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mo stretchy="false">(</mo>
<mn>1</mn>
<mo>&#x2212;<!-- − --></mo>
<mi>q</mi>
<mo stretchy="false">)</mo>
</mrow>
</mfrac>
<mo>+</mo>
<mfrac>
<msup aria-label="q to the six">
<mi>q</mi>
<mn>6</mn>
</msup>
<mrow>
<mrow aria-label="over"><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mo stretchy="false">(</mo>
<mn>1</mn>
<mo>&#x2212;<!-- − --></mo>
<mi>q</mi>
<mo stretchy="false">)</mo>
<mo stretchy="false">(</mo>
<mn>1</mn>
<mo>&#x2212;<!-- − --></mo>
<msup aria-label="q squared">
<mi>q</mi>
<mn>2</mn>
</msup>
<mo stretchy="false">)</mo>
</mrow>
</mfrac>
<mo>+</mo>
<mo>&#x22EF;<!-- ⋯ --></mo>
</mrow>
<mo>=</mo>
<mrow>
<munderover>
<mo aria-label="product from">&#x220F;<!-- ∏ --></mo>
<mrow class="MJX-TeXAtom-ORD">
<mi>j</mi>
<mo>=</mo>
<mn>0</mn>
</mrow>
<mrow class="MJX-TeXAtom-ORD">
<mrow aria-label="to"><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mi mathvariant="normal">&#x221E;<!-- ∞ --></mi>
</mrow>
</munderover>
<mfrac>
<mn>1</mn>
<mrow>
<mrow aria-label="over"><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mrow>
<mo stretchy="false">(</mo>
<mn>1</mn>
<mo>&#x2212;<!-- − --></mo>
<msup>
<mi>q</mi>
<mrow class="MJX-TeXAtom-ORD">
<mrow aria-label="to the power of"><mpadded width="-1em"><mphantom><mtext>M</mtext></mphantom></mpadded></mrow>
<mn>5</mn>
<mi>j</mi>
<mo>+</mo>
<mn>2</mn>
</mrow>
</msup>
<mo stretchy="false">)</mo>
</mrow>
<mrow>
<mo stretchy="false">(</mo>
<mn>1</mn>
<mo>&#x2212;<!-- − --></mo>
<msup>
<mi>q</mi>
<mrow class="MJX-TeXAtom-ORD">
<mrow aria-label="to the power of"></mrow>
<mn>5</mn>
<mi>j</mi>
<mo>+</mo>
<mn>3</mn>
</mrow>
</msup>
<mo stretchy="false">)</mo>
</mrow>
</mrow>
</mfrac>
</mrow>
<mrow>
<mo>,</mo>
<mspace width="1em" />
<mspace width="1em" />
<mrow>
<mtext>for&#xA0;</mtext>
<mrow class="MJX-TeXAtom-ORD">
<mrow class="MJX-TeXAtom-ORD">
<mo aria-label="absolute value of" stretchy="false">|</mo>
</mrow>
<mi>q</mi>
<mrow class="MJX-TeXAtom-ORD">
<mo role="presentation" stretchy="false">|</mo>
</mrow>
<mo aria-label="less than">&lt;</mo>
<mn>1</mn>
</mrow>
</mrow>
<mo>.</mo>
</mrow>
</mrow>
</math>
</li>
<li>
<p>Finally, while display equations look good for a page of samples, the ability to mix math and text in a paragraph is also important. This expression <math>
<mrow>
<msqrt>
<mn>3</mn>
<mi>x</mi>
<mo aria-label="minus">&#x2212;<!-- − --></mo>
<mn>1</mn>
</msqrt>
<mo aria-label="plus">+</mo>
<msup>
<mrow>
<mo stretchy="false">(</mo>
<mn>1</mn>
<mo>+</mo>
<mi>x</mi>
<mo stretchy="false">)</mo>
</mrow>
<mn aria-label="squared">2</mn>
</msup>
</mrow>
</math> is an example of an inline equation. As you see, MathJax equations can be used this way as well, without unduly disturbing the spacing between lines.</p>
</li>
<li>
<math display="block">
<mrow>
<msub>
<mrow class="MJX-TeXAtom-ORD">
<mi mathvariant="bold">V</mi>
</mrow>
<mn>1</mn>
</msub>
<mo>&#x00D7;<!-- × --></mo>
<msub>
<mrow class="MJX-TeXAtom-ORD">
<mi mathvariant="bold">V</mi>
</mrow>
<mn>2</mn>
</msub>
<mo>=</mo>
<mrow>
<mo>|</mo>
<mtable rowspacing="4pt" columnspacing="1em">
<mtr>
<mtd>
<mrow class="MJX-TeXAtom-ORD">
<mi mathvariant="bold">i</mi>
</mrow>
</mtd>
<mtd>
<mrow class="MJX-TeXAtom-ORD">
<mi mathvariant="bold">j</mi>
</mrow>
</mtd>
<mtd>
<mrow class="MJX-TeXAtom-ORD">
<mi mathvariant="bold">k</mi>
</mrow>
</mtd>
</mtr>
<mtr>
<mtd>
<mfrac>
<mrow>
<mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
<mi>X</mi>
</mrow>
<mrow>
<mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
<mi>u</mi>
</mrow>
</mfrac>
</mtd>
<mtd>
<mfrac>
<mrow>
<mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
<mi>Y</mi>
</mrow>
<mrow>
<mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
<mi>u</mi>
</mrow>
</mfrac>
</mtd>
<mtd>
<mn>0</mn>
</mtd>
</mtr>
<mtr>
<mtd>
<mfrac>
<mrow>
<mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
<mi>X</mi>
</mrow>
<mrow>
<mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
<mi>v</mi>
</mrow>
</mfrac>
</mtd>
<mtd>
<mfrac>
<mrow>
<mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
<mi>Y</mi>
</mrow>
<mrow>
<mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
<mi>v</mi>
</mrow>
</mfrac>
</mtd>
<mtd>
<mn>0</mn>
</mtd>
</mtr>
</mtable>
<mo>|</mo>
</mrow>
</mrow>
</math>
</li>
<li>
<math display="block">
<mtable columnalign="right left right left right left right left right left right left" rowspacing="3pt" columnspacing="0em 2em 0em 2em 0em 2em 0em 2em 0em 2em 0em" displaystyle="true">
<mtr>
<mtd>
<mi mathvariant="normal">&#x2207;<!-- ∇ --></mi>
<mo>&#x00D7;<!-- × --></mo>
<mrow class="MJX-TeXAtom-ORD">
<mover>
<mrow class="MJX-TeXAtom-ORD">
<mi mathvariant="bold">B</mi>
</mrow>
<mo stretchy="false">&#x2192;<!-- → --></mo>
</mover>
</mrow>
<mo>&#x2212;<!-- − --></mo>
<mspace width="thinmathspace" />
<mfrac>
<mn>1</mn>
<mi>c</mi>
</mfrac>
<mspace width="thinmathspace" />
<mfrac>
<mrow>
<mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
<mrow class="MJX-TeXAtom-ORD">
<mover>
<mrow class="MJX-TeXAtom-ORD">
<mi mathvariant="bold">E</mi>
</mrow>
<mo stretchy="false">&#x2192;<!-- → --></mo>
</mover>
</mrow>
</mrow>
<mrow>
<mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
<mi>t</mi>
</mrow>
</mfrac>
</mtd>
<mtd>
<mi></mi>
<mo>=</mo>
<mfrac>
<mrow>
<mn>4</mn>
<mi>&#x03C0;<!-- π --></mi>
</mrow>
<mi>c</mi>
</mfrac>
<mrow class="MJX-TeXAtom-ORD">
<mover>
<mrow class="MJX-TeXAtom-ORD">
<mi mathvariant="bold">j</mi>
</mrow>
<mo stretchy="false">&#x2192;<!-- → --></mo>
</mover>
</mrow>
</mtd>
</mtr>
<mtr>
<mtd>
<mi mathvariant="normal">&#x2207;<!-- ∇ --></mi>
<mo>&#x22C5;<!-- ⋅ --></mo>
<mrow class="MJX-TeXAtom-ORD">
<mover>
<mrow class="MJX-TeXAtom-ORD">
<mi mathvariant="bold">E</mi>
</mrow>
<mo stretchy="false">&#x2192;<!-- → --></mo>
</mover>
</mrow>
</mtd>
<mtd>
<mi></mi>
<mo>=</mo>
<mn>4</mn>
<mi>&#x03C0;<!-- π --></mi>
<mi>&#x03C1;<!-- ρ --></mi>
</mtd>
</mtr>
<mtr>
<mtd>
<mi mathvariant="normal">&#x2207;<!-- ∇ --></mi>
<mo>&#x00D7;<!-- × --></mo>
<mrow class="MJX-TeXAtom-ORD">
<mover>
<mrow class="MJX-TeXAtom-ORD">
<mi mathvariant="bold">E</mi>
</mrow>
<mo stretchy="false">&#x2192;<!-- → --></mo>
</mover>
</mrow>
<mspace width="thinmathspace" />
<mo>+</mo>
<mspace width="thinmathspace" />
<mfrac>
<mn>1</mn>
<mi>c</mi>
</mfrac>
<mspace width="thinmathspace" />
<mfrac>
<mrow>
<mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
<mrow class="MJX-TeXAtom-ORD">
<mover>
<mrow class="MJX-TeXAtom-ORD">
<mi mathvariant="bold">B</mi>
</mrow>
<mo stretchy="false">&#x2192;<!-- → --></mo>
</mover>
</mrow>
</mrow>
<mrow>
<mi mathvariant="normal">&#x2202;<!-- ∂ --></mi>
<mi>t</mi>
</mrow>
</mfrac>
</mtd>
<mtd>
<mi></mi>
<mo>=</mo>
<mrow class="MJX-TeXAtom-ORD">
<mover>
<mrow class="MJX-TeXAtom-ORD">
<mn mathvariant="bold">0</mn>
</mrow>
<mo stretchy="false">&#x2192;<!-- → --></mo>
</mover>
</mrow>
</mtd>
</mtr>
<mtr>
<mtd>
<mi mathvariant="normal">&#x2207;<!-- ∇ --></mi>
<mo>&#x22C5;<!-- ⋅ --></mo>
<mrow class="MJX-TeXAtom-ORD">
<mover>
<mrow class="MJX-TeXAtom-ORD">
<mi mathvariant="bold">B</mi>
</mrow>
<mo stretchy="false">&#x2192;<!-- → --></mo>
</mover>
</mrow>
</mtd>
<mtd>
<mi></mi>
<mo>=</mo>
<mn>0</mn>
</mtd>
</mtr>
</mtable>
</math>
</li>
</ol>
<p><a href="http://cdn.mathjax.org/mathjax/latest/test/sample.html">Original Source</a></p>
<script>
var renderMath = function() {
var maths = document.querySelectorAll('math');
for (let i = 0; i < maths.length; i++) {
let mathy = maths[i];
let math = mathy.cloneNode(true);
let span = document.createElement('span');
span.setAttribute('style', 'visibility:hidden;');
span.appendChild(math);
// hack for IE11
span.innerHTML = span.innerHTML;
document.body.appendChild(span);
MathJax.Hub.Queue(['Typeset', MathJax.Hub, span]);
MathJax.Hub.Queue(function() {
let output = span.firstChild.nextSibling;
// hack for IE11
mathy.parentNode.insertBefore(output.cloneNode(true), mathy);
mathy.parentNode.removeChild(mathy);
document.body.removeChild(span);
});
}
}
window.MathJax = {
skipStartupTypeset: true,
"fast-preview": {
disable: true
},
"AssistiveMML": {
disabled: true
},
SVG: {
addMMLclasses: true,
useGlobalCache: false
},
AuthorInit: function() {
MathJax.Hub.Register.StartupHook("Begin", function() {
MathJax.Hub.Queue(
renderMath()
);
});
MathJax.Hub.Register.MessageHook("End Math", function() {
MathJax.Hub.Queue(function() {
let img = document.querySelectorAll('svg');
[].forEach.call(img, function(x) {
x.removeAttribute('role');
let descendants = x.querySelectorAll('*');
[].forEach.call(descendants, function(y){
if (!y.getAttribute('aria-label')) y.setAttribute('role', 'presentation');
// else y.setAttribute('role', 'figure') // would like to find a HACK role to avoid "graphics" in NVDA/IE11
})
});
});
});
}
};
var mj = function() {
var radio = document.getElementById('html');
var renderer = '';
if (radio.checked) renderer = 'CHTML';
else renderer = 'SVG'
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=MML_' + renderer + '-full';
document.getElementsByTagName('head')[0].appendChild(script);
this.setAttribute('disabled', true);
}
var button = document.getElementById('mj');
button.addEventListener("click", mj);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment