test-mathml-css

MathML in this page:

n=0+xnn!\sum_{n=0}^{+\infty} \frac{x^n}{n!}

a2+x3

MathML as live sample:

mathmltest

HTML Content

<p><math display="block"><semantics><mrow><munderover><mo>∑</mo><mrow><mi>n</mi><mo>=</mo><mn>0</mn></mrow><mrow><mo>+</mo><mn>∞</mn></mrow></munderover><mfrac><msup><mi>x</mi><mi>n</mi></msup><mrow><mi>n</mi><mo>!</mo></mrow></mfrac></mrow><annotation encoding="TeX">\sum_{n=0}^{+\infty} \frac{x^n}{n!}</annotation></semantics></math></p>
<p><math><mfrac><mi>a</mi><msqrt><mn>2</mn></msqrt></mfrac><mo>+</mo><msup><mi>x</mi><mn>3</mn></msup></math></p>

CSS Content

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/*
  https://github.com/fred-wang/mathml.css

  This CSS stylesheet is a simplified version of the "MathML for CSS Profile"
  (http://www.w3.org/TR/mathml-for-css/) without CSS table rules that had only
  been implemented in Presto and using new CSS3 selectors and flexboxes.

  We know from Opera's experience that relying exclusively on a fixed set of
  CSS rules to do math layout is not reasonable. This stylesheet is only
  intended to provide some fallback to browsers without MathML support in order
  to make basic mathematical constructions readable, without claim of rendering
  quality.

  This stylesheet must not be loaded in browsers that have MathML support or
  it will mess up the native rendering. You can load this mathml.css file
  conditionally by doing some UA string sniffing:
  https://developer.mozilla.org/en-US/docs/Web/MathML/Authoring#noMathML
*/
   
@namespace "http://www.w3.org/1998/Math/MathML";

/* math */
math {
    display: inline;
    text-indent: 0;
}
math[display="block"] {
    display: block;
    text-align: center;
}

/* fraction */
mfrac {
    display: inline-table;
    vertical-align: middle;
    border-collapse: collapse;
}
mfrac > * {
    display: table-row;
}
mfrac:not([linethickness="0"]) > *:first-child {
    border-bottom: solid thin;
}

/* sub/sup scripts */
msub > *:nth-child(2), msubsup > *:nth-child(2),
mmultiscripts > *:nth-child(2n+2),
mmultiscripts > mprescripts ~ *:nth-child(2n+3) {
    font-size: 0.8em;
    vertical-align: sub;
}
msup > *:nth-child(2), msubsup > *:nth-child(3),
mmultiscripts > *:nth-child(2n+3),
mmultiscripts > mprescripts ~ *:nth-child(2n+2) {
    font-size: 0.8em;
    vertical-align: super;
}
mprescripts:after {
    content: ";";
}

/* under/over scripts */
munder, mover, munderover {
    display: inline-flex;
    flex-direction: column;
}
munder > *:nth-child(2), munderover > *:nth-child(2) {
    font-size: 0.8em;
    order: +1;
}
mover > *:nth-child(2), munderover > *:nth-child(3) {
    font-size: 0.8em;
    order: -1;
}
munder {
    vertical-align: text-top;
}
mover {
    vertical-align: text-bottom;
}
munderover {
    vertical-align: middle;
}

/* roots */
msqrt, mroot {
    display: inline-flex;
    margin-left: .5em;
    vertical-align: middle;
    border-top: solid thin;
}
msqrt:before, mroot:before {
    margin-left: -.5em;
    content: "\221A";
}
mroot > *:nth-child(2) {
    margin-right: .25em;
    margin-left: -.75em;
    font-size: 0.8em;
    order: -1;
}

/* menclose */
menclose {
  display: inline-table;
  border-collapse: separate;
  border-spacing: 0.4ex 0;
}
menclose[notation*="top"], menclose[notation*="actuarial"] {
  border-top: solid thin;
}
menclose[notation*="bottom"], menclose[notation*="madruwb"] {
    border-bottom: solid thin;
}
menclose[notation*="right"], menclose[notation*="actuarial"],
menclose[notation*="madruwb"] {
    border-right: solid thin;
}
menclose[notation*="left"] {
    border-left: solid thin;
}
menclose[notation*="box"], menclose[notation*="roundedbox"],
menclose[notation*="circle"] {
    border: solid thin;
}
menclose[notation*="roundedbox"] {
    border-radius: 15%;
}
menclose[notation*="circle"] {
    border-radius: 50%;
}
menclose[notation*="horizontalstrike"] {
    text-decoration: line-through;
}

/* table */
mtable {
    display: inline-table;
    vertical-align: middle;
}
mtr {
    display: table-row;
}
mtd {
    display: table-cell;
    padding: 0 0.5ex;
}

/* token elements */
mspace {
    margin: .2em;
}
mi {
    font-style: italic;
}
mo {
    margin-right: .2em;
    margin-left: .2em;
}
ms:before, ms:after {
    content:"\0022";
}
ms[lquote]:before {
    content: attr(lquote);
}
ms[rquote]:after {
    content: attr(rquote);
}

/* mathvariants */
[mathvariant="bold"], [mathvariant="bold-italic"],
[mathvariant="bold-sans-serif"], [mathvariant="sans-serif-bold-italic"] {
    font-weight: bold;
    font-style: normal;
}
[mathvariant="monospace"] {
    font-family: monospace;
    font-style: normal;
}
[mathvariant="sans-serif"],
[mathvariant="bold-sans-serif"], [mathvariant="sans-serif-italic"],
[mathvariant="sans-serif-bold-italic"] {
    font-family: sans-serif;
    font-style: normal;
}
[mathvariant="italic"], [mathvariant="bold-italic"],
[mathvariant="sans-serif-italic"], [mathvariant="sans-serif-bold-italic"] {
    font-style: italic;
}
[mathvariant="normal"] {
    font-style: normal;
}

/* mphantom */
mphantom {
    visibility: hidden;
}

/* merror */
merror {
  outline: solid thin red;
}
merror:before {
  content: "Error: ";
}

/* annotations */
annotation, annotation-xml {
    font-family: monospace;
    display: none;
}
math:hover > semantics > *:first-child,
math:hover > semantics > *:first-child {
    display: none;
}
math:hover annotation {
    display: inline;
}

JavaScript Content

function removeCSSFallback()
{
  var ua = navigator.userAgent;
  var isGecko = ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1 && ua.indexOf('Trident') === -1;
  var isWebKit = ua.indexOf('AppleWebKit') > -1 && ua.indexOf('Chrome') === -1;
  if (isGecko || isWebKit) {
    document.head.removeChild(document.querySelector("style"));
  } else {
    alert("MathML Not Supported!");
  }
}

window.addEventListener("DOMContentLoaded", removeCSSFallback, false);

 

Document Tags and Contributors

 Contributors to this page: fred.wang
 Last updated by: fred.wang,