Is it possible to have MathJax output math that looks like Arial?

[Max Cohen]

Hi,

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

Thanks

[leathrum]

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.

[Max Cohen]

Thanks a lot for your elaborate answer.
Reading it a follow-up question (or rephrasing) popped up into my
mind.
Is it possible to let the maths look like Arial? (Especially the
variables and numbers)
Maybe through a webfont or a by using (or creating/editing) a
particular (sprite) web image type?

thanks

[Davide P. Cervone]

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 nor really something that will work.

It is possible 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

[leathrum]

Have you tried a local installation of the STIX fonts? You can
download them from:

http://sourceforge.net/projects/stixfonts/

You may find them more to your liking than the MathJax web fonts.
MathJax will use local STIX fonts if it can find them.

(How you install the fonts depends on what kind of a system you are
using.)

[leathrum]

Davide:

This does raise a question that has been knocking around in the back
of my head for a little while: has anyone tried converting the STIX
OTF fonts to WOFF format? (and using them with MJ as web fonts?)
There are online utilities to do the conversions.

[Davide P. Cervone]

I think they are still too big to be useful that way. They need to be
broken up into smaller pieces. I've been in contact with them and
they are interested in doing that. There is also the licensing
question (is this legal), and it would be best to have a sanctioned
version that is broken up for web use.

Davide

[Senior Net]

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?

> >>> Is it possible to let the maths look likeArial? (Especially the

> >>> variables and numbers)
> >>> Maybe through a webfont or a by using (or creating/editing) a
> >>> particular (sprite) web image type?
>
> >>> thanks
>
> >>> On Feb 23, 9:07 pm, leathrum <leath...@jsu.edu> wrote:
>
> >>>> 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 forArialas an internal font (rather

> >>>> than STIX, which is what MathJax usually looks for internally), and

> >>>> force it to use the internalArialrather 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 internalArialfont 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 installingArial(which does not come with Microsoft

> >>>> products anymore).  More fundamentally, though, sans-serif fonts
> >>>> like

> >>>>Arialand 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 withArial, such as whether it supports

[Davide P. Cervone]

> 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.

OK, glad that worked for you.

> 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

[cohe...@gmail.com]

Thanksfor the help Davide, we´re going to take all options into consideration.

[tahir....@zeuslearning.com]

Hi,

I am using MathJax with MathML, i am creating a page or a paragraph or a question text where maths equation are surrounded with text, the style given to the text is font-family:tahoma; font-size:12px;

The size of the equation looks good, but the problem is the mathML equations looks bolder then the surrounding text. This maybe because the equation font is squeezing itself to fit into 12px font-size. 

How can i solve this problem? Please Help. 

Thanks

Tahir

[Peter Krautzberger]

Hi,

Please provide more information, in particular a live sample (either a page or something like jsfiddle) -- see the User Group guidelines for more information.

MathJax currently provides its own webfonts or uses locally installed STIX fonts -- neither of those will look like Tahoma so what you're seeing might just be expected behavior. But that's impossible to guess without a live sample.

Peter.

On Thu, Sep 5, 2013 at 8:13 PM, Ronald Chen <ronal...@gmail.com> wrote:

The mathjax display symbols of square root or vectors with a  bending line problem.

as shown below

It happens in Chrome ,and sometimes happens in Firefox.

How do  i fix it?

Ronald

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.