Support rect() and xywh() in shape-outside

concepts

1. Text Wrap Explorer

   Live controls for shape-outside: rect() and xywh() on a floated element. Adjust insets or position/size values and watch the paragraph reflow around the rectangular exclusion zone in real time.

2. Shape Parity

   Side-by-side demonstration showing the same rect() / xywh() value applied to both clip-path and shape-outside. Confirms that both properties now accept identical syntax so one shape definition drives both the visual cutout and the text exclusion zone.

3. rect() vs clip-path Parity

   Interactive sliders for rect() and xywh() applied simultaneously to shape-outside and clip-path side by side. Toggle between the two syntaxes, see the live CSS declaration, and verify the Chrome 149 cross-property parity.

4. Syntax Converter

   Convert between rect(), xywh(), and inset() in real time. Edit any field and all three panels update immediately, with a live float preview so you can see how the text wraps around the resulting shape-outside region.

5. inset() vs rect() vs xywh()

   Three columns, one rectangle. Each syntax drives an independent float with identical coordinates. Adjust sliders to resize and reposition the shape and compare how the three declarations differ — including a reference table of parameter meanings and auto keyword support.

6. shape-margin with rect() and xywh()

   shape-margin adds breathing room between the rect() or xywh() shape boundary and the flowing text. Drag the margin and inset sliders to see the dashed margin boundary expand outward from the clipped shape — particularly useful when clip-path cuts the float to a smaller visual region and you want text to stand off from the visible edge.

why it shipped

The CSS basic shape functions are split across two main use sites: clip-path (visual clipping) and shape-outside (float exclusion). Before Chrome 149, rect() and xywh() were only accepted by clip-path — shape-outside recognised inset() for rectangles but not the newer, more readable syntax. A developer who wanted a rectangular float exclusion that matched a rectangular clip had to translate between two different syntaxes (xywh(10px 20px 100px 50px) vs the equivalent inset() expanded form). Chrome 149 adds rect() and xywh() to shape-outside, completing the parity that Firefox and Safari already had.

syntax quick reference

• rect(top right bottom left) — insets from each edge of the reference box, like inset() but edge-named. E.g. rect(10px 20px auto auto).
• xywh(x y width height) — origin + dimensions syntax. E.g. xywh(10px 20px 100px 50px) creates a 100×50 box at offset (10, 20).

references

• ChromeStatus entry
• MDN — shape-outside
• CSS Shapes Level 1 spec
• Chrome 149 beta blog post