slash appears below equals in KaTeX

[castedo]

This inter.html file was generated using pandoc-katex-filter to avoid having JavaScript in the HTML. I do the following

$ weasyprint --verbose inter.html output.pdf
INFO: Step 1 - Fetching and parsing HTML - inter.html
INFO: Step 2 - Fetching and parsing CSS - CSS string
WARNING: Ignored `gap: min(4vw, 1.5em)` at 4:32, unknown property.
WARNING: Ignored `overflow-x: auto` at 5:28, unknown property.
INFO: Step 2 - Fetching and parsing CSS - https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/katex.min.css
WARNING: Ignored `text-rendering:auto` at 1:4711, unknown property.
WARNING: Ignored `width:-webkit-min-content` at 1:5147, invalid value.
WARNING: Ignored `width:-moz-min-content` at 1:5173, invalid value.
WARNING: Ignored `width:min-content` at 1:5196, invalid value.
WARNING: Ignored `fill:currentColor` at 1:20723, unknown property.
WARNING: Ignored `stroke:currentColor` at 1:20741, unknown property.
WARNING: Ignored `fill-rule:nonzero` at 1:20761, unknown property.
WARNING: Ignored `fill-opacity:1` at 1:20779, unknown property.
WARNING: Ignored `stroke-width:1` at 1:20794, unknown property.
WARNING: Ignored `stroke-linecap:butt` at 1:20809, unknown property.
WARNING: Ignored `stroke-linejoin:miter` at 1:20829, unknown property.
WARNING: Ignored `stroke-miterlimit:4` at 1:20851, unknown property.
WARNING: Ignored `stroke-dasharray:none` at 1:20871, unknown property.
WARNING: Ignored `stroke-dashoffset:0` at 1:20893, unknown property.
WARNING: Ignored `stroke-opacity:1` at 1:20913, unknown property.
WARNING: Ignored `stroke:none` at 1:21004, unknown property.
WARNING: Ignored `right:calc(50% + .3em)` at 1:22545, invalid value.
WARNING: Ignored `left:calc(50% + .3em)` at 1:22628, invalid value.
INFO: Step 3 - Applying CSS
INFO: Step 4 - Creating formatting structure
INFO: Step 5 - Creating layout - Page 1
INFO: Step 6 - Creating PDF
INFO: Step 7 - Adding PDF metadata
'created' timestamp seems very low; regarding as unix timestamp
'modified' timestamp seems very low; regarding as unix timestamp

When viewing inter.html in Firefox and Chrome the equal sign has the slash on top, as expected for \not=.
But when I look at the output.pdf, the slash is completely below the equal sign.

I can't tell whether this is a bug in weasyprint or whether this is a font issue.

In an attempt to get this to work, I copied all the KaTex font files to ~/.local/share/fonts/ and I confirm that 'fc-list' find them all, but this did not seem to make a difference. Otherwise, so far, using KaTeX to render TeX using nodejs before passing to weasyprint is working well so far ... apart from this \not= issue.

[castedo]

This does not appear to be a font issue. I can reproduce the issue with a simple ASCII slash instead of the fancy unicode character that KaTeX spits out. I'll attach a simpler example soon.

[castedo]

Here is a vastly simpler reproduction case:
simple.html.txt
The issue has to do with display:inline-flex. It does not have to do with fonts.

In Firefox and Chrome the attached simple.html will have the slashes and equal sign overlapping. But after doing

weasyprint simple.html out.pdf

the out.pdf will show the slashes stacked underneath the equal sign.

This use of CSS is a simplified version of what KaTeX 0.15.6 outputs.

[castedo]

I've found one quick fix:

.katex .thinbox {
  display: inline-block;
}   

This gets the slash on top of the equals. Not sure whether it breaks other KaTeX layout. But this approach, or tweaks of it, will probably work well enough in the short term for me.

[liZe]

Hi!

Thanks a lot for this issue, the details were really useful.

The bug should now be fixed, the original document is correctly rendered. We didn’t calculate the flex container’s baseline, it’s now done.

The flex layout support is still very limited, and you may have other bugs related to this topic. Some of them have already be reported.

One last thing: your second example is rendered differently from the other browsers, the backslash being displayed on a second line. This difference is not caused by WeasyPrint itself, but by Pango telling that it’s OK to split a line between a slash and a backslash. Why? The answer is in the Unicode standard:

URLs are now so common in regular plain text that they need to be taken into account when assigning general-purpose line breaking properties. Slash (solidus) is allowed as an additional, limited break opportunity to improve layout of Web addresses. As a side effect, some common abbreviations such as “w/o” or “A/S”, which normally would not be broken, acquire a line break opportunity. The recommendation in this case is for the layout system not to utilize a line break opportunity allowed by SY unless the distance between it and the next line break opportunity exceeds an implementation-defined minimal distance.

Contrary to (sort of) what’s explained here, WeasyPrint always breaks lines after slashes. That’s not a "real bug", that’s generally not a problem, and I hope that it won’t show in your KaTeX formulae 🤞️.