Aligning images to a baseline grid with modern CSS

Aligning images to a baseline grid with modern CSS

Tópico: Aligning images to a baseline grid with modern CSS
Categoria: Tutoriais | Programação & Tecnologia
Idioma Principal: Português (Conteúdo de Tecnologia)

Descrição do Conteúdo / Informações:
-------------------------------------------------------------------------
A baseline grid is the invisible lattice that keeps all whitespace in sync. When every vertical measure is either the height of one line or a clean multiple of it, a page feels balanced and intentional. Adding images to the mix is where things get tricky. By default they are whatever height their aspect ratio makes them, and because of that, they can never align to the grid and push everything after them out of rhythm. Until recently, the only fix was JavaScript, which always felt clunky for what is really a layout problem. That is finally changing: with container queries, advanced attr() and round(), you can now snap images to the grid with pure CSS.

I know, none of this is essential. Baseline grids are a niche kind of craft, and whether the images snap to the grid is something almost no reader will consciously register. But this is the kind of thing I care about. And especially in more complex multi-column layouts, the misalignment of images can be a real thorn in the side of the design, so I am excited to have a clean CSS solution for it at last.

Rhythm from line-height and whitespace

Aligning elements to the baseline grid starts with line-height. A global line-height on the html element makes every line of copy one line box tall. Everything else stays on that beat when your vertical whitespace uses the same unit: one line, or a multiple of it. The convenient unit is rlh, the root line height. Treated as a variable, it becomes a single control for every vertical measure on the page. When you change the root line height, the whole rhythm rescales with it.

html {
line-height: 1.5;
}

body {
padding: 1rlh;
}

h1 {
font-size: 2.75rem;
line-height: 2rlh;
}

/* one line of space between flow elements */
* + * {
margin-top: 1rlh;
}

A baseline unit derived from the root line height

A full line is often too big a step. Using multiples of the line height for spacing can lead to a rhythm that is too loose. Limiting yourself to whole lines can also make it hard to align elements that are smaller than a line, like captions or small buttons. Or text that requires a tighter line height like headings. It is common to want something finer like the well known 8px grid system. This could be achieved with a separate unit, but it is more elegant to derive it from the line height, so it scales with the rhythm. Here is an example where the baseline unit is a third of a line:

:root {
--root-line-height: 1.5;
--root-baseline: calc(1rlh / 3);

--whitespace-1: var(--root-baseline);
--whitespace-2: calc(2 * var(--root-baseline));
--whitespace-3: calc(3 * var(--root-baseline)); /* == 1rlh */
/* ...and so on */

html {
line-height: var(--root-line-height);
}
}

In this system, the line height is 1.5. No font size is set so this equals to 1.5 times the default font size (16px in most browsers). One root line height is 24px tall (1.5 * 16px). and the baseline unit is a third of that, 8px. 2rlh is 48px, var(--whitespace-2) is 16px, and so on. Because it is built from rlh, it is live. When you change the root font-size or line-height, the baseline, and every space derived from it, rescales automatically. These units can be used for any vertical (or horizontal for that matter) measure: line heights, margins, padding, and so on. When everything is a multiple of the baseline, it all snaps together into a consistent rhythm.

Snapping text line-height to the grid

Applying this to text is straightforward: set the line height to a multiple of the baseline. This can be done by hand with calc(), picking a multiple tall enough to clear the text.

h1 {
font-size: 2.75rem;
/* a baseline multiple, chosen by eye to clear the text */
line-height: calc(9 * var(--root-baseline));
}

But that means working out the right multiple for every size, and reworking it whenever the font size changes. The new round(up, value, step) can do this automatically: it snaps a value up to the nearest multiple of a step. Set the font size and the ideal line height, and round takes care of landing it on the baseline grid.

h1 {
font-size: 2.75rem;
line-height: round(up, calc(2.75rem * 1.1), var(--root-baseline));
}

If you do this for several elements, you can factor the math into a CSS @function and write it once.

@function --baseline-clamp(
--font-size type(<length>),
--line-height type(<number>)
) returns type(<length>) {
result: round(
up,
calc(var(--font-size) * var(--line-height)),
var(--root-baseline)
);
}

h1 {
--element-font-size: 2.75rem;
font-size: var(--element-font-size);
line-height: 2rlh; /* fallback */
/* needs a fallback because @function is Chromium-only for now, and without it
the line-height declaration is dropped entirely, not just ignored. */
@supports at-rule(@function) {
line-height: --baseline-clamp(var(--element-font-size), 1);
}
}

This is especially useful for fluid typography, where the font size changes with the viewport width, so the line height needs to keep up with it. You can see how it works in this codepen.

The image technique

The height of an image is whatever the aspect ratio makes it at the current width, so it can never land on the grid, and it pushes everything after it off rhythm. Until recently the only fix was JavaScript: measure the rendered width, work out the height that would snap to the grid, set it inline, and redo all of that on every resize. Now the whole thing can be done in CSS. Just like the text line-height rounding, it is possible to round the image height up to the next line. The only thing we need is the image's width and aspect ratio, which is where advanced attr() and container queries come in.

To make this work in any layout, the image needs something to read its width from. In a multi-column or grid layout, the image is laid out at the width of the column it sits in, not the width of the outer container, so this is the wrong thing to measure. That is why an extra wrapper around the image is needed. It doesn't matter whether the image sits inside a column or not: the wrapper takes on whatever width is available where it lands, and gives the image a reliable width to read.

<div class="baseline-media">
<img src="photo.jpg" width="800" height="600" alt="..." />
</div>

The wrapper becomes a query container through an opt-in class, so it only ever touches the images you ask it to.

.baseline-media {
container-type: inline-size;
}

After that it's possible to read the image's intrinsic width and height straight from its width and height attributes, using the redesigned attr() and type() functions. Classic attr() returns a string, and can only be used inside the content property, so its value is useless for layout math. The redesigned attr() (part of CSS Values and Units Level 5) works on any property and can parse an attribute into a real CSS type. You ask for that type in one of two ways: a dimension unit like px, or the new type() function, for example type(<number>). Either one hands back a value you can compute with in calc().

.baseline-media img {
/* intrinsic size, straight from the attributes */
--w: attr(width px, 400px);
--ar: attr(width type(<number>), 4) / attr(height type(<number>), 3);

/* the width it actually renders at: never wider than the container */
--rendered-w: min(100cqw, var(--w));
width: var(--rendered-w);

/* height from the ratio, snapped up to the next line */
height: round(up, calc(var(--rendered-w) / (var(--ar))), 1rlh);

/* cover absorbs the few px gained by snapping */
object-fit: cover;
}

Reading it line by line: --w is the width attribute as a length; --ar builds the ratio from the width and height attributes as numbers; --rendered-w is the smaller of the container width (100cqw) and the intrinsic width. height divides that rendered width by the ratio and rounds the result up to a full line. The step here is 1rlh, one whole line of text, so the bottom of every image lands on a text line rather than on the finer baseline steps in between. Rounding to var(--root-baseline) instead would snap images to that finer grid, but a full line keeps them aligned with the lines of text around them. And finally object-fit: cover fills the few extra pixels so nothing distorts.

One thing to keep in mind: that cover crop trims a sliver off the image to gain the height. So this suits photographs and decorative art, where losing a few edge pixels is fine. It is a poor fit for diagrams, logos, or anything where every pixel needs to stay visible.

Browser support

attr() with units and type() (the part the image technique relies on) is Chromium-only for now. Where it is missing, the image rules drop out and images fall back to their natural size, no snapping. So they become regular responsive images like we've had for years, just without the baseline alignment.

round() itself works across browsers, including Firefox. Only @function is Chromium-only, so if you want the text snapping everywhere today, you can inline the round() instead of wrapping it in a function.

Demo and codepen

Have a look at a working example on the demo page with the latest version of Chrome or Edge. Or checkout the codepen.