8.3 Using CSS with MathML

< Day Day Up >

All the examples used in the previous section used HTML element and attribute names, for the purpose of illustration. However, you can use a CSS stylesheet to control the appearance of any type of XML document. All that is needed is to define appropriate style rules that refer to the element and attribute names used in that document. In particular, you can use CSS style rules to specify how MathML expressions should be rendered. Style rules for MathML and XHTML can then be combined in a single stylesheet that can be used, for example, to control the appearance of an XHTML document that contains embedded MathML equations.

Some examples of effects you can achieve with a custom CSS stylesheet, include the following:

Display all equations in a document in a different font size or color
Choose a different scaling factor for the size of subscripts and superscripts
Assign a different meaning to the big and small values of the mathsize attribute
Associate a particular font family that contains the relevant glyphs with particular values of the mathvariant attribute

In this section, we give some examples of CSS rules involving MathML presentation markup. These rules illustrate how you can use a CSS stylesheet to control specific aspects of the display of MathML.

Display and Inline Mode

Mathematical formulas can be displayed in a Web page, in either inline or display form. Inline equations are integrated with the surrounding text, while display equations are typically shown in a separate block and aligned with the center of the page. These two modes are distinguished in MathML using the display attribute of the math element. This attribute has the value inline for inline equations, and block for display equations.

The following rule sets some style properties that are characteristic of inline equations:

    math[display="inline"] {        display: inline;         font-family: cmsy10, cmex10, Symbol, Times; }

This rule specifies that the contents of a math element whose display attribute has the value inline should be displayed using the cmsy10 or cmex10 fonts. These are part of the Computer Modern family of fonts, which is widely used in TeX and LaTeX documents. These fonts contain glyphs for a large number of symbols and special characters used in mathematical expressions. If these fonts are not available, then the Symbol font is used instead. This font also contains glyphs for Greek letters and other special characters. If the Symbol font is also not available, the Times font is used.

The following rule sets some style properties characteristic of display equations:

    math[display="block"] {     display: block;     text-align: center;      font-family: cmsy, cmex, Symbol, Times;}

In addition to specifying the font family, this rule assigns suitable values to the CSS properties display and text-align.

Style Attributes of Token Elements

There is a potential problem with using CSS stylesheets to control the appearance of Web documents that contain MathML. This is because the meaning carried by many mathematical symbols is closely related to the style in which they are rendered. For example, an italic letter might be used to indicate a variable or function name, a bold letter might indicate a vector, and a letter displayed in a Fraktur font might indicate a Lie algebra. As a result, style changes that are applied to a document purely for formatting reasons and inherited by the embedded MathML markup can change the meaning of the mathematical expression.

To avoid such unintended consequences of document-wide style changes, it is desirable to maintain a clean separation between the properties used to control the style of MathML expressions and the style of other content in an HTML document. To facilitate this goal, the MathML 2.0 specification introduces four new style attributes that can be used to set style properties in presentation markup (Table 8.1).

Table 8.1: New Style Attributes That Can Be Used to Set Style Properties in Presentation Markup
Name	Property Specified	Allowed Value
`mathbackground`	Background color	`#`rgb \| `#`rrggbb \| html-color name
`mathcolor`	Text color	`#`rgb \| `#`rrggbb \| html-color name
`mathsize`	Font size	`small` \| `normal` \| `big` \| number`v-unit`
`mathvariant`	Style variant	`#`rgb \| #`rrggbb` \| `html-color name`

Of these, the mathsize, mathcolor, and mathbackground attributes correspond closely to the font-size, color, and background-color property names in CSS. The mathvariant attribute is a composite of the CSS properties font-family, font-weight, and font-style. Some examples of CSS style rules involving these attributes are given in the sections that follow.

Size

The following rules define the mathsize attribute in terms of the CSS property font-size:

     math *.[mathsize="small"] {font-size: 80%}    math *.[mathsize="normal"] {font-size: 100%}     math *.[mathsize="big"] {font-size: 125%}

Each rule, in effect, implements a particular value of the mathsize attribute by specifying its effect on the font size. The numbers 80% and 125% are typical values for the change in font size corresponding to mathsize="small" and mathsize="big", respectively.

Color and Background

The following rules define the mathcolor attribute in terms of the CSS property color:

     math *.[mathcolor="black"] {color: black}    math *.[mathcolor="white"] {color: white}    math *.[mathcolor="red"] {color: red}    math *.[mathcolor="blue"] {color: blue }     math *.[mathcolor="green"] {color: green }

The following rules define the mathbackground attribute in terms of the CSS property background-color:

    math *.[mathbackground="black"] {          background-color: black}    math *.[mathbackground ="white"] {          background-color:white}    math *.[mathbackground ="red"] {            background-color:red}

You can include similar style rules for the other HTML color keywords, such as gray, yellow, maroon, purple, teal, and aqua.

Font Variants

The mathvariant attribute is defined in terms of its cumulative effect on the three CSS properties font-family, font-weight, and font-style. Here is a typical CSS rule for a particular value of mathvariant:

     math *.[mathvariant="bold-italic"] {    font-family: "Times", "Courier", serif;    font-weight: bold;     font-style: italic;}

This rule specifies the effect of setting mathvariant="sans-serif" on any MathML element:

     math *.[mathvariant="sans-serif"] {    font-family: "Helvetica", "Arial", sans-serif;    font-weight: normal;     font-style: normal;}

This rule uses the msbm font, which is part of the AMS font collection and includes double-struck characters:

     math *.[mathvariant="double-struck"] {    font-family: msbm;    font-weight: normal;     font-style: normal;}

This rule uses the eusb font, which is part of the AMS font collection and includes bold script characters:

     math *.[mathvariant="bold-script"] {    font-family: eusb;    font-weight: bold;     font-style: normal;}

This rule uses the eufb font, which is included in the AMS font collection and includes medium Fraktur characters:

     math *.[mathvariant="fraktur"] {    font-family: eufb;    font-weight: bold;     font-style: italic;}

Similar rules can be defined for all other values of the mathvariant attribute:

    normal, bold, italic, script, fraktur, bold-sans-serif, sans-serif-italic, and monospace.

Fractions and Radicals

When a fraction occurs in an inline position, its numerator and denominator are shown in a reduced size, typically 71% of the font size of the surrounding text. This behavior can be implemented using the following CSS style rule, which sets the font size for child elements of any mfrac element that is itself contained in a math element whose display attribute is set to inline. Here's an example:

    math[display="inline"] mfrac>* {font-size: 71%}

The following two rules show the effect of specifying the mathsize attribute inside an mfrac element (the statements enclosed in the /* … */ signs are CSS comments that explain how the values of the font size are calculated):

     math[display="inline"] mfrac>* [mathsize="big"]{    font-size: 80%} /* .80 = 71 times 1.25 */    math[display="inline"] mfrac>* [mathsize="small"]{     font-size: 57%} /* .57 = 71 times .80 */

The index of the root (the terms that appear outside the radical sign) is usually drawn at half the size of the base expression. This behavior can be implemented using the following style rules:

    mroot > *:first-child{font-size: 100%}    mroot > *{font-size: 50%}

The first rule applies to the first child of the mroot element; that is, the expression that appears inside the radical sign. The second rule then reduces the size of all children of the mroot element by 50%. The first rule overrides the second. Hence, the net result of both rules is to reduce the size of the expression outside the radical sign, while keeping the font size of the base expression unchanged.

The following set of rules defines how the contents of the mroot element should be scaled in response to different settings of the mathsize attribute:

     mroot > *:first-child[mathsize="big"]{font-size: 125%}    mroot > *[mathsize="big"]{    font-size: 62%} /* .62 = .5 times 1.25 */     mroot > *:first-child[mathsize="small"]{    font-size: 80%}    mroot > *[mathsize="small"]{     font-size: 40%} /* .40 = .5 times 0.80 */

Scripts and Limits

By convention, expressions that appear in a superscript position are typically shown in a reduced size, typically 71% of the font size of the base expression. You can use the following two CSS rules to implement this behavior in any MathML document:

    msub > *:first-child{font-size: 100%}    msub > *{font-size: 71%}

The first rule applies to the first child of the msub element; that is, the base expression. The second rule then reduces the size of all children of the msub element by 71%. The first rule overrides the second. Hence, the net result of both rules is to reduce the size of the superscript, while keeping the font size of the base expression unchanged.

The following rules define how the contents of the msub element should be scaled in response to different settings of the mathsize attribute:

     msub > *:first-child[mathsize="big"]{font-size: 125%}    msub > *[mathsize="big"]{     font-size: 89%} /*(.71 times 1.25)*/     msub > *:first-child[mathsize="small"]{font-size: 80%}    msub > *[mathsize="small"]{     font-size: 57%} /*(.71 times .80)*/

Similar rules can be defined for all the other script and limit elements, namely msup, msubsup, munder, mover, munderover, and mmultiscripts. For several MathML elements, the font size changes automatically as a consequence of a change in the value of the scriptlevel attribute. As discussed in Section 4.3, this is an attribute of the mstyle element, and a default value for it is inherited from its environment by every presentation element.

The default value of scriptlevel for most elements is 0. However, some elements, such as those representing scripts and limits, increase the value of scriptlevel in some of their child elements. Each increase in the value of scriptlevel by one reduces the font size of the expression by a constant amount, which is determined by the value of the scriptsizemultiplier attribute. The default value of this attribute is 0.71. This means that an element for which scriptlevel="1" will display its contents at a font size 71% smaller than normal text. Similarly, if scriptlevel="2", the font size will be reduced by 0.71 times 0.71, which is 50%. This behavior can be implemented by the following style rules:

    math *[scriptlevel="+1"]{font-size: 71%}    math *[scriptlevel="+2"]{font-size: 50%}

The following rules define the combined effect of changing the scriptlevel and mathsize attributes simultaneously:

     math *[scriptlevel="+1"][mathsize="big"] {    font-size: 89%} /*(.71 times 1.25)*/    math *[scriptlevel="+1"][mathsize="small"] {     font-size: 57%} /*(.71 times .80)*/     math *[scriptlevel="+2"][mathsize="big"] {    font-size: 62%} /*(.71 times .71 times 1.25)*/    math *[scriptlevel="+2"][mathsize="small"] {     font-size: 40%} /*(.71 times .71 times .80)*/

The examples in this section illustrate how you can use CSS style rules to control the details of how a MathML expression is rendered. Any good MathML rendering application will, of course, already have some basic style rules of the type shown here built in and will apply them automatically when displaying any document that contains MathML. But if you want to change the default behavior and customize the display of mathematical formulas for special contexts, it's useful to know how to control these rendering properties explicitly by means of a CSS stylesheet.

< Day Day Up >