-
Notifications
You must be signed in to change notification settings - Fork 230
Guide: reducing size of a mathjax installation
While a complete MathJax installation is rather large, the MathJax footprint can be reduced, e.g., for inclusions in mobile apps or when targeting specific browsers.
Even though every app will have it's own needs, the basic process can be described.
The goal of this documentation is to allow developers to include MathJax efficiently in their projects.
To start from scratch, we grab a fresh MathJax copy from github; at time of writing this is the v2.3-latest
branch.
git clone https://github.com/mathjax/MathJax.git
git checkout -b v2.3-latest origin/v2.3-latest
In your clone you should expect the following content:
config/
docs/
extensions/
fonts/
images/
jax/
localization/
test/
unpacked/
LICENSE
MathJax.js
README.md
The size of the folder should be around 61MB.
Let's go through the folders.
-
config
-- this folder contains combined configuration files such asTeX-AMS-MML_HTMLorMML-full.js
-
docs
-- this folder contains information on the MathJax documentation -
extensions
-- this folder contains the MathJax extensions -
fonts
-- this folder contains all supported fonts, in multiple formats -
images
-- this folder contains two small images -
localization
-- this folder contains locales in different languages -
jax
-- this folder contains the core of MathJax, the javascript files for processing input and output. -
test
-- this folder contains a series of test files and samples (not to be confused with the MathJax test suite -
unpacked
-- this folder contains the uncompressed originals of the core MathJax files (config, extensions, jax and of course MathJax.js)
The three files are
.gitignore
-
LICENSE
-- a copy of the Apache license -
MathJax.js
-- the core JavaScript file README-branch.txt
README.md
bower.json
docs
test
unpacked
.gitignore
README-branch.txt
README.md
bower.json
Without these folders, the functionality of MathJax is not limited in any way. Keep in mind that the unpacked
folder is useful for debugging purposes.
MathJax offers a variety of options and a project can usually choose one and discard the rest.
- configurations in
config
The combined configuration files primarily designed to reduce load times by combining several components of MathJax into one file.
Since most projects will want just one customized MathJax configuration, the unused ones can be removed from config
. Where a combined configuration file is around 100-300KB, a not-combined configuration file might be a few hundred bytes.
Keep in mind that if MathJax is delivered over a network connection, a combined configuration file will perform better. If you can use one of these configuration file, keep it (and then you can remove other components included in the combined file). You can also build your own combined file with the MathJax Dev Tools.
- PNG-fonts in
fonts/HTML-CSS/TeX/png/
Today, all browser engines support webfonts. Therefore, the PNG-fonts are not technically necessary -- at ~29,000 files and 8.8MB this is a large reduction.
Note If you remove the PNG fonts, you should include imageFont:null
in your configuration to prevent font warning messages (cf. the HTML_CSS configuration documentation).
Note The MMLorHTML.js
configuration might still be useful, cf. its documentation.
Note For Gecko with local files, make sure to work around the same-origin policy, see the docs.
- Locales in `localization'
Most projects will prefer one language for the MathJax User Interface. In that case, all but one folder in localization
can be removed.
If English is the preferred language, then the entire folder can be removed (English strings are embedded in the source as fallbacks).
- Font formats
Most likely, fonts in the Web Open Fonts Format will be sufficient since WOFF is supported by all modern rendering engines. Therefore only fonts/HTML-CSS/FONTNAME/woff
is required and the other folders in each fonts/HTML-CSS/FONTNAME/
can be removed.
- Fonts options.
Most projects will only need one font (and by default, MathJax does not allow for the user to switch fonts).
Therefore, only one folder in fonts/HTML-CSS/
will be needed and the rest can be removed. Similarly, only one folder in jax/output/SVG/fonts
will be needed for SVG output.
Note Not all fonts provide the same level of character coverage. The STIX-web
fonts offer virtually complete Unicode coverage (and the largest file size). The TeX
fonts appear to have the smallest coverage but MathJax has built-in methods to cover more characters (by combining characters, e.g., quadrupal integrals, strike-through characters).
- Reducing input options.
Many projects focus on one input format, MathML, TeX, or asciimath. For example, an epub3 reader application such as Readium might restrict the input method to MathML since MathML is the only mathematical markup language that is part of the epub3 standard.
The input jax'es are stored in jax/input
and extraneous ones can be removed.
- Reducing output options.
Similarly, a project might prefer one of the output options (HTML-CSS, SVG or MathML). In that case, two folders can be removed from jax/output/
.
If SVG is used, the fonts
folder can be removed completely (the SVG output jax has its pseudo-fonts in jax/output/SVG/fonts
)
Note NativeMML output tweaks the MathML to work around Firefox/Geck and Safari/WebKit bugs and limitations. Keep in mind Gecko and WebKit have serious limitations in terms of MathML support and rendering quality (although Gecko can be considered production ready).
- Reducing extensions
Depending on the trimming so far, some MathJax extensions can be removed.
extensions/HTML-CSS/
-- contains extensions only used in conjunction with the HTML-CSS output.
extensions/MathML/
-- contains extensions only used in conjunction with the MathML input.
extensions/TeX/
-- contains extensions only used in conjunction with the TeX input.
extensions/asciimath2jax.js
-- the asciimath preprocessor
extensions/FontWarnings.js
-- should not be removed
extensions/HelpDialog.js
-- should not be removed
extensions/jsMath2jax.js
-- the jsmath preprocessor
extensions/MatchWebFonts.js
-- an extension to improve font size matching
extensions/MathEvents.js
-- should not be removed
extensions/MathMenu.js
-- should not be removed
extensions/MathZoom.js
-- should not be removed
extensions/mml2jax.js
-- the MathML input preprocessor
extensions/Safe.js
-- an extension for limiting potentially harmful input
extensions/tex2jax.js
-- the TeX/LaTeX input preprocessor
extensions/toMathML.js
-- an extension for generating MathML
Full size: ~61MB.
- Trimming I: ~43MB
- Trimming II: ~30MB
- Trimming III: ~5.5MB (reduced to
TeX
fonts) - Trimming IV: ~1.7MB (MathML Input + SVG Output using TeX fonts); zipped: ~700KB.