Linkblog

CSS & vertical rhythm for text, images, and tables

Tue, 12 May 2026 06:29:38 +0000

Vincent Bernat April 22, 2026

Vertical rhythm aligns lines to a consistent spacing cadence down the page. It creates a predictable flow for the eye to follow. Thanks to the rlh CSS unit, vertical rhythm is now easier to implement for text.¹ But illustrations and tables can disrupt the layout. The amateur typographer in me wants to follow Bringhurst’s wisdom:

Headings, subheads, block quotations, footnotes, illustrations, captions and other intrusions into the text create syncopations and variations against the base rhythm of regularly leaded lines. These variations can and should add life to the page, but the main text should also return after each variation precisely on beat and in phase.

― Robert Bringhurst, The Elements of Typographic Style

Text#

Three factors govern vertical rhythm: font size, line height and margin or padding. Let’s set our baseline with an 18-pixel font and a 1.5 line height:

html {
  font-size: 112.5%;
  line-height: 1.5;
}
h1, h2, h3, h4 {
  font-size: 100%;
}
html, body,
h1, h2, h3, h4,
p, blockquote,
dl, dt, dd, ol, ul, li {
  margin: 0;
  padding: 0;
}

CSS Values and Units Module Level 4 defines the rlh unit, equal to the computed line height of the root element. All browsers support it since 2023.² Use it to insert vertical spaces or to fix the line height when altering font size:³

h1, h2, h3, h4 {
  margin-top: 2rlh;
  margin-bottom: 1rlh;
}
h1 {
  font-size: 2.4rem;
  line-height: 2rlh;
}
h2 {
  font-size: 1.5rem;
  line-height: 1rlh;
}
h3 {
  font-size: 1.2rem;
  line-height: 1rlh;
}
p, blockquote, pre {
  margin-top: 1rlh;
}
aside {
  font-size: 0.875rem;
  line-height: 1rlh;
}

We can check the result by overlaying a grid⁴ on the content:

Using CSS rlh unit to set vertical space works well for text. You can display the grid using Ctrl+Shift+G.

If a child element uses a font with taller intrinsic metrics, it may stretch the line’s box beyond the configured line height.⁵ A workaround is to reduce the line height to 1. The glyphs overflow but don’t push the line taller.

code, kbd {
  line-height: 1;
}

Responsive images#

Responsive images are difficult to align on the grid because we don’t know their height. CSS Rhythmic Sizing Module Level 1 introduces the block-step property to adjust the height of an element to a multiple of a step unit. But most browsers don’t support it yet.

With JavaScript, we can add padding around the image so it does not disturb the vertical rhythm:

const targets = document.querySelectorAll(".lf-media-outer");
const adjust = (el, height) => {
  const rlh = parseFloat(getComputedStyle(document.documentElement).lineHeight);
  const padding = Math.ceil(height / rlh) * rlh - height;
  el.style.padding = `${padding / 2}px 0`;
};

targets.forEach((el) => adjust(el, el.clientHeight));

The image is snapped to the grid thanks to the additional padding computed with JavaScript. 216 is divisible by 27, our line height in this example.

As the image is responsive, its height can change. We need to wrap a resize observer around the adjust() function:

const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const height = entry.contentBoxSize[0].blockSize;
    adjust(entry.target, height);
  }
});
for (const target of targets) {
  ro.observe(target);
}

Tables#

Table cells could set 1rlh as their height but they would feel constricted. Using 2rlh wastes too much space. Instead, we use incremental leading: we align one in every five lines.

table {
  border-spacing: 2px 0;
  border-collapse: separate;
  th {
    padding: 0.4rlh 1em;
  }
  td {
    padding: 0.2rlh 0.5em;
  }
}

To align the elements after the table, we need to add some padding. We can either reuse the JavaScript code from images or use a few lines of CSS that count the regular rows and compute the missing vertical padding:

table:has(tbody tr:nth-child(5n):last-child)   { padding-bottom: 0.2rlh; }
table:has(tbody tr:nth-child(5n+1):last-child) { padding-bottom: 0.8rlh; }
table:has(tbody tr:nth-child(5n+2):last-child) { padding-bottom: 0.4rlh; }
table:has(tbody tr:nth-child(5n+3):last-child) { padding-bottom: 0 }
table:has(tbody tr:nth-child(5n+4):last-child) { padding-bottom: 0.6rlh; }

A header cell has twice the padding of a regular cell. With two regular rows, the total padding is 2×2×0.2+2×0.4=1.6. We need to add 0.4rlh to reach 2rlh of extra vertical padding across the table.

One line out of five is aligned to the grid. Additional padding is added after the table to not break the vertical rhythm. 405 is divisible by 27, our line height in this example.

None of this is necessary. But once you start looking, you can’t unsee it. Until browsers implement CSS Rhythmic Sizing, a bit of CSS wizardry and a touch of JavaScript is enough to pull it off. The main text now returns after each intrusion “precisely on beat and in phase.” 🎼

Task Paralysis & AI | g5t.de

Sun, 10 May 2026 17:06:29 +0000

About Task Paralysis

Straight away: I am not diagnosed yet. So I'm hesitant to say "I have ADHD", because the truth is: I don't know it. There are signs: My siblings have been diagnosed as kids, and I'm personally struggling with tasks that others deem to be "easy". I have a tremendous need for novelty, and I can hardly picture myself doing the same job for the next 30 years.

I'm not kidding: At the moment, I change roles every 2-3 years. This isn't really sustainable. Due to circumstances out of my control, I wasn't able to tackle that earlier.

Also, it doesn't really help if you want to build a career: I can navigate myself around a lot of technical fields, but I have no special knowledge.

Often, I struggle with the execution of a strategy that I successfully laid out. I will simply refuse to do the first step, because everything now feels overwhelming.

So... there are signs. Yes. But that might be another article.

I'm aware that there is something called Analysis Paralysis. But that's different, at least for me and to my understanding. Let me put it this way: When Analysis Paralysis kicks in, my brain will run in circles. When Task Paralysis kicks in, my brain won't run at all. That sucks.

About AI

I won't go as far and say that I HATE AI per se. I just shelled out almost 100 € in tokens (Max-plan for Claude) to code a game. And an iOS App. Because I need the latter and want the former. But I see all the negative effects that come with AI: People are loosing their jobs, sometimes loosing themselves. Art gets stolen, and suddenly, piracy isn't piracy any longer once large companies are doing the deed. That feels unfair, to say the least, and strange at best.

(I 👴 grew up in the 2000s, so I have some knowledge about piracy from back in the days, and how copyright holders went after people.)

I refrain to use AI for anything artistic since a couple of months. I either buy it, or try to do it myself "the old way". I can fail, I can succeed - but I did it on my own. That's important. The effect AI has on artists feels just too destructive.

What is it good for?

For me, personally? It helps me overcome my task paralysis. As mentioned earlier: I have a plan. A strategy. An idea. I just need someone (or something), who has fun in churning through the implementation. I have the ideas. But boy is coding exhausting. As I learned quite late in my life, it is indeed not normal to fight with your motivation to create code every time you tackle a new user story, but succeed once you started.

The Catch

Claude Code in this case is the something that just helps me getting started. And, lo' and behold, I see myself struggling to not get addicted to that.

What do I mean by that? While overcoming the task paralysis on one hand, it quickly produces really good results. Last time I tried AI was in fall of 2025. It's an understatement to say that a lot has changed. There are worlds between what is possible today and what was possible back then.

That means that the dopamine really kicks fast, because the cycle between "I have an idea" and "This is the result!" is so tremendously short. But Claude has token limits. You can only spend a limited amount of tokens per 5 hours or 7 days. But you can buy additional API tokens. And now you set yourself in a position where you throw endless money at your source of dopamine, like a junkie running to their dealer, begging for the next shot. Or a poor player waiting for the golden ticket.

And, to be brutally honest: I know because I fell for it. After getting the Pro-plan, I added another 20 € for API credits. After that, I realized I should go for Max for this month, and also leverage some tricks like /modus opusplan to reduce the amount of tokens that are used.

But the dopamine feels so freaking good.

Disclaimer: No AI was used to create this article.

Die dänische Entscheidung, konsequent für Wohlbefinden zu sorgen

Sat, 25 Apr 2026 14:46:44 +0000

"Morgen fahren wir nicht nur 800 Kilometer nach Hause. Wir reisen 30 Jahre in der Zeit zurück."

Prolog | Am Abend vor unserer Abreise sagte ich zum Reiseleiter: „Morgen fahren wir nicht nur 800 Kilometer nach Hause. Wir reisen 30 Jahre in der Zeit zurück.“

Damit meinte ich nicht die Digitalisierung in Dänemark. Vielmehr meine ich damit die Art, wie Dänen und insbesondere die Kopenhagener Zusammenleben gestalten.

Das Design | Wenn man Dänemarks und Kopenhagens Idee von Stadtplanung verstehen will, kommt man nicht an Jan Gehl vorbei. Foto aus dem Danish Architecture Center:

Als der 79-Jährige seinerzeit Architektur studierte, zeigten ihm seine Professoren Fotos mit Gebäuden. Um die Fotos zu machen, sind sie um 5 Uhr aufgestanden, damit keine Menschen auf den Bildern zu sehen waren. Gehl sagt, er habe im Studium gelernt, Skulpturen zu erschaffen, keine Gebäude für Menschen. Dann heiratete er eine Psychologin, „a big crossing point in my life“. Seither, sagt er, studiere er Architektur neu, seit 40 Jahren.

Das erzählt er in seiner Standardvorlesung, die zum Beispiel als Annual Lecture 2018 Mistra Urban Futures zu sehen ist, Video ab Minute 8:30. Oder im Podcast The Developer.

Gehl begann, Menschen zu beobachten. Er fuhr nach Italien und führte in den Altstädten akkurat Buch darüber, was in den Straßen, Gassen und auf den Plätzen geschah. Er schrieb auf, wie sich Menschen verhalten. Er bereiste andere Länder, andere Städte. Ihm wurde klar, dass die Architektur bislang einem Irrtum unterlegen war: Sie maß, wie viele Menschen wo gehen und fahren – um dann Straßen und Häuser zu gestalten. Dabei sei nicht wichtig, wo sie sich bewegen, sondern wo sie stehenbleiben, in Kontakt kommen, miteinander sprechen. So entstand Gehls Verständnis von Stadtplanung.

A good city is like a good party — people stay longer than really necessary because they are enjoying themselves.

Er beschäftigte sich mit menschlichen Dimensionen, mit Augenhöhen, Sichtachsen, wie weit wir gucken und laufen können, bei welchen Geschwindigkeiten wir noch was wahrnehmen können, welche Strecken wir wählen, warum wir lieber am Rand sitzen als in der Mitte, bis zu welcher Entfernung wir Mimik lesen können und vieles mehr.

Gehl kam zu dem Schluss, das der Mensch alles tut, um Energie zu sparen. Wenn wir uns entscheiden, wie wir eine Strecke zurücklegen, dann ist es immer eine Effizienzentscheidung. Also, sagte er sich, müssen Städte so gestaltet sein, dass sie effizient und bequem sind – nicht für ein Auto, sondern für den Menschen, für den menschlichen Körper und den menschlichen Geist.

Das Ergebnis ist eine Stadtplanung, die Plätze und Räume priorisiert, auf denen Menschen zusammenkommen und sich sicher fühlen, eine Planung, die am menschlichen Körper ausgerichtet ist, die Aktivität fördert und Gesundheit erhält. Er entwickelte eine demokratische Stadtplanung, die wiederum Demokratie fördert.

It emphasizes that we shall walk more, we shall meet each other more. That’s good for health, that’s good for safety, that’s good for social inclusion, that’s good for democracy. Don’t sit in your private little house and look out of little little windows. Come out in our wonderful outdoor spaces and enjoy the spaces with your wonderful fellow citizens.

Filmempfehlung: The Human Scale, verfügbar auf youtube. Leseempfehlung: Städte für Menschen. Außerdem ein Interview beim Deutschlandfunk.

Wege und Plätze | Der Reiseleiter und ich sind in den vergangenen Jahren mehr als tausend Kilometer mit dem Fahrrad durch Dänemark gefahren. Diese Mobilitätsform hat zwar den Nachteil, dass einem immer irgendwas weh tut und man sich fortwährend mit Keksen befüllen muss. Sie hat jedoch einen entscheidenden Vorteil: Man erkennt hervorragend Muster und Zusammenhänge, Verbindungen zwischen Menschen und Geographie, zwischen Städten und Stadtteilen, sich wiederholende Strukturen und die Prioritäten, die sich durchs Land ziehen. Diese Prioritäten finden in Kopenhagen ihren kummulierten Höhepunkt: Allerorten geht es darum, Gemeinschaft zu stärken. Der öffentliche Raum gehört dem Menschen, nicht Autos, nicht der Wertschöpfung, sondern dem Wohlbefinden der Däninnen und Dänen. Der Mensch wird willkommen geheißen: mit Bänken und Blumen, Schatten spendenden Bäumen, Spielgeräten, Wasser, Schaukeln und Rutschen – auch für Erwachsene -, mit Ruheliegen, Picknickmöglichkeiten, öffentlichen Toiletten, breiten Wegen und Beleuchtung.

Sollten Sie einmal in Kopenhagen sein, organisieren Sie sich ein Fahrrad und fahren Sie durch die Stadt. Sie werden erkennen, wie alles auf magische Weise verbunden ist, wie Wege sich öffnen und fügen, wie es fließt und wie verschiedene Orte und unterschiedliche Stadtteile sich zu einem verwobenen Ganzen zusammenfügen, das ohne Motor, nur mit menschlicher Körperkraft erfahrbar ist. Es existieren viele Plätze, die im Einzelnen unscheinbar wirken, die in ihrer Fülle und in ihrer Verbindung jedoch ein Netz bilden, das nicht nur für den funktionalen Teil des Erwachsenendaseins, sondern fürs Zusammenleben aller Altersgruppen sicher und praktikabel ist.

Kopenhagen hat weniger Spielplätze als deutsche Städte mit vergleichbarer Fläche. Es braucht auch nicht so viele, weil die Stadt selbst kinderfreundlich ist, weil sie Plätze hat, die zum Spielen, Rennen und Verstecken einladen. Eingezäunte Spielplätze helfen nicht, wenn die Stadt außerhalb des Zauns feindlich ist.

Dass Kinder Teil der Stadt sind, zeigt sich auch am Israels Plads, einem großen Platz, der umringt ist von Schulen (Foto des Reiseleiters aus dem vergangenen Juni):

Der Platz ist der Pausenplatz aller Schulen und gleichzeitig ein öffentlicher Ort. Kinder mischen sich mit Menschen, die einkaufen, mit Senioren, die sich ausruhen, mit Mittagspäuslern, die Smørrebrød essen. Keine Haftungsfrage, keine Angst: ein Schulhof, nicht eingezäunt? Der Platz ist übrigens auch Teil der städtischen Klimaanpassung. Er ist ein Regenrückhaltebecken, das tiefer liegt als die Umgebung: Regnet es zu viel, läuft er voll.

Gebäude für alle | Wir radelten zu den Nørrebrohallen. Ein Treffpunkt, eine Bibliothek, Sporthallen – alles öffentlich, alles steht für alle zur Verfügug.

Es gibt mehrere ähnliche Orte in Kopenhagen. Über die Seite bookbyen.dk („Buch die Stadt“) kann jeder sich einen Platz, einen Raum buchen. Ein Badmintonkort kostet beispielsweise 98 Kronen pro Stunde, das sind etwa 13 Euro. Als wir dort waren, war massig los: Die Leute kamen aus den Sporthallen, gingen hinein, trafen sich im Café, saßen einfach nur auf Bänken, besuchten die öffentliche Toilette, den Bücherschrank oder waren alleine oder mit Kind in der Bücherei. In der Eingangshalle standen locker 25 Kinderwagen. Es gibt einen Kochclub und andere Interessenskreise, außerdem Snakkeklubber für diverse Sprachen, in denen man seine Sprachkenntnisse vertiefen und sprechen üben kann – auch in Dänisch für alle Zugewanderten.

Wir hielten uns dort eineinhalb Stunden auf, lasen, aßen etwas. Ich nahm ein Buch aus dem Bücherschrank mit, einen Krimi, mein erstes Buch, das ich auf Dänisch lese. Mit etwas Anstrengung verstehe ich gut; mein Vokabelschatz erweitert sich um Wörter wie „Tatort“, „Ertrinkungstod“, „Zeugenaussage“ – mein Dänischlehrer wird irritiert sein. Das Schöne an dem Ort: Wir fühlten uns willkommen, obwohl wir nur Gäste waren. Ein Ort der unkomplizierten Freundlichkeit.

Die Bibliothek in den Nørrebrohallen war ein warmer, wuseliger, kreativer Ort. Den Sorte Diamant, Der Schwarze Diamant, die Dänische Nationalbibliothek, ist deutlich minimalistischer und vor allem dem Studium gewidmet.

Eine tolle Architektur.

Im Museum für Architektur und Design gab es übrigens eine Rutsche vom obersten Stockwerk ins Erdgeschoss – ausdrücklich auch für Erwachsene (mehr dazu, mit Bild). Ein wilder Ritt. Ich sah mein Leben an mir vorbeiziehen.

Rutschen-Architekt Carsten Höller:

Why are slides not used in architecture to complement stairs, elevators and escalators? They are fast, safe and energy-savvy – and they produce a sensation in the user that has been described as a kind of voluptuous panic upon an otherwise lucid mind, somewhere between delight and madness.

Das kann ich so bestätigen.

Epilog | „Aber in Deutschland ist doch nicht alles schlecht! – „30 Jahren hintendran – so kannst du das doch nicht sagen!“

In unserem Land sind Städte und Orte so gestaltet, dass sie funktionieren; dass sie effizient und vorschriftsgemäß sind. Dummerweise verhält sich der Mensch nicht normgerecht, sondern folgt seiner Intuition. In Dänemark passt sich die Stadt dem Menschen an, schafft Zugehörigkeit. In Deutschland muss sich der Mensch an die Stadt anpassen, steht der Individualismus über dem Gemeinsinn. Dieser Unterschied wirkt so fundamental, dass wir in Deutschland, selbst wenn alle Kommunen plötzlich Geld im Überfluss hätten, nur mehr von dem bekämen, was wir bereits haben: normtreu gestaltete Orte.

Bis wir diesen gedanklichen Sprung gemacht haben, werden Jahrzehnte vergehen.

Die Etappen | Auf der nächsten Etappe erzähle ich noch vom Radfahren in Kopenhagen:

#1 – Die Fahrt, der Wind, die Einöde, Schnee und ein Bällebad
#2 – Eine Erzählung über Museen und Friedhöfe
#3 – Brücken, Tunnel und Fähren – ein Beitrag für den Freundeskreis Ingenieurskunst
#5 – Test eines Mythos: Radfahren in Kopenhagen

I don't want your PRs anymore

Wed, 22 Apr 2026 04:38:30 +0000

I really appreciate that you're enjoying the software I'm maintaining and want to help. But we need to rethink this collaboration, because I feel like we're increasingly wasting each other's time.

Why I don't want to merge your PR

Since I don't really know you, I always have to assume that you might be trying to sneak in something malicious along with your changes, which makes reviewing and merging them riskier than implementing them myself.

On top of that, there are a lot of personal and subjective aspects to code. You might have certain preferences about formatting, style, structure, dependencies, and approach, and I have mine.

Then we often need to synchronize with respect to review, CI runs, merge conflicts, etc.

And then there's this common back-and-forth round-trip between the contributor and maintainer, which is just delaying things.

Even before LLMs, writing the code was not the main bottleneck for me. But writing code did take time, so a solid, working, easy-to-review PR was often worth the small extra risk and inconvenience.

With LLMs becoming quite good at implementing things, that tradeoff is almost never true anymore.

While I still need to review LLM-generated code, I generally don't have to worry about it being malicious the way an unknown contributor's code could be. I've already codified a lot of my coding preferences and style guidelines for my LLM. And I can rapidly iterate at my own pace without having to synchronize with another human who might be in a different timezone.

For these reasons, it's just easier if I make the code changes myself (with the help of an LLM).

The nature of software development has shifted

It's increasingly apparent that "the source code" is less "source" and more "code" — an intermediate formalized layer between ideas in the developer's head and instructions for the computer to execute. It's always been this way, but now, with the code itself being easier to generate automatically, it's just more visible.

There's a wide range of reactions to coding agents out there, from banning them to proclaiming that coding is dead and vibecoding is the future. Personally, as things are right now, I sit somewhere in the middle. I come up with the design, then let my agent do a lot of the actual writing, and then I review and refine the result.

I could get huge amounts of code written, but I'm bottlenecked on:

understanding — reading the existing code to be able to reason about it;
designing — coming up with the right changes and architecture;
reviewing — ensuring that the code is doing what I wanted.

The code in your PR doesn't help me much with any of these. So let's skip it — don't attempt to implement code changes with the goal of merging them into the codebase.

How can you help instead

As the "writing the code" part is becoming less valuable, all other ways of helping maintainers become relatively higher value.

Give feedback

As I'm busy implementing things, I often don't have much time to actually use them, or do good research on how to improve them.

Users telling me what works well and what could be improved can be very helpful.

Discuss ideas

I don't know everything, and discussing things with other people with different experiences and perspectives can help me understand what I should be building and how.

Report and investigate bugs

A good bug report is 3/4 of the bug itself being fixed.

If you spotted a problem, please describe it well, and even do the debugging to figure out how to reproduce it and where exactly the problem is.

Then discuss potential solutions.

Prototype changes

Send me a reference PR and/or the prompt you used to produce it.

Yes, I know I just said that I don't want your PRs. So let me explain. With LLMs, it's easier for me to get my own LLM to make the change and then review it myself.

BUT — using code for illustrative purposes still makes sense. A quick glance at code implementing something can be helpful, even if I don't end up merging it.

And if you share the actual "source" (prompt) to produce the "code", I can reuse and refine it, saving time.

Review code and point out problems

As I'm bottlenecked on reviews, an extra pair of eyes helps.

Fork the code and report back

Don't be afraid of forking the code and changing it however you want.

Having to come up with designs supporting multiple use cases, forming consensus, debating best outcomes, looking for compromises, etc. is very time-consuming.

LLMs enable a great deal of software customizability. You can make the changes you want by yourself faster and easier than ever, and then rebase them (or not) on top of upstream at your own pace.

Just fork. Add support for your own use case, do things your way, ask neither for permission nor forgiveness.

As a maintainer, this saves me time too. And in the end, maybe both of us can learn something from your version taking its own route.

Hister - Your Own Search Engine

Mon, 20 Apr 2026 12:47:21 +0000

Your Own
Search Engine

Full-text search across your files, visited sites and beyond.

Free Software
Self-Hosted
Privacy Respecting

Features

AI Integration

Optional semantic search and MCP connectivity

Privacy-focused

Keep your browsing history indexed locally. No remote servers, no tracking, no data leaving your machine.

Full-text Indexing

Search through the actual content of web pages and your local files.

Blazing Fast

Instant results as you type. Full keyboard-driven workflow for maximum efficiency.

Advanced Search

Powerful query language for precise results.

Flexible Management

Configure blacklist and priority rules to control your indexed content.

Browser Extensions

Available for Chrome and Firefox to automatically index websites you visit.

Offline Preview

Readable offline previews of any result. Access your saved pages without internet.