Use -webkit-text-size-adjust instead of unsetting inline-block
#202
Conversation
This file contains 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
This reverts commit 15682b2.
This partially reverts commit 0ec8892
Having `display: inline-block;` is useful. I frequently customize the pandoc code block styles to allow for line highlights (see [1]). The CSS styles for those line hightlights rely on the enclosing `span` for a line being able to span the full width of the code block, which is not possible without making the `span` be `display: inline-block;`. The original issue reported in jgm/pandoc#7248 was that specifically iOS Safari renders font sizes incorrectly. This is a known iOS bug. I first discovered the workaround for it while working with the tufte-css project (see [2]), and similar workarounds are implemented in various CSS normalize/reset projects. I have verified that including this `-webkit-text-size-adjust` property fixes the original bug reported against pandoc. Given that the solution in this PR allows keeping `display: inline-block;` which has its own uses, fixes the original bug, and is an iOS-specific solution to an iOS-specific problem, I believe that this is a more compelling long-term solution (at least until iOS decides to change this behavior). I, of course, defer to the maintainers of the skylighting project as to whether you want this change. I've already worked around this problem in my own projects that consume the output of pandoc- and skylighting-highlighted code blocks (by basically vendoring these changes into those projects), so I am not personally blocked. I'm contributing this change upstream in the hopes that it might help unblock others. [1]: https://jez.io/pandoc-markdown-css-theme/features/#numbered-and-highlighted-lines [2]: edwardtufte/tufte-css#81 (comment)
jez
added a commit
to sorbet/sorbet.run
that referenced
this pull request
Nov 18, 2024
See jgm/skylighting#202 for an explanation why we ended up in this situation, and 5dc8050 for what the difference in generated CSS looks like for codeblocks in new vs old pandoc versions.
|
Thanks, I'm glad to have a better fix! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Having
display: inline-block;is useful. I frequently customize thepandoc code block styles to allow for line highlights (see 1).
The CSS styles for those line hightlights rely on the enclosing
spanfor a line being able to span the full width of the code block, which is
not possible without making the
spanbedisplay: inline-block;.The original issue reported in jgm/pandoc#7248
was that specifically iOS Safari renders font sizes incorrectly.
This is a known iOS bug. I first discovered the workaround for it while
working with the tufte-css project (see 2), and similar workarounds
are implemented in various CSS normalize/reset projects.
I have verified that including this
-webkit-text-size-adjustpropertyfixes the original bug reported against pandoc. Given that the solution
in this PR allows keeping
display: inline-block;which has its ownuses, fixes the original bug, and is an iOS-specific solution to an
iOS-specific problem, I believe that this is a more compelling long-term
solution (at least until iOS decides to change this behavior).
I, of course, defer to the maintainers of the skylighting project as to
whether you want this change. I've already worked around this problem in
my own projects that consume the output of pandoc- and
skylighting-highlighted code blocks (by basically vendoring these
changes into those projects), so I am not personally blocked. I'm
contributing this change upstream in the hopes that it might help
unblock others.
Related prior work: