[css-shapes] Consider adding shape-outside: line-box

[jpamental]

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

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

[mirisuzanne]

This would also be useful as a clip-path, making it easier to create a reliable ragged background effect.

[astearns]

It might be useful to add something to https://drafts.csswg.org/css-inline-3/#inline-box-dimensions for the ragged background effect. It currently defines the block-oriented sizing of the line box's content area. We could add inline-oriented sizing controls there as well (which might then affect the clip-path and shape-outside bounds for the value proposed here)

[MatsPalmgren]

Here's an example from a printed magazine. In this case, it's not just the line box that defines the shape but the outline of the text glyph:

[faceless2]

@MatsPalmgren you could do that one with initial-letter already - no need for a change to shape-outside.

[MatsPalmgren]

@faceless2 Oh, I didn't know that. You're right, it looks like initial-letter-wrap:all address that use case.

[jpamental]

Thanks for pointing to that one @faceless2 - now if only we could get browsers to implement initial-letter. So far Safari is the only one, and only partially at that :(

[MatsPalmgren]

Perhaps it could be generalized to all floats by adding something like that to shape-outside though? I suspect that if you implement initial-letter-wrap:all then it would be trivial to re-use the same code to apply it to floats. That said, I don't know if it would be useful beyond first-letters...

[faceless2]

I agree there's a definite requirement here - initial-letter-wrap: all isn't going to help if you've got more than one line.

To me it this looks like yet another place where the requirement is "take a rendered DOM fragment and use the rendering as input to the layout or rendering of another DOM element". I listed a few of these in #1981, and as I suggested there, I'd personally like to see all these consolidated under the url() function.

This would mean url(#foo) means "the bitmap image of the stacking context #foo", when we want to treat it as an image (i.e. if referenced as a background-image or mask-image), or "the outline of the stacking context #foo" (if referenced as a clip-path or shape-outside)

In other words, I don't see any reason why you couldn't do this:

<style>
#floated {
    shape-outside: url(#floated);
    float: left;
    width: 10em;
}
</style>
<div id="floated">Such a very strange odyssey indeed</div>

shape-outside doesn't affect the layout of the element it's set on, so there's no dependency loop here.

[fantasai]

@faceless2 But why do we need the ID in that case? It's a self-reference, couldn't we make it a keyword so that you can set it on a set of elements at once?

[faceless2]

For this individual case? Sure, great idea - shape-outside: self or something. But I'm still angling for a more general solution where a URL to a stacking-context-root element can be used to retrieve its outline (for clipping) and its rendered bitmap (for everything else). shape-outside: self is just a special case of that.