Skip to content

Commit

Permalink
Use -webkit-text-size-adjust instead of unsetting inline-block
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
jez committed Nov 18, 2024
1 parent 1bddda0 commit e3c30b4
Showing 1 changed file with 2 additions and 1 deletion.
3 changes: 2 additions & 1 deletion skylighting-format-blaze-html/src/Skylighting/Format/HTML.hs
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,8 @@ styleToCss f = unlines $
" padding-left: 4px; }"
]
divspec = [
"pre > code.sourceCode { white-space: pre; position: relative; }" -- position relative needed for relative contents
"html { -webkit-text-size-adjust: 100%; }" -- Work around iOS bug, see https://github.com/jgm/pandoc/issues/7248
, "pre > code.sourceCode { white-space: pre; position: relative; }" -- position relative needed for relative contents
, "pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }"
, "pre > code.sourceCode > span:empty { height: 1.2em; }" -- correct empty line height
, ".sourceCode { overflow: visible; }" -- needed for line numbers
Expand Down

0 comments on commit e3c30b4

Please sign in to comment.