G Sample CSS Stylesheet for MathML (Non-Normative)

Overview: Mathematical Markup Language (MathML) Version 2.0
Previous: F Operator Dictionary (Non-normative)
Next: H Glossary (Non-normative)
 
G Sample CSS Stylesheet 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 stylesheet rules which a MathML renderer should include in its default stylesheet 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 stylesheet 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 desling 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 {  
}

Overview: Mathematical Markup Language (MathML) Version 2.0
Previous: F Operator Dictionary (Non-normative)
Next: H Glossary (Non-normative)