Code Block Font Size on Mobile

Table of Contents

Last night, I poured two fingers of whiskey and settled into the task of deploying this blog for the first time. I opted to use Netlify to host this website, and Hugo's documentation made this process extremely straightforward. An hour or so later, the deed was done and I went to sleep.

This morning, I awoke to a horror show of CSS on mobile: monstrously-sized code blocks.

The font-size of the code blocks were not inheriting the font-size of the body. To make matters more confusing, this only occurred on mobile. The desktop view was fine. Without understanding the underlying cause, and at this point, I wasn’t convinced I needed to yet, I applied an explicit font-size to the code block itself. Still no difference.

I made some coffee and dug in to find out what was going on. The issue: a text inflation algorithm.

text-size-adjust

According to MDN Web Docs,

The text-size-adjust CSS property controls the text inflation algorithm used on some smartphones and tablets.

The text inflation algorithm is used to automatically increase the text size (and, therefore readability) of elements, without effecting the general layout. By default, text-size-adjust is set to auto. You can set this value to none, which disables the inflation algorithm, or to a percentage, which is what I added:

  html {
    -webkit-text-size-adjust: 100%;
  }

There isn’t much information on what setting the percentage to 100% does, but my take on this is that it caps the inflation to 100% of the font-size. This should be fine in terms of readability for this website as all font sizes are set using rem units.

rem vs. em

Why are all font-sizes set using rem units? Well, that was my second take-away from this morning: both rem and em are context-based, but their contexts are different. Rem is based on the font-size of the root element, in this case the html element, while em is based on the font-size of the containing element. Here’s an example of what that difference tangibly means.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

  html {
    /* As most browsers have a default font-size of 16px, */
    /* This should translate to 10px (1rem) */
    font-size: 62.5%;
  }

  div {
    font-size: 1.6rem; /* 16px */
  }

  div p.small {
    font-size: 0.5em; /* 8px */
  }

  div p.smaller {
    font-size: 0.5rem; /* 5px */
  }

Takeaways

  1. Typically, the solution is staring you right in the face. In this case, after discovering that Hugo’s documentation site does not have this font-size issue, I inspected their webpage to see how they were handling the styling of their code blocks
  2. CSS does not have to be frustrating if you take the time to understand it
  3. I should learn more about accessibility

Helpful Resources