Styling fractions
On the previous page, you may have noticed that the fraction font size was not exactly ideal for reading on a high resolution screen. The MathML MathJax library inherits the documents font size.
To counter this, the MathML standard allows styles to be used and applied to elements on their own, or on all elements in a calculation. To apply a style to a whole calculation use the following tags to surround all other elements:
<math><mstyle><mtext>x</mtext><mo>+</mo><mtext>y</mtext></mstyle></math> gives:
adding a bold-italic style to all elements within the code:
<math><mstyle mathvariant = "bold-italic"><mi>x</mi><mo>+</mo><mi>y</mi></mstyle></math> gives:
Adding a 'mathsize' style of 1.4 times the normal font size to all elements within the code:
<math><mstyle mathsize = "1.4em"><mtext>x</mtext><mo>+</mo><mtext>y</mtext></mstyle></math> gives:
The only issue you may face when wrapping all math elements within a <style> tag, is that elements which are already large enough will also be enlarged. To avoid this you can apply the styles to each element independently. For example the sum below has a font-size of 1.4em applied to it. The single number is also affected and looks too large compared to the fraction:
<math><mstyle mathsize = "1.4em"><mn>2</mn><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac></mstyle></math>
gives:
If we apply a style to only the fraction elements to enlarge those, this will look much better. The html templates font-size is well suited to having a "1.4em" size on the elements within fractions.
<math><mn>2</mn><mo>=</mo><mfrac><mn mathsize = "1.4em">1</mn><mn mathsize = "1.4em">2</mn></mfrac></mstyle></math>
gives:
