Remove italics from ayu quotes/comments for alignment#2904
Merged
Conversation
Comments in code examples often rely on exact column alignment, e.g. for ASCII-art. This alignment often relies on both code and comment characters having exactly the same width. Setting `font-style: italic` seems to break these invariants with common monospace fonts used by browsers. This may be due to font synthesis when the monospace font does not have a native italic variant. E.g., see these code examples when using the `ayu` theme: - https://doc.rust-lang.org/1.90.0/reference/types/closure.html#r-type.closure.drop-order - https://doc.rust-lang.org/1.90.0/reference/types/impl-trait.html#r-type.impl-trait.generic-capture.precise.use It seems more important to have correct alignment than to style these elements in italics, so let's drop the italic styling. One alternative would be to set `font-synthesis: none` instead. This would prevent font synthesis-related misalignment while still rendering italics when a font supports italics natively. This might correct the alignment issue, but ASCII-art in comments often wants vertical bars to actually be vertical, so it still seems better to just turn off italics entirely. A more minimal change might be to only drop this from comments and not from `hljs-quote`, but it seems the styling for these classes are usually kept in sync, so we preserve that here.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Comments in code examples often rely on exact column alignment, e.g. for ASCII-art. This alignment often relies on both code and comment characters having exactly the same width.
Setting
font-style: italicseems to break these invariants with common monospace fonts used by browsers. This may be due to font synthesis when the monospace font does not have a native italic variant.E.g., see these code examples when using the
ayutheme:It seems more important to have correct alignment than to style these elements in italics, so let's drop the italic styling.
One alternative would be to set
font-synthesis: noneinstead. This would prevent font synthesis-related misalignment while still rendering italics when a font supports italics natively. This might correct the alignment issue, but ASCII-art in comments often wants vertical bars to actually be vertical, so it still seems better to just turn off italics entirely.A more minimal change might be to only drop this from comments and not from
hljs-quote, but it seems the styling for these classes are usually kept in sync, so we preserve that here.cc @ehuss