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