Cutting a Shape Out of a Rectangle the Browser Insists On
System Design

Cutting a Shape Out of a Rectangle the Browser Insists On

Subtitle: Clipping changes the picture, not the box. Left column - Layout: still a full rectangle: - Every element laid out is a box - It still occupies that rectangle - It pushes neighbours the same way - It reserves exactly the same space - Geometry never learns about the cut Right column - Paint: only pixels survive: - You declare a region to keep - Pixels outside it are discarded - Thrown away at composite time - A visual result, not a structural one - The box stays, the picture shrinks Shapes and motion: - inset, circle, ellipse - polygon: a list of coordinate pairs - or a reference to an SVG path - Paint-time, so the compositor animates - Tween needs equal point counts Simple difference: - Layout box = the unchanged rectangle - Painted area = the clip region only Three traps it leaves behind: - Cut-away corners still swallow clicks - Screen readers announce hidden text - It clips, it never reflows text - Wrapping is shape-outside, not this Taped rule strip: It hides pixels, not geometry. Sticky note - Honest test: Click the empty corner where the shape was cut away. Whatever receives that event proves the box never left.