CSS Fix for Monospace Fonts on iOS Safari

Luke Jahnke2 November 2024

If you're using Jekyll and found that your monospace code is not aligned correctly, here is a simple CSS you can use:

code {
  -webkit-text-size-adjust: none;
}

Without setting -webkit-text-size-adjust, whitespace was adjusted to a smaller font size than accompanying text which broke the alignment.

# Why This Fix Is Necessary

The following HTML demonstrates how Jekyll (technically Rouge) outputs a code block converted to HTML:

<!doctype html>
<html>
 <body>
  <pre><code>
<span>AAA|AAA</span>
<span>A A|AAA</span>
<span>A A</span><span>|AAA</span>
<span>A</span><span> </span><span>A|AAA</span>
<span>A</span> <span>A|AAA</span>
  </pre></code>
 </body>
</html>

Any whitespace isolated from other characters gets a smaller font size, such as in the last two code lines, causing the misalignment shown in the following screenshot:

iOS Safari Screenshot of Unaligned Monospace Text

« Back to homepage