CODEWITHSUNDEEP
htmluser-interfacemathml
LordLing
LordLing

Reputation: 331

MathML in HTML5: changing math font

Let's say I have an HTML5 document with some MathML in it. I set the font of the body of the page but it doesn't change the font used for MathML characters:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Example of MathML embedded in an HTML5 file</title>
    <meta charset="utf-8" />
  </head>
  <body style="font-family: courier;">
    Quadratic formula
    <math><mrow>
      <mi>x</mi>
      <mo>=</mo>
      <mfrac>
        <mrow>
          <mo form="prefix">−</mo>
          <mi>b</mi>
          <mo>&PlusMinus;</mo>
          <msqrt>
            <msup>
              <mi>b</mi>
              <mn>2</mn>
            </msup>
            <mo>−</mo>
            <mn>4</mn>
            <mo>&InvisibleTimes;</mo>
            <mi>a</mi>
            <mo>&InvisibleTimes;</mo>
            <mi>c</mi>
          </msqrt>
        </mrow>
        <mrow>
          <mn>2</mn>
          <mo>&InvisibleTimes;</mo>
          <mi>a</mi>
        </mrow>
      </mfrac>
    </mrow></math>
  </body>
</html>

This will display the text "Quadratic formula" in courier but the MathML stays in the default page font. How can I change the font used for MathML?

Upvotes: 2

Views: 6295

Answers (2)

albert
albert

Reputation: 8153

it renders courier in jsfiddle here: http://jsfiddle.net/jalbertbowdenii/8VKJg/ what browser/operating system are you using?

Including MathJax.js in the fiddle renders this correctly:


<script src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML"
async>

</script>
jsfiddle with MathJax.js rendering correctly

Upvotes: 1

net.uk.sweet
net.uk.sweet

Reputation: 12431

You should probably read this document on the Mozilla Developer Network. I'm guessing the following paragraph is applicable in your case:

Mathematical formulas make use of various symbols represented by specific Unicode characters. Mozilla can display any of these symbols provided suitable Unicode fonts are installed. Furthermore, in accordance with the W3C CSS2 recommendation on fonts, authors can specify an ordered list of particular fonts which they prefer (using the font-family property of CSS), with the assurance that Mozilla's font engine will hunt for alternate fonts whenever their specified fonts are not found on a particular user's system.

One of the Mozilla MathML developers seems to blog quite regularly. There are two recent posts which will be of interest to you:

  1. Installation of mathematical fonts
  2. About mathematical fonts

The upshot seems to be that, in order to guarantee decent rendering of MathML, you need your users to install either MathJax, STIX or Asana Math fonts.

Upvotes: 4

Related Questions