demo · v131

Reading body vs locked monospace

Now that text-size-adjust is honoured on desktop, you can selectively opt the reading body of an article into user-driven font scaling while keeping code blocks, terminal output, and ASCII diagrams at their exact pixel size (where character alignment matters). Drag the user-scale slider and watch the two panels respond differently.

100%
text-size-adjust: 100%

article body

The reader can up-size this body text with Ctrl-+ or browser zoom and the page reflows naturally. With text-size-adjust: 100%, the page promises it has been designed to handle scaled text.

text-size-adjust: none

code listing

┌────────┬────────┐
│ id     │ count  │
├────────┼────────┤
│ 12345  │   42   │
│ 67890  │  118   │
└────────┴────────┘

Drag the slider. In Chrome 131+ with text-size-adjust: 100% on desktop, the reading panel responds; the locked panel doesn't.

the css

article.body {
  text-size-adjust: 100%;   /* opt in to user-driven scaling */
}

pre, code, .ascii-diagram {
  text-size-adjust: none;   /* lock so alignment doesn't break */
}

see also