The Carpenter's Pencil Mark: On the Ghost of a Relocated Element

Before a saw ever touches wood, there is the pencil mark. It’s a faint, gray line, a commitment to a future cut. In the old shop, my grandfather would make his mark, cut, and then plane the edge smooth, erasing the evidence of his intention. The final piece bore no trace of the guide that shaped it. I’ve been thinking about this while watching elements on a page jump, shudder, and finally settle into place. Our modern pencil marks are often left visible, haunting the user.

We call these ghosts Cumulative Layout Shift, and they are the faint, digital scars of our poor planning. Consider a common, humble component: a ‘Read More’ button placed below a summary text. Simple. Innocuous. Yet, if that text block’s font hasn’t finished loading, the browser reserves space for it based on a fallback. The button sits comfortably, say, 400 pixels down the page. Then the web font arrives—perhaps a slightly taller, more elegant typeface. The text block expands by 18 pixels. And the button? It is ruthlessly shoved downward, a full 18 pixels into the space where the user’s cursor might have been aiming.

The Erasure of Intention

That shove is the ghost of our pencil mark. We intended for the button to be there, but we failed to account for the true dimensions of the material. In woodworking, to leave the guide mark on the finished piece is a sign of a rough craft, of work not brought to completion. On the web, it is a sign of an experience not fully considered. The user’s trust in the stability of the page is sheared away, pixel by pixel, with every unexpected movement.

The fix, like planing the edge, is about reserving the right space from the start. It is the ‘aspect-ratio’ on an image that holds its box firm while the file streams in. It is the ‘width’ and ‘height’ attributes we so carelessly omit. For that text block and its attendant button, it might be a simple ‘min-height’ on the container, calculated not for the fallback, but for the intended font. It is the conscious decision to define the space our element will inhabit, even while its final form is still traveling the network. We must draw our pencil mark, then build to its dimensions, so that when the material finally settles, it fits the space perfectly, leaving no ghost of its journey.

This is the quiet craft of layout stability. It’s not about the grand hero image or the sprawling interactive map; it’s about the humble button, the label, the line of text. It’s about the thousand small assurances that the ground beneath a user’s attention will not lurch. In the end, a good page, like a well-made joint, shows only the seamless meeting of parts. All the guiding marks, all the provisional calculations, are erased by the care of the craft. The user sees only the solid, stable whole, and feels, without knowing why, that they are in steady hands.

Notes & further reading

A few pages I came back to while writing this: