# 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)