Skip to content

Can MathJax use font xxxx?

Jump to bottom Edit New page
Davide P. Cervone edited this page May 28, 2013 · 3 revisions

From https://groups.google.com/d/msg/mathjax-users/PjcC7lqbNGs/sl4FIUTKGTYJ

Hi,

Is it possible to have MathJax output math that looks like Arial? It's for simple math (high school) only.

Thanks

I have tried a couple of times to write responses to your post -- the problem is that I have two different responses, neither of which are going to help you much. There is a good answer and a bad answer, and even though your post is brief, you seem to be looking for the bad answer. Both answers start with "Yes, but..."

Bad answer: "Yes, but it is rather deep, grungy internal configuration, and I don't know the details." I'm sure it is possible to configure MathJax to look for Arial as an internal font (rather than STIX, which is what MathJax usually looks for internally), and force it to use the internal Arial rather than web fonts or images. But I don't know exactly which configuration parameter(s) to change in order to accomplishnall of this.

Good answer: "Yes, but don't do it anyway." I know this isn't what you want to hear, but it's the right answer. There are several problems with using an internal Arial font rather than the fonts MathJax uses by default. First of all, if you plan on having users read the materials on their own computers, then you would be relying on them also installing Arial (which does not come with Microsoft products anymore). More fundamentally, though, sans-serif fonts like Arial and Helvetica aren't very good choices for math expressions. The primary issue is the distinction between math italic and text italic. There is a difference between math italic and text italic, so that there is a visual difference between variable names (math italic) and emohasized surrounding material (text italic). Fonts like Arial often form their italic faces mostly by slanting the normal medium- weight roman face. But math italic should be more upright than text italic. If the main difference is the slant, then the more upright math italic becomes too much like the normal roman face. There are other potential problems with Arial, such as whether it supports stretchy characters like parentheses and brackets around large compound fractions, but recent Unicode versions of Arial should address these problems -- again if you can count on your readers having the current version installed.

So even though it is possible, I would strongly advise against it. MathJax is set up to use internal STIX fonts if they are available, web fonts if they can be loaded from the server, and images as a fallback if nothing else is available. All three of these choices give a rather similar look for most users.

Tom has already mentioned most of the important points. MathJax needs a considerable amount of data to properly handle a font (including information about the bounding boxes of each of the characters, what characters are available in the font, what characters to combine to make stretchy characters, and so on). In fact, "font" is a little misleading, since it usually requires several different fonts to make mathematical typesetting possible (for example the STIX fonts are really 29 separate fonts, and the MathJax web fonts comprise 26 separate files). So asking to use Arial as the font is not really something that will work.

It is possible to specify a font for an individual character via

\style{font-family:Arial}{x} + \style{font-family:Arial}{1}

but this is pretty verbose, and although you can make a macro to help, it has an important problem: MathJax doesn't know the size of the characters in the font, and so won't be able to place accents, superscripts and other layout properly for the letters in this font. It simply assumes a default height and depth (it can determine the width) of .8em and .2em (which should cover most characters, but is too large for many). Although it would be possible to have MathJax make better guesses for things like alphabetic letters, that is really the reason that MathJax has detailed information about the fonts it uses.

I suspected you were really only worried about the letters and numbers (not all the other mathematical characters), which you confirmed below. In that case, there is some hope. MathJax does have a web-based sans-serif font, so if you just want sans-serif but it doesn't have to be Arial, then MathJax can accommodate that. For example

{\sf x + 1}

will typeset the x and 1 in the sans-serif (non-italic) font. This is probably sufficient to do what you want, but there are some things this won't affect, like \sin and \lim and other such macros that are defined to use the roman font. If you don't care about those, then

<script type="text/x-mathjax-config">
MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
  var TEX = MathJax.InputJax.TeX;
  var PREFILTER = TEX.prefilterMath;
  TEX.Augment({
    prefilterMath: function (math,displaymode,script) {
      return PREFILTER.call(TEX,"\\\\sf{"+math+"}",displaymode,script);
    }
  });
});
</script>

placed before the script that loads MathJax.js would insert \sf{...} around every TeX expression. Note, however, that this will not use italics as it should be for the mathematics, and it only works if your input is in TeX; if you are using MathML this won't help.

There is another approach that could be used to solve these two problems. Instead of attacking the problem from the input side, you could try to accomplish it from the output side. For example, you could tell the HTML-CSS output jax to use the MathJax sans-serif font, when possible, in place of its seriffed font. The following accomplishes that:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "HTML-CSS": {availableFonts: ["TeX"]},
         MMLorHTML: {prefer: "HTML"}
});
MathJax.Hub.Register.StartupHook("HTML-CSS Jax Ready",function () {
  var VARIANT = MathJax.OutputJax["HTML-CSS"].FONTDATA.VARIANT;
  VARIANT["normal"].fonts.unshift("MathJax_SansSerif");
  VARIANT["bold"].fonts.unshift("MathJax_SansSerif-bold");
  VARIANT["italic"].fonts.unshift("MathJax_SansSerif-italic");
  VARIANT["-tex-mathit"].fonts.unshift("MathJax_SansSerif-italic");
});
MathJax.Hub.Register.StartupHook("SVG Jax Ready",function () {
  var VARIANT = MathJax.OutputJax.SVG.FONTDATA.VARIANT;
  VARIANT["normal"].fonts.unshift("MathJax_SansSerif");
  VARIANT["bold"].fonts.unshift("MathJax_SansSerif-bold");
  VARIANT["italic"].fonts.unshift("MathJax_SansSerif-italic");
  VARIANT["-tex-mathit"].fonts.unshift("MathJax_SansSerif-italic");
});
</script>

placed before the script that loads MathJax.js would tell the HTML-CSS (and the SVG) output jax to use the appropriate sans-serif fonts as the first choices for the normal, bold, and italic mathvariants, effectively making variables be italic sans-serif and numbers being upright sans-serif. This affects all letters, even those in \lim, \sin, etc., so that solves both issues from above. The changes above are only for the web-based TeX fonts, so this won't work if the STIX fonts are used, which is why we set the availableFonts to include only the TeX fonts. (It would be possible to set up the data for the STIX fonts as well, but it is harder, since STIX doesn't include a separate sans-serif font but rather uses the math alphabetic characters in Unicode plane 1. To get this to work you would have to set up a remapping of the letters and numbers to the sans-serif math alphabet, which is more complicated.)

The trade-off with this approach is that is works only for HTML-CSS and SVG output, not the NativeMML output, which is why MMLorHTML is configured to always select HTML-CSS output. (Note that the \sf approach would work with NativeMML output, since the mathvariants are included in the input directly.)

So those are the possibilities as I see them. The last one may be the best choice, but you will have to decide on which trade-offs you want to make.

Davide

Thanks for all the info. Setting HTML-CSS output jax to use the MathJax sans-serif font got me a font that indeed resembles the Arial that we're looking for.

I just installed 2.0 and during that process came up with another (dirty?) solution approach that works more or less. In the config file we use TeX-AMS_HTML.js I changed the following settings to the MathJax.OutputJax["HTML-CSS"] line:

... availableFonts: [],preferredFont:"TeX",webFont:"",imageFont:"",undefinedFamily:"'Arial Unicode MS',serif", ...

I´ll have to test it with proper font sizes, but I think it get me as close as I can get.

What do you think, is this a viable solution?

You should not edit the config file directly. That will make it harder to upgrade in the future. Rather, you should use in-line configuration to adjust the parameters:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  "HTML-CSS": {
    availableFonts: [],
    preferredFonts: "TeX",
    webFont:"",
    imageFont:"",
    undefinedFamily:"'Arial Unicode MS',serif"
  }
});
</script>

Put this before the script that loads MathJax.

What you have done here is disable all of MathJax's fonts and forced everything to be undefined. That means you will get no stretchy characters, square roots probably won't work properly, and all the letters will be considered to be .8em tall and .2em deep, so superscripts and subscripts are likely to be misplaced. So while MathJax will render the math as best it can under these conditions, the results will not be very pleasing. It will also be less efficient, since MathJax will try to measure every character (since it doesn't have any data about the font in use). It also means that you are relying on the user having the Arial Unicode MS font (otherwise it falls back on the default serif font -- don't you want the sans-serif font instead?).

I don't recommend this approach.

Although this may work OK in some simple cases, the results will not be very good in more complicated ones. I think the substitution of the MathJax sans-serif font is a better solution.

Davide

Add a custom footer
Add a custom sidebar
Clone this wiki locally