question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

In chrome, when the font is less than 12px, the formula rendering is incorrect

See original GitHub issue

latex : $m_1>m_2$

set <span class="katex" style="font-size: 12px;">

The effect is as follows image

how to render correctly? image

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
Artoria2e5commented, Apr 6, 2021

I feel that rendering character-by-character via CSS is directly against KaTeX’s… philosophy(?) of keeping stuff fast and simple. The CSS rendering requires creating classes for every Latin character with their metrics encoded in CSS. That’s not sustainable and actually makes rendering worse in the general case by killing kerning (we don’t have it in the katex fonts yet, but we will: #2061).

I am no KaTeX developer, but I have this vague feeling that it might just not be a good idea to be dabbling in these boundaries of visual accessibility.

0reactions
lesonlicommented, Apr 8, 2021

I have solved this problem. In chrome, we can remove the 12px limit by setting the minimum font size. This is the configuration address: chrome://settings/fonts

Read more comments on GitHub >

github_iconTop Results From Across the Web

Font-size <12px doesn't have effect in Google Chrome
Mine was set to 11px (by default) so I had to change it to view smaller font sizes. To change the minimum font...
Read more >
Fix text that isn't displaying properly - Google Chrome Help
Text looks fuzzy or blurry (Windows only). If text doesn't look clear on your computer, try changing your font settings. Step 1: Use...
Read more >
Google Web Font Rendering Incorrectly in Chrome? Here's ...
Chrome rendered a Google Web Font incorrectly. ... but in Chrome the font was squished together, smaller, and almost unreadable.
Read more >
font-size - CSS: Cascading Style Sheets - MDN Web Docs
The font-size CSS property sets the size of the font. ... font-size: 12px; ... The font will be larger or smaller relative to...
Read more >
Font Size Idea: px at the Root, rem for Components, em for ...
I'm gonna size everything with them, that way I can adjust the font-size on the root element and everything will scale with it!...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found