feat(css): provide katex-swap.css that uses font-display: swap
#3940
Conversation
Google fonts seem to default to swap, and mixing them with katex makes it so that katex is invisible briefly on page load, unlike google fonts which make use of fallbacks while loading. This would unify their behavior. Ideally there'd be an option for this, and a ?display=swap in the cdn url (like google fonts: https://developers.google.com/fonts/docs/css2#use_font-display), but I don't know if jsdelivr supports that!
FreyaHolmer
changed the title
|
Why hasn't this fix been approved yet? I had the same problem. |
|
This PR needs to be ported from less to scss, though I suspect that would be easy. There's also a question of what's the best default. Actually, we could offer multiple |
edemaine
changed the title
katex-swap.css that uses font-display: swap
There was a problem hiding this comment.
Thanks for submitting this, and apologies for the long delay.
I modified the PR to work as follows:
katex.cssandkatex.min.cssusefont-display: block, roughly the same as before. I believe this is still a useful configuration to avoid "flash of unstyled text" (FOUT), but instead have "flash of invisible content" (FOIT) (more info).- In particular, I hesitate to modify the default here, because so many people use KaTeX and this might be a significant deviation from expected behavior.
katex-swap.cssandkatex-swap.min.cssusefont-display: swapto enable "flash of unstyled text" (FOIT) instead of "flash of invisible content" (FOUT)- Variable
$font-displayis still overridable (now via SCSS instead of Less)
TLDR: if you want font-display: swap, you use katex-swap.css instead of katex.css. But default remains roughly the same.
I'd appreciate any feedback on this approach (from original poster or anyone else interested in this feature) before merging.
Use `webpack-remove-empty-scripts` instead of `splitChunks`
Google fonts seem to default to swap, and mixing them with katex makes it so that katex is invisible briefly on page load, unlike google fonts which make use of fallbacks while loading. This would unify their behavior.
Ideally there'd be an option for this, and a ?display=swap in the cdn url (like google fonts: https://developers.google.com/fonts/docs/css2#use_font-display), but I don't know if jsdelivr supports that!
What is the previous behavior before this PR?
Katex fonts would be invisible until loaded
What is the new behavior after this PR?
Katex fonts will now render a fallback until fonts have been loaded
BREAKING CHANGE: changes font loading behavior to font-display: swap,
which means equations will render a fallback before loaded
instead of being invisible
Closes #2242