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

Overview: Mathematical Markup Language (MathML) Version 2.0 (2nd Edition)
Previous: F Operator Dictionary
Next: H Glossary
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 {
    }

Overview: Mathematical Markup Language (MathML) Version 2.0 (2nd Edition)
Previous: F Operator Dictionary
Next: H Glossary