Search code examples
javascriptcssfontsmathjaxmathml

CSS for MathJaX?

When I use MathJax $\sum_{i=0}^n {n \choose i} D(i)$ gets converted into markup.
MathML still effectively uses Computer Modern - standard LaTeX font - whenever you want to render an equation. 

<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <munderover>
    <mo>&#x2211;<!-- ∑ --></mo>
    <mrow class="MJX-TeXAtom-ORD">
      <mi>i</mi>
      <mo>=</mo>
      <mn>0</mn>
    </mrow>
    <mi>n</mi>
  </munderover>
  <mrow class="MJX-TeXAtom-ORD">
    <mrow>
      <mo>(</mo>
      <mfrac linethickness="0">
        <mi>n</mi>
        <mi>i</mi>
      </mfrac>
      <mo>)</mo>
    </mrow>
  </mrow>
  <mi>D</mi>
  <mo stretchy="false">(</mo>
  <mi>i</mi>
  <mo stretchy="false">)</mo>
</math>

Are there ways to specify which font to render tokens like <mi> or <mo>. Let's say I'd like to use Kite One for the variables in my font, so as not to clash with the rest of my web site.

http://content.altfonts.com:81/img/K/I/Kite-Onea.png

Actually, the fonts look really nice. But how could I customize MathML if I needed to?

EDIT: I seem to be asking if Cascading Style Sheets exist for MathML

This question as considered off-topic for tex.stackexchange it may be a question for StackOverflow at this point

Solution

  • Sure. You just have to use the !important attribute in your CSS, as MathJaX will override it otherwise.

    Example:

    <!DOCTYPE html>
<html>
  <head>
    <title>MathJax TeX Test Page</title>
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
    </script>
    <script type="text/javascript"
        src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>
    <style type="text/css">
      .mi {
      font-family: 'Helvetica' !important;
      }

    </style>

  </head>
  <body>
    When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
    $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
  </body>
</html>