Adding Fonts to MathJax

[Pete Otaqui]

Hi,

is there a mechanism by which I can force MathJax to use a custom
WebFont which I want to provide? Assuming it's not as simple as a
config value, how would one go about it?


To give some background: I'm looking at rebuilding a MathML based
Flash application with MathJax. The existing system was built using a
custom font (FWIW its a sans-serif font with unusual character
modifications).

Ideally I would actually like to use the same font with MathJax
handling the rendering. What would I need to do to generate the kind
of metadata and svg / png files that you have for the current Tex
fonts?


Thanks for your time,

Pete

[Davide P. Cervone]

> is there a mechanism by which I can force MathJax to use a custom
> WebFont which I want to provide? Assuming it's not as simple as a
> config value, how would one go about it?

It is not just a config file change, as you need to provide MathJax
with data about the font glyphs, and you must provide the fonts in a
variety of formats (including the image fonts).

There are tools in the Mathjax-dev archive (https://github.com/mathjax/MathJax-dev
) that I used to create the fonts used by MathJax, but there is
virtually no documentation, and little effort has gone into making
them work for others than myself on my own installation. There would
be some work to do to get them to handle your own fonts, I expect.
See the MathJax-dev/fonts directory for the code.

Since you already have your own font created, you would probably not
need to use the OTF directory, but you would need to convert your
fonts to three forms: EOT, OTF, and SVG. There are tools there for
doing that, or you could use one of the web sites that do that for you
(e.g., http://www.fontsquirrel.com/).

Then you would need to use the AFM directory to make the data files
needed by MathJax. You should copy the TeX sub-directory and edit the
files to suit your needs. In particular, the config.pl file will need
to be modified, as it is specific to the TeX fonts. This will create
the data needed for the unpacked/jax/output/HTML-CSS/fonts directory,
except for the fontdata.js file. That you have to create by hand
(though the pre-loaded font data comes from the fontdata.js file
created in the AFM directory). It is the heart of the font system for
your fonts, and contains information about the names of the various
font files, the stretchy delimiters you have available, what fonts
correspond to the various mathvariant values, and how to remap glyphs
from one location to another. This is all pretty complicated and
tedious, and (unfortunately) completely undocumented. This will
probably be the stumbling block for you; you do have two examples,
however; the STIX and the TeX data files, so that might help, but note
that the STIX fonts are not web based, and so they don't have the
complications of setting up the CSS for that.

Finally, the IMG directory will let you make the images for the font.
I don't remember if this is set up to work with non-TeX fonts or not,
so it may need more work for that.

Anyway, that's the story on fonts for MathJax. It is not a task for
the faint of heart.

Davide

[ansh...@gmail.com]

Hi Davide

I am looking into the possibility of adding my own SVG paths to the file for the missing glyphs.

So I went through this post and the one talking about how the SVG glyphs are represented and 

used by MathJax (https://groups.google.com/forum/#!msg/mathjax-dev/eABv7H5AfU4/9YIH4le-qwAJ).

I have some idea about fonts but by no means am I an expert. I downloaded the scripts from MathJax dev. 

Do I need to get .svg with the path for the glyph? Or will the tools convert them for me? Where do I add this svg?

If I need to put the font files in some folder, then which files (extension) and in which folders?

I am sorry I am kind of asking noob questions but I tried playing around with stuff but mostly failed.

Thanks for your time and effort!

Regards,

Anshul

[Frédéric WANG]

Hi Anshul,

First, I think you might want to try my MathJax-dev fork:

https://github.com/fred-wang/MathJax-dev

as MathJax/MathJax-dev is currently really configured for Davide's
system and I'm not sure someone else can use it. I'm assuming you're
using a UNIX system.

To build the fonts, first copy the configuration file:

cp default.cfg custom.cfg

Install the dependencies mentioned in that file and if necessary modify
the paths. Be sure to specify FONTDIR and MATHJAXDIR (note that the
content of MATHJAXDIR will be edited by the script, so you'd better use
a local test directory). Then you can build the fonts with the command

make fonts

That may take some time and will probably not succeed the first time,
unless you have installed all the dependencies. If that fails, you might
need to do "make clean" and rebuild everything again after having
installed the missing dependencies.

The TeX fonts are created in

fonts/OTF/TeX

and converted to SVG paths in

fonts/SVG/TeX

So in theory, you only need to modify the fonts/OTF/TeX and the SVG
paths will be created and installed. See for example

https://github.com/fred-wang/MathJax-dev/tree/mathjax-horizontal-braces

about how I did that for the braces. Basically, I created new glyphs in
fonts/OTF/TeX/lib/Extra.otf using fontforge and modify
fonts/OTF/TeX/makeFF accordingly.

The whole system is not really convenient and that might not be easy to
add your glyphs, but hopefully you'll be able to do something. Anyway,
that will still be helpful for me if you test my MathJax-dev fork :-)

On 06/06/2013 21:33, ansh...@gmail.com wrote:
> Hi Davide
>
> I am looking into the possibility of adding my own SVG paths to the
> file for the missing glyphs.
> So I went through this post and the one talking about how the SVG
> glyphs are represented and
> used by MathJax
> (https://groups.google.com/forum/#!msg/mathjax-dev/eABv7H5AfU4/9YIH4le-qwAJ

> <https://groups.google.com/forum/#%21msg/mathjax-dev/eABv7H5AfU4/9YIH4le-qwAJ>).

>
> I have some idea about fonts but by no means am I an expert. I
> downloaded the scripts from MathJax dev.
> Do I need to get .svg with the path for the glyph? Or will the tools
> convert them for me? Where do I add this svg?
> If I need to put the font files in some folder, then which files
> (extension) and in which folders?
>
> I am sorry I am kind of asking noob questions but I tried playing
> around with stuff but mostly failed.
> Thanks for your time and effort!
>
> Regards,
> Anshul

--
Fr�d�ric Wang
maths-informatique-jeux.com/blog/frederic

[ansh...@gmail.com]

Hey Fred

Thanks for that awesome post! I was able to build the entire thing on my Ubuntu machine. 

Here are a couple of additional pointers for people that might help:

• As Fred mentions about the custom.cfg, copy it and edit it. Make sure you install all the dependencies.
  ttf22eot might require adding a stddef.h header file depending on your system to build successfully.
  
  
• You might have to install some tex/latex packages like:
  texlive-fonts-extra, 
  texlive-fonts-extra-doc, 
  texlive-fonts-recommended, 
  texlive-fonts-recommended-doc, and 
  tipa 

I had a few questions about the whole idea of adding your own fonts and I made a post about it here:

https://groups.google.com/forum/?fromgroups=#!topic/mathjax-users/1J0Gx7XbCQ8

Would appreciate your opinion on these questions (minus the ones that you have already answered).

The biggest question that I have about the whole project is, why not STIX fonts?
I have read a few answers from Davide but they seemed old. Are there any major issues?
STIX fonts cover a lot more unicodes, seem to be updated and maintained by the scientific community. 

I know they are no design people but they do know their math :-) 

Thanks and regards,

Anshul

Fr�d�ric Wang
maths-informatique-jeux.com/blog/frederic

[Frédéric WANG]

On 19/06/2013 16:39, dei...@gmail.com wrote:
> Hi, I need to render symbol rotated True -
> http://unicode-table.com/en/#22A8 (like
> http://unicode-table.com/en/#2568) in formulae.
> Is it possible to add it somehow or must I modify font and generate it
> via e.g. https://github.com/fred-wang/MathJax-dev
>
> Thanks in advance

> Hi Fred,
>
> I've successfully generated MathJax with new character but I don't
> know how to map it e.g. to \something.
> Could somebody help me?
>
> Thanks in advance.
You can use macro definitions
(http://docs.mathjax.org/en/latest/tex.html#defining-tex-macros) and the
unicode command
(http://docs.mathjax.org/en/latest/tex.html#unicode-support). So for example

\def\rotatedTrue\unicode{x22A8}

Also, you may want to try e.g. the STIX fonts that should have this
character, I guess?

--
Frédéric Wang
maths-informatique-jeux.com/blog/frederic

[Frédéric WANG]

On 20/06/2013 15:05, dei...@gmail.com wrote:
>
> I think it's not what I want.
> I don't know what is the background of MathJax, but I want rotated
> true character in all browsers and in any situation. \unicode{xxxxx}
> shows default characters, but I want my own modified character to show.
> I modified MathJax-dev-master/fonts/OTF/TeX/lib/Extra.otf at E000.
> Next I modified MathJax-dev-master/fonts/OTF/TeX/makeFF:
> $extra{'Size4'} = {
> braceext => [
> 'Open("lib/Extra.otf")',
> 'Select(0u5F)','Copy()',
> 'Open("otf/MathJax_Size4-Regular.otf")',
> 'Select(0uE154)','Paste()',
> ],
> rtrue => [
> 'Open("lib/Extra.otf")',
> 'Select(0uE000)','Copy()',
> 'Open("otf/MathJax_Size4-Regular.otf")',
> 'Select(0uE000)','Paste()',
> ],
> };
> Maybe I'm doing something wrong. It would be nice to see some examples
> how to do it right.
What you want is to copy the MathJax_Main-Regular.otf at the position
0x22A8. You need to modify MathJax-dev-master/fonts/OTF/TeX/makeFF but
that may be a bit different that what I've done for the braces (copied
in MathJax_Size4). Unfortunately I don't have time to check the details
and explain for the moment, sorry. Then you should rebuild the whole
stuff and copy the fonts and data into your MathJax installation. With
that installation you will then be able to use \unicode{xxxxx}, as I
suggested.

--
Frédéric Wang
maths-informatique-jeux.com/blog/frederic

[Frédéric WANG]

On 20/06/2013 15:11, Fr�d�ric WANG wrote:
> What you want is to copy the MathJax_Main-Regular.otf at the position
> 0x22A8.

to copy the *glyph in* MathJax_Main-Regular.otf at the position 0x22A8.

[dei...@gmail.com]

Thank you for answers,
I was able to build modified MathJax by modifying makeFF:
  models => [
    'Open("lib/Extra.otf")',
    'Select(0uE000)','Copy()', # 0uE000 contains rotated True char
    'Open("otf/MathJax_Main-Regular.otf")',
    'Select(0u22A8)','Paste()',
  ],

And it works (I use \vDash) except SVG rendering mode - I don' know why.

Also when I install stix-fonts it renders non-rotated True :(

On Thursday, June 20, 2013 3:12:53 PM UTC+2, fred wrote:

On 20/06/2013 15:11, Fr�d�ric WANG wrote:
> What you want is to copy the MathJax_Main-Regular.otf at the position
> 0x22A8.
to copy the *glyph in* MathJax_Main-Regular.otf at the position 0x22A8.


--

[Frédéric WANG]

On 21/06/2013 10:33, dei...@gmail.com wrote:
> Thank you for answers,
> I was able to build modified MathJax by modifying makeFF:
> models => [
> 'Open("lib/Extra.otf")',
> 'Select(0uE000)','Copy()', # 0uE000 contains rotated True char
> 'Open("otf/MathJax_Main-Regular.otf")',
> 'Select(0u22A8)','Paste()',
> ],
>
> And it works (I use \vDash) except SVG rendering mode - I don' know why.
>

OK, glad to hear you figured it out. The build system I wrote does not
handle very well updates... You'll probably need to go in fonts/SVG/TeX,
do a "make clean" and "make", "make install" again. As usual, be sure to
clear your browser cache before trying again.

> Also when I install stix-fonts it renders non-rotated True :(

Is it a bug in the STIX fonts? You can disable local STIX fonts by
setting availableFonts to ["TeX"]:
docs.mathjax.org/en/latest/options/HTML-CSS.html