Intent to Prototype: Support path() and shape() in shape-outside

[Chromestatus]

Contact emails

cg...@chromium.org

Specification

https://drafts.csswg.org/css-shapes/#shape-outside-property

Summary

Adds support for the path() and shape() shape functions in the CSS shape-outside property. These functions allow developers to define float exclusion shapes using rectangle coordinates, aligning Chrome with Firefox and Safari which already support this feature.

Blink component

Blink>CSS

Web Feature ID

shape-outside

Motivation

The CSS shape-outside property currently accepts basic shape functions (circle(), ellipse(), inset(), polygon()) and the url() function for image-based shapes, but it does not support path() or the newer shape() function. This is an inconsistency in the CSS Shapes specification, since path() and shape() are already supported in other CSS properties such as clip-path and offset-path. Web developers who want to wrap text around complex, arbitrary shapes are forced to work around this limitation by using image-based workarounds (e.g., transparent PNG images with url()), which are less ergonomic, harder to maintain, not responsive, and not animatable. There is no way today to use an SVG-style path string or a shape() command directly in shape-outside. Supporting path() and shape() in shape-outside brings parity with clip-path and offset-path, reduces the need for image-based hacks, and enables developers to define complex text-wrapping shapes inline in CSS. It also enables shape animation when combined with CSS transitions and animations, improving the expressiveness and capability of CSS layout.

Initial public proposal

No information provided

Goals for experimentation

None

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/u/2/issues/502328208

Estimated milestones

Shipping on desktop	149
Shipping on Android	149
Shipping on WebView	149
Shipping on iOS	149

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5080980370096128?gate=5145881268584448

This intent message was generated by Chrome Platform Status.