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 {  
}