From e3c30b401798857feff2c2d447c2506aea1c84fa Mon Sep 17 00:00:00 2001
From: Jake Zimmerman <zimmerman.jake@gmail.com>
Date: Mon, 18 Nov 2024 14:05:47 -0800
Subject: [PATCH] Use `-webkit-text-size-adjust` instead of unsetting
 inline-block

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 https://github.com/jgm/pandoc/issues/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]: https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409
---
 skylighting-format-blaze-html/src/Skylighting/Format/HTML.hs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/skylighting-format-blaze-html/src/Skylighting/Format/HTML.hs b/skylighting-format-blaze-html/src/Skylighting/Format/HTML.hs
index 03f5986c8..14124a38d 100644
--- a/skylighting-format-blaze-html/src/Skylighting/Format/HTML.hs
+++ b/skylighting-format-blaze-html/src/Skylighting/Format/HTML.hs
@@ -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