G Sample CSS Style Sheet for MathML (Non-Normative)

The Cascading Style Sheet sample given here is not normative. It is provided as a guide to illustrate the sort of CSS style sheet rules which a MathML renderer should include in its default style sheet in order to comply with both the CSS and MathML specifications. In particular, there is a need to provide rules to prevent the descent of CSS font rules into MathML expressions embedded in ambient text, and to provide support for the mathfamily, mathslant, mathweight, mathsize, mathcolor and mathbackground attributes.

We expect that implementation experience will allow us to provide a more authoritative default MathML style sheet in the future. In the interim, it is hoped that this illustrative sample will be helpful.

math, math[mode="inline"] {
  display: inline;
  font-family: CMSY10, CMEX10, Symbol, Times;
  font-style: normal;
}

math[mode="display"] {
  display: block;
  text-align: center;
  font-family: CMSY10, CMEX10, Symbol, Times;
  font-style: normal;
}

@media screen {  /* hide from old browsers */


/* Rules dealing with the various values of the "mathvariant" attribute: */

math *.[mathvariant="normal"] {
  font-family: "Times New Roman", Courier, Garamond, serif;
  font-weight: normal;
  font-style: normal;
}

math *.[mathvariant="bold"] {
  font-family: "Times New Roman", Courier, Garamond, serif;
  font-weight: bold;
  font-style: normal;
}

math *.[mathvariant="italic"] {
  font-family: "Times New Roman", Courier, Garamond, serif;
  font-weight: normal;
  font-style: italic;
}

math *.[mathvariant="bold-italic"] {
  font-family: "Times New Roman", Courier, Garamond, serif;
  font-weight: bold;
  font-style: italic;
}

math *.[mathvariant="double-struck"] {
  font-family: msbm;
  font-weight: normal;
  font-style: normal;
}

math *.[mathvariant="script"] {
  font-family: eusb;
  font-weight: normal;
  font-style: normal;
}

math *.[mathvariant="bold-script"] {
  font-family: eusb;
  font-weight: bold;
  font-style: normal;
}

math *.[mathvariant="fraktur"] {
  font-family: eufm;
  font-weight: normal;
  font-style: normal;
}

math *.[mathvariant="bold-fraktur"] {
  font-family: eufm;
  font-weight: bold;
  font-style: italic;
}

math *.[mathvariant="sans-serif"] {
  font-family: Arial, "Lucida Sans Unicode", Verdana, sans-serif;
  font-weight: normal;
  font-style: normal;
}

math *.[mathvariant="bold-sans-serif"] {
  font-family: Arial, "Lucida Sans Unicode", Verdana, sans-serif;
  font-weight: bold;
  font-style: normal;
}

math *.[mathvariant="sans-serif-italic"] {
  font-family: Arial, "Lucida Sans Unicode", Verdana, sans-serif;
  font-weight: normal;
  font-style: italic;
}

math *.[mathvariant="sans-serif-bold-italic"] {
  font-family: Arial, "Lucida Sans Unicode", Verdana, sans-serif;
  font-weight: bold;
  font-style: italic;
}

math *.[mathvariant="monospace"] {
  font-family: monospace
}


/* Rules dealing with "mathsize" attribute */

math *.[mathsize="small"] {
  font-size: 80%
}

math *.[mathsize="normal"] {
/*  font-size: 100%  - which is unnecessary */
}

math *.[mathsize="big"] {
  font-size:  125%
}

/*Set size values for the "base" children of script and limit schema to 
  distinguish them from the script or limit children:
*/

msub>*:first-child[mathsize="big"],
msup>*:first-child[mathsize="big"],
msubsup>*:first-child[mathsize="big"],
munder>*:first-child[mathsize="big"],
mover>*:first-child[mathsize="big"],
munderover>*:first-child[mathsize="big"],
mmultiscripts>*:first-child[mathsize="big"],
mroot>*:first-child[mathsize="big"] {
  font-size: 125%
}

msub>*:first-child[mathsize="small"],
msup>*:first-child[mathsize="small"],
msubsup>*:first-child[mathsize="small"],
munder>*:first-child[mathsize="small"],
mover>*:first-child[mathsize="small"],
munderover>*:first-child[mathsize="small"],
mmultiscripts>*:first-child[mathsize="small"],
mroot>*:first-child[mathsize="small"] {
  font-size: 80%
}

msub>*:first-child,
msup>*:first-child,
msubsup>*:first-child,
munder>*:first-child,
mover>*:first-child,
munderover>*:first-child,
mmultiscripts>*:first-child,
mroot>*:first-child {
  font-size: 100%
}

/*Set size values for the other children of script and limit schema (the 
  script and limit children) - include scriptlevel increment attribute?
*/

msub>*[mathsize="big"],
msup>*[mathsize="big"],
msubsup>*[mathsize="big"],
munder>*[mathsize="big"],
mover>*[mathsize="big"],
munderover>*[mathsize="big"],
mmultiscripts>*[mathsize="big"],
math[display="inline"] mfrac>*[mathsize="big"],
math *[scriptlevel="+1"][mathsize="big"] {
  font-size: 89%  /* (.71 times 1.25) */
}

msub>* [mathsize="small"],
msup>*[mathsize="small"],
msubsup>*[mathsize="small"],
munder>*[mathsize="small"],
mover>*[mathsize="small"],
munderover>*[mathsize="small"],
mmultiscripts>*[mathsize="small"],
math[display="inline"] mfrac>*[mathsize="small"],
math *[scriptlevel="+1"][mathsize="small"] {
  font-size: 57% /* (.71 times .80) */
}

msub>*,
msup>*,
msubsup>*,
munder>*,
mover>*,
munderover>*,
mmultiscripts>*,
math[display="inline"] mfrac>*,
math *[scriptlevel="+1"] {
  font-size: 71%
}

mroot>*[mathsize="big"] {
  font-size: 62%  /* (.50 times 1.25) */
}

mroot>*[mathsize="small"] {
  font-size: 40% /* (.50 times .80) */
}

mroot>* {
  font-size: 50%
}

/* Set size values for other scriptlevel increment attributes  */

math *[scriptlevel="+2"][mathsize="big"] {
  font-size: 63%  /* (.71 times .71 times 1.25) */
}

math *[scriptlevel="+2"][mathsize="small"] {
  font-size: 36% /* (.71 times .71 times .71) */
}

math *[scriptlevel="+2"] {
  font-size: 50%   /* .71 times .71 */
}

math *.[mathcolor="green"] {
  color: green
}

math *.[mathcolor="black"] {
  color: black
}

math *.[mathcolor="red"] {
  color: red
}

math *.[mathcolor="blue"] {
  color: blue
}

math *.[mathcolor="olive"] {
   color: olive
}

math *.[mathcolor="purple"] {
   color: purple
}

math *.[mathcolor="teal"] {
   color: teal
}

math *.[mathcolor="aqua"] {
   color: aqua
}

math *.[mathcolor="gray"] {
   color: gray
}

math *.[mathbackground="blue"] {
   background-color: blue
}

math *.[mathbackground="green"] {
   background-color: green
}

math *.[mathbackground="white"] {
   background-color: white
}

math *.[mathbackground="yellow"] {
   background-color: yellow
}

math *.[mathbackground="aqua"] {
   background-color: aqua
}

} /* Close "@media screen" scope */

@media aural {  
}