Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix rendering of KaTeX output #867

Closed
mbarkhau opened this issue May 16, 2019 · 6 comments

Comments

2 participants
@mbarkhau
Copy link
Contributor

commented May 16, 2019

As recommended by @liZe in #59 I'm opening a separate issue to fix the rendering of this test page: https://gist.github.com/mbarkhau/ff263164cd162ff1fd734c2b0ce23241

The output is generated by KaTeX on Node.js, so JavaScript is not required to render the formulas, only HTML and CSS.

Running this file through WeasyPrint produces some warnings, but I would ignore those for this issue, as I was able to comment them out locally without affecting the rendering.

@mbarkhau

This comment has been minimized.

Copy link
Contributor Author

commented May 16, 2019

@liZe also mentioned that the square root symbols are not rendered due to #75, so that should also be considered out of scope for this issue.

@mbarkhau

This comment has been minimized.

Copy link
Contributor Author

commented May 16, 2019

I've updated the gist so that it doesn't use inline <svg> elements for the square roots and instead uses images with base64 encoded data. There are also some rendering issues with those:

Chrome
image

WeasyPrint
image

liZe added a commit that referenced this issue May 17, 2019

Set row baseline when no cells are baseline-aligned
"If a row has no cell box aligned to its baseline, the baseline of that row is
the bottom content edge of the lowest cell in the row."

Related to #867.

liZe added a commit that referenced this issue May 17, 2019

Set inline table baseline
"The baseline of an 'inline-table' is the baseline of the first row of the
table."

Related to #867.
@liZe

This comment has been minimized.

Copy link
Member

commented May 17, 2019

I've fixed the position of superscript. The problem was caused by the wrong position of inline table's baseline.

We now have to fix square root symbols and the circumflex position.

liZe added a commit that referenced this issue May 17, 2019

@liZe

This comment has been minimized.

Copy link
Member

commented May 17, 2019

The circumflex position is OK now. Lines larger than their parents were horizontally aligned, but it's not allowed by the spec.

liZe added a commit that referenced this issue May 20, 2019

Force SVG size
Related to #867.
@liZe

This comment has been minimized.

Copy link
Member

commented May 20, 2019

I think that everything's OK now. the first page of your updated sample looks the same between my browsers and WeasyPrint. The ones with inline svg tags are broken because of #75.

The bugs closed thanks to this issue are corner cases of rarely used features, it was cool to fix them:

  • Table rows now have a baseline when their cells are not baseline-aligned (5877056).
  • Inline table are vertically aligned with their first row (9012888).
  • Lines larger than their parents are not horizontally aligned anymore (76479de).
  • Size of SVG files is now forced, not hinted (37e788e).
  • Bonus in CairoSVG: ratio and alignment set in the root svg tag are now handled (0d71521) and respected with forced sizes (889ee3f).

Thanks a lot for this bug report and for the samples, it was hard to debug but quite simple to fix. It's really good news to have this kind of bugs on rarely used features, as we blindly have to follow what the spec tells and see the result work like a charm. It makes me believe that the rest of the code is quite OK 😄.

@liZe liZe closed this May 20, 2019

@liZe liZe added this to the 48 milestone May 20, 2019

@mbarkhau

This comment has been minimized.

Copy link
Contributor Author

commented May 20, 2019

Wonderful to hear, thank you very much for the fixes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.