laurent22 / joplin

Joplin - the privacy-focused note taking app with sync capabilities for Windows, macOS, Linux, Android and iOS.
https://joplinapp.org
Other
45.25k stars 4.92k forks source link

Math font in exported PDF is different from that in the preview #3078

Closed hexclover closed 4 years ago

hexclover commented 4 years ago

Starting from as late as Joplin 1.0.199, the math font in exported PDF is no longer KaTeX-Main. Version 1.0.193 is fine.

On my system the font becomes Tinos, and if I remove Tinos I get Liberation Serif.

tinos

Environment

Joplin version: 1.0.201 Platform: Linux OS specifics: Arch Linux

Steps to reproduce

  1. Export a note with some equations as PDF.
  2. Open the PDF in a viewer. The font shapes are obviously different, and the PDF properties say that the font embedded is not KaTeX-Main.

Describe what you expected to happen

Math in the exported PDF should be rendered using the same font as in preview:

km

tessus commented 4 years ago

I've noticed something similar a while back and wanted to open an issue for it. You beat me to it.

The following:

$$
\begin{pmatrix}
    a & b & c\\
    a & b & c\\
    a & b & c\\
    a & b & c
\end{pmatrix}
$$

$$
\begin{pmatrix} -1 & 0\\ 0 & 1 \end{pmatrix} \begin{pmatrix} x \\ y \end{pmatrix} = \begin{pmatrix} -x \\ y \end{pmatrix} 
$$

results in the following PDF (Katex - Export to PDF.pdf):

image

Maybe this is happening, because we only include the .woff2 fonts. I don't know, but maybe the PDF export requires .ttf files.

This is how it's supposed to look like:

image
ddtuan99 commented 4 years ago

I have same issue on Joplin 1.0.201 (Debian 10).

kowalskidev commented 4 years ago

I'm working on it

kowalskidev commented 4 years ago

When we export a note InteropService() render a note in html file in temp directory then using that HTML file PDF get exported, Now I figured out that HTML file requires a katex.css which is already exported by plugin and katex.css requires the fonts included in fonts directory which is not exported by plugin so we need to export the fonts directory also along with katex.css so I tried exporting all the fonts by explicitly adding in katex.js like this:

function katexStyle() {
    return [
        { name: 'katex.css' },
        { name: 'fonts/KaTeX_AMS-Regular.woff2' },
        { name: 'fonts/KaTeX_Caligraphic-Bold.woff2' },
        { name: 'fonts/KaTeX_Caligraphic-Regular.woff2' },
        { name: 'fonts/KaTeX_Fraktur-Bold.woff2' },
        { name: 'fonts/KaTeX_Fraktur-Regular.woff2' },
        { name: 'fonts/KaTeX_Main-Bold.woff2' },
        { name: 'fonts/KaTeX_Main-BoldItalic.woff2' },
        { name: 'fonts/KaTeX_Main-Italic.woff2' },
        { name: 'fonts/KaTeX_Main-Regular.woff2' },
        { name: 'fonts/KaTeX_Math-BoldItalic.woff2' },
        { name: 'fonts/KaTeX_Math-Italic.woff2' },
        { name: 'fonts/KaTeX_SansSerif-Bold.woff2' },
        { name: 'fonts/KaTeX_SansSerif-Italic.woff2' },
        { name: 'fonts/KaTeX_SansSerif-Regular.woff2' },
        { name: 'fonts/KaTeX_Script-Regular.woff2' },
        { name: 'fonts/KaTeX_Size1-Regular.woff2' },
        { name: 'fonts/KaTeX_Size2-Regular.woff2' },
        { name: 'fonts/KaTeX_Size3-Regular.woff2' },
        { name: 'fonts/KaTeX_Size4-Regular.woff2' },
        { name: 'fonts/KaTeX_Typewriter-Regular.woff2' },
        // Note: Katex also requires a number of fonts but they don't need to be specified here
        // since they will be loaded as needed from the CSS.
    ];
}

and It's working fine. The PDF file were same as expected.

But I didn't find any other fix apart from exporting fonts. @laurent22 is there any way to render katex.css file in InteropServiceHelper.js so it can load all the required fonts in it? or any other way of exporting the required fonts without explicitly exporting all the fonts in katex.js?

laurent22 commented 4 years ago

and It's working fine. The PDF file were same as expected.

Thanks for looking into it @kowalskidev, and your assessment is correct.

I had removed the declaration of these fonts from katex.js because they are loaded automatically from the CSS when the view is rendered. And indeed that cannot happen when exporting to HTML, and then to PDF, since the fonts are then missing.

Your fix is fine and you don't need to change InteropServiceHelper.js. If you could create a pull request with this, we can merge. Also if you could add a comment explaining why the fonts need to be declared there that would be great (and of course remove my incorrect comment).

kowalskidev commented 4 years ago

Thank you so much Sir. I will come up with PR soon.