Hairlines
Four ways to draw a one-pixel line, and what a screen does with each.
The grid lines ruling this site are one pixel wide, and getting them to agree took longer than anything else here. A browser picks its own rhythm for a dashed border and will not take one from you.
What you see
Real lines on your screen, nudged like a scroll or a resize moves them.
Snapped · jumps a pixel, changes width
Smoothed · stays put, brightens and dims
Why
Screen pixels at 150%, drawn big. Blue is the true line.
Snapped · sharp, same width
Smoothed · even, but grey
What it is
Two sides, row for row. On the left, real lines on your screen, snapped to the pixels and smoothed across them, nudged by tenths of a pixel the way a scroll or a resize moves them. On the right, the same two lines drawn as screen pixels at 150% scaling, to show why one jumps and the other dims.
Why I needed it
Every frame, divider and rule on this site is drawn by the same two components. When I built them I had three ways to draw a line and no way to choose between them by looking, because what separates them only appears on some screens.
How I did it
The cadence is settled: every dashed line here is an SVG stroke asking for four on and four off. The rest is a trade. At a fractional ratio, snapping the stroke keeps every line at full strength and lets some come out a column wider, while drawing where the geometry says keeps the field even and every line soft.