In order to add LaTeX support (via KaTex) I have to vendor in some font files. While doing this I ran into two issues:
First:
My plan is to add the katex library as a dependency in packages.json, so that’ll be pulled in by npm and isn’t a problem. I also need to add some style resources (a couple of less files and font files), that get bundled into the bokeh css resources. My initial plan was to add a bokehjs/src/vendor/katex-0.5.1 directory containing the less and font files, then add a src/less/katex.less file that imports the styles and base64 encodes the fonts (similar to how we handle the font-awesome resources).
The problem is that a couple of the necessary font files are over the IE8-safe limit (32kb) when encoded, so gulp-less won’t encode them without adding an { ieCompat: false } flag.
I don’t have enough domain expertise to know if/how bad this is. Potential solutions are:
-
Add the { ieCompat: false } flag
-
Manually base64 encode the fonts and add them to the src/less/katex.less file
-
Other
Second:
Font files are huge and KaTeX includes a ton of fonts! (https://github.com/Khan/KaTeX/blob/master/static/fonts.less) Assuming we don’t want to add 500kb of fonts to our css resources, I commented out all but the four that seem most important and use a single format (assuming that that woff has the same browser support as bokeh per Home · KaTeX/KaTeX Wiki · GitHub), but bokeh.css and bokeh.min.css still increase by 180kb (roughly doubling in size). Again, I’m unsure how bad this is. Potential solutions are:
-
Just go with it, as-is
-
use another latex implementation (on quick glance, using MathJax would have the same font problems)
-
don’t support latex
-
load fonts from CDN and don’t bundle them?
-
create another css resource: fonts.css
-
don’t include fonts at all (the latex layout still works, but the font styling doesn’t happen)
-
Other
You can see the source and an example in the PR branch at: Add label annotation by canavandl · Pull Request #3956 · bokeh/bokeh · GitHub