Confusion about local fonts when using wkhtmltopdf on Ubuntu 14.04

1,659 views
Skip to first unread message

Chris Parks

unread,
Feb 4, 2016, 1:42:09 PM2/4/16
to MathJax Users
I'm using Ubuntu Trusty 14.04, Firefox 44.0, and wkhtmltopdf 0.12.1 with patched qt to render the following html document:

<!DOCTYPE HTML>
<html>
 
<head>
   
<title>Worksheet</title>
   
<meta charset="UTF-8">
   
<style>
     
.content .MJXp-display, .content .MathJax_Display {
        display
: inline-block !important;
        margin
: .1em 0 .1em 1em !important;
        width
: auto !important;
     
}
   
</style>
   
<script type="text/x-mathjax-config">
     
MathJax.Hub.Config({
       
"HTML-CSS": {
          webFont
: 'Latin-Modern',
          preferredFont
: 'Latin-Modern',
          availableFonts
: ['Latin-Modern'],
       
}
     
});
   
</script>
   
<script type="text/javascript" src="./MathJax.js?config=TeX-AMS_HTML">
   
</script>
 
</head>
 
<body>
   
<div class="content">
     
<p><strong>1. </strong>Which of the fractions below represents a whole broken into a total of 7 equal parts? Select all that apply.
     
</p>
     
<p>
        $$A)\ \frac{1}{7}$$ $$B)\ \frac{2}{7}$$ $$C)\ \frac{1}{8}$$ $$D)\ \frac{6}{7}$$ $$E)\ \frac{7}{8}$$
     
</p>
     
<p>
       
<strong>2. </strong>
        You cut a pizza into 6 equal pieces.  If you eat one piece, what fraction of the pizza did you eat?
     
</p>
     
<p>
        Choose one: [ \(\frac{1}{3}\) | \(\frac{1}{4}\) | \(\frac{1}{5}\) | \(\frac{1}{6}\) ]
     
</p>
   
</div>
 
</body>
</html>


1. If I open this in Firefox, I get this expected output:
Inspecting the 1 character in the fraction 1/7 shows that it's using font-family LatinModernMathJax_Main

2. The MathJax manual indicates that I can set webFont to null to force the use of local font files stored at <mathjax>/jax/output/HTML-CSS/fonts/. However, if I do this and open test.html in Firefox, I get this:


Furthermore, if I inspect the 1 character in the fraction 1/7, it's using a TeX image font instead of a real font - <mathjax>/fonts/HTML-CSS/TeX/png/Main/Regular/141/0031.png?rev=2.6.0

3. In wkhtmltopdf, which is my actual target renderer, the behavior is stranger. With webFont: 'Latin-Modern', it uses some sans-serif font:

wkhtmltopdf --javascript-delay 10000 test.html output.pdf


Strangely, the PDF properties include the font "LatinModernMathJax_Normal-Regular".

4. With webFont: null, it appears to use TeX image fonts again:

wkhtmltopdf --javascript-delay 10000 test.html output.pdf



My goal is to render PDFs in wkhtmltopdf using only local fonts, but MathJax seems to have difficulty finding the local Latin-Modern font. Is this just a configuration issue? Do I need to have Latin-Modern installed on the system somewhere other than the MathJax distribution? I copied the Latin-Modern fonts bundled with MathJax to ~/.fonts, but that didn't seem to have any effect.

Chris Parks

unread,
Feb 4, 2016, 1:44:30 PM2/4/16
to MathJax Users
I should have pointed out that I'm using MathJax-2.6.0

Peter Krautzberger

unread,
Feb 4, 2016, 3:59:19 PM2/4/16
to mathja...@googlegroups.com
Hi Chris,


> 2. The MathJax manual indicates that I can set webFont to null to force the use of local font files stored at <mathjax>/jax/output/HTML-CSS/fonts/. However, if I do this and open test.html in Firefox, I get this:
> My goal is to render PDFs in wkhtmltopdf using only local fonts, but MathJax seems to have difficulty finding the local Latin-Modern font. Is this just a configuration issue?

I'm afraid that's a known bug in MathJax. Only our MathJax fonts and the regular STIX can be used when locally installed. But I'm curious why you want to force local fonts since you seem to be using a local copy of MathJax anyway.



> Furthermore, if I inspect the 1 character in the fraction 1/7, it's using a TeX image font instead of a real font - <mathjax>/fonts/HTML-CSS/TeX/png/Main/Regular/141/0031.png?rev=2.6.0

Falling back to image fonts is expected behavior when no webfont or compatible local font can be found.

>  In wkhtmltopdf, which is my actual target renderer, the behavior is stranger. With webFont: 'Latin-Modern', it uses some sans-serif font:

I can't say much except that there have been various issues with wkhtmltopdf in the past; most of them are unfixable as QTWebKit strips too from WebKit for MathJax to work reliably.

You might have more luck using the SVG output; that's not local fonts but technically not webfonts either.

Regards,
Peter.


--
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/d/optout.

Chris Parks

unread,
Feb 4, 2016, 5:18:01 PM2/4/16
to MathJax Users
Thanks for the response, Peter.

On Thursday, February 4, 2016 at 12:59:19 PM UTC-8, Peter Krautzberger wrote:
Hi Chris,

> 2. The MathJax manual indicates that I can set webFont to null to force the use of local font files stored at <mathjax>/jax/output/HTML-CSS/fonts/. However, if I do this and open test.html in Firefox, I get this:
> My goal is to render PDFs in wkhtmltopdf using only local fonts, but MathJax seems to have difficulty finding the local Latin-Modern font. Is this just a configuration issue?

I'm afraid that's a known bug in MathJax. Only our MathJax fonts and the regular STIX can be used when locally installed. But I'm curious why you want to force local fonts since you seem to be using a local copy of MathJax anyway.

I may have misunderstood the term webfonts. I assumed something had to be downloaded over the internet for these to work. Are these just the fonts bundled with MathJax? The machines I'm serving these PDFs from don't necessarily have an outgoing internet connection, so I wanted to make sure they didn't need to download anything at runtime.
 


> Furthermore, if I inspect the 1 character in the fraction 1/7, it's using a TeX image font instead of a real font - <mathjax>/fonts/HTML-CSS/TeX/png/Main/Regular/141/0031.png?rev=2.6.0

Falling back to image fonts is expected behavior when no webfont or compatible local font can be found.

>  In wkhtmltopdf, which is my actual target renderer, the behavior is stranger. With webFont: 'Latin-Modern', it uses some sans-serif font:

I can't say much except that there have been various issues with wkhtmltopdf in the past; most of them are unfixable as QTWebKit strips too from WebKit for MathJax to work reliably.


Yeah, it's been kind of a pain to figure out exactly what wkhtmltopdf does and doesn't support.
 
You might have more luck using the SVG output; that's not local fonts but technically not webfonts either.


I've tried SVG, and it looks fine in FireFox:

but it's really bold in wkhtmltopdf, even with blacker: 1:
I think if using webFont is really just using the MathJax distribution, then I can do that. It seems to take over 10 seconds to render though. Do you have any tips to speed that up when running from a local MathJax distribution?

Thanks,
Chris

Peter Krautzberger

unread,
Feb 5, 2016, 5:39:57 AM2/5/16
to mathja...@googlegroups.com
Hi Chris,

Are these just the fonts bundled with MathJax? 

That's correct. They are in the `fonts` folder.

but it's really bold in wkhtmltopdf, even with blacker: 1:

Too bad. I'm guessing another QTWebKit issue.

It seems to take over 10 seconds to render though.

If that refers to the sample in the OP (10 equations), then that's very slow. Does the page render faster in a regular browser? In that case it would be yet another wkhtmltopdf problem.

You could try to pre-process the HTML with mathjax-node and then send it to wkhtmltopdf for print; soon enough that will be able to use the CommonHTML output, not just the SVG.

Peter.

Chris Parks

unread,
Feb 5, 2016, 12:16:09 PM2/5/16
to MathJax Users
Hey Peter,


On Friday, February 5, 2016 at 2:39:57 AM UTC-8, Peter Krautzberger wrote:
Hi Chris,

Are these just the fonts bundled with MathJax? 

That's correct. They are in the `fonts` folder.

but it's really bold in wkhtmltopdf, even with blacker: 1:

Too bad. I'm guessing another QTWebKit issue.

It seems to take over 10 seconds to render though.

If that refers to the sample in the OP (10 equations), then that's very slow. Does the page render faster in a regular browser? In that case it would be yet another wkhtmltopdf problem.

Yeah, it's a bit faster in a regular browser. It actually takes about 8 seconds in wkhtmltopdf, and this is a small sample. I was able to get it down to about 2 seconds with these additions from another mailing list thread:

  MathJax.Ajax.timeout = 1000;
  MathJax.Hub.Register.StartupHook("HTML-CSS Jax Startup", function() {
    MathJax.OutputJax["HTML-CSS"].Font.timeout = 1000;
  });

But we might be rendering an arbitrary number of pages, so I'll need to come up with a heuristic for --javascript-delay.
 

You could try to pre-process the HTML with mathjax-node and then send it to wkhtmltopdf for print; soon enough that will be able to use the CommonHTML output, not just the SVG.

Peter.


Yeah, that might be a way forward. We'll have to wait for CommonHTML since SVG in wkhtmltopdf is so weird, but it would be nice to have more deterministic timing. Thanks again for your help! Clearly I have some bugs to file with wkhtmltopdf :)

-Chris

Chris Parks

unread,
Feb 5, 2016, 12:45:19 PM2/5/16
to MathJax Users
Actually, I guess I have one more question. MathJax seems to use the whole Ajax.timeout regardless of what I set it to. If I set to zero ms, I get the following message at the bottom of my document:

File failed to load: file:///home/chris/code/mathjax/jax/output/HTML-CSS/fonts/Latin-Modern/fontdata.js

However, if I set it higher (say 100ms), the page looks fine and renders faster.  Is the mechanism for loading files completely timeout-based? Does loading not send an event to signal that it's done or call a callback? That would indicate to me that I should set this timeout as low as possible without triggering the above error message (modulo some buffer amount).

-Chris

Peter Krautzberger

unread,
Feb 5, 2016, 12:53:36 PM2/5/16
to mathja...@googlegroups.com

I wouldn't touch that. It's a timeout for when MathJax stops detecting that a webfont has loaded. Setting it to 0 means disabling webfonts.

To answer your question, there's no signal from browsers. A spec for that only came out last year and has poor implementation status  http://caniuse.com/#feat=font-loading

Webfont download detection is the nastiest, subtlest thing. Davide's hacks are phenomenal and you shouldn't mess with them.

Peter.

Chris Parks

unread,
Feb 5, 2016, 12:57:44 PM2/5/16
to MathJax Users
Haha, ok, I'm not planning on setting it to zero; that was just an extreme case I was testing. Thanks again - I appreciate y'all working on what appears to be an extremely difficult set of problems.

-Chris
Reply all
Reply to author
Forward
0 new messages