W3C home > Mailing lists > Public > public-css-archive@w3.org > June 2019

[csswg-drafts] [css-shapes] Consider adding shape-outside: line-box (#4003)

From: Jason Pamental via GitHub <sysbot+gh@w3.org>
Date: Tue, 04 Jun 2019 17:41:32 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-452123664-1559670091-sysbot+gh@w3.org>
jpamental has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shapes] Consider adding shape-outside: line-box ==
I'd like to propose adding a new value to the `shape-outside` property of `line-box`. This would enable floating a title or other block of text and allowing text to wrap around it following the contour of that floated text. It would operate in a similar manner to `shape-outside: <image>` when the image has an alpha-channel transparency. It should also leverage `shape-margin` attributes as well.

While it's possible to achieve this using a `polygon` shape, adding `line-box` would mean it would work with any text rather than having to be custom-coded.

**Examples**
<img width="701" alt="Screen Shot 2019-06-04 at 1 32 19 PM" src="https://user-images.githubusercontent.com/537413/58900763-c8652400-86cd-11e9-9c04-a153de010dc5.png">

Here is a CodePen example using `shape-outside: <polygon>` to mimic the effect:
https://codepen.io/jpamental/pen/LovYov

Here is a real-world example that is a bit more responsive:
https://rwt.io/blog/2018/10/georgia-my-mind

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

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4003 using your GitHub account
Received on Tuesday, 4 June 2019 17:41:34 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 19 October 2021 01:31:10 UTC