Topic: CSS – Ctrl blog

Improve legibility and reduce layout shifts with x-height adjustments

2022-05-21T13:25:00Z

There’s more to setting the text size on your webpages than just the CSS font-size property. It only controls the size of majuscule (“uppercase”, e.g. “A”) letters, numbers, and punctuation. The size of minuscule (“lowercase”, e.g. “a”) letters is left up to the font. A font’s minuscule size metric is referred to as x-height; the height of an “x” letter. However, you can control the size of the two independently — and here’s why you might want to do that.

Samsung devices incorrectly handle CSS @media hover queries

2022-04-05T13:57:00Z

The hover @media feature query lets you check if a device’s primary input device supports hovering interactive elements. It became part of the web platform as of CSS Media Queries Level 4. The hover: hover query should match on devices with a mouse cursor (e.g. a touchpad), and hover: none should match touchscreens (mobile devices). Unfortunately, Samsung devices say their touchscreens are touchpads.

Font-independent pixel-perfect negative CSS text-indents

2022-01-19T13:58:00Z

The CSS text-indent property is used to offset the first line of text in a text block from the parent element’s inner box (the content area). It behaves like the padding-inline-start property, but only for a paragraph’s first line of text. It’s meant to allow your design to e.g. indent the first line to designate the start of a new paragraph (a more compact alternative to separating paragraphs by empty lines).

Why HTML table cells won’t fit into your CSS baseline grid

2022-01-15T14:39:00Z

A baseline grid design is a fancy way of describing a page design laid out like on lined paper sheets. (The lines are not visible, of course.) It’s the art of ensuring your design and text maintain a rhythm and the same visual pacing throughout the page by using consistent line heights and spacing.

Improving the New York Times’ line wrap balancer

2021-09-18T09:19:00Z

I looked into options to improve the breaking points for line wrapping on the web. I found a few “text balancer” programs that use different methods to even out the number of words per line on the fewest number of lines possible. I wasn’t happy with any of them, but ended up improving on the New York Times’ text balancer to get something useable. It wasn’t how I imagined spending my weekend.