How does wrap-flow apply when a shape has holes? about svgwg

[AmeliaBR]

The wrap-flow property is applied to the excluded element, to define how text wraps around it. It is therefore not appropriate for controlling wrapping within a shape.

A single element might need both external and internal wrapping controls. For example, a pull quote in a magazine layout: you want the quote to wrap to a shape, but you also want the column text to wrap around it. See an example here of dual wrapping. Now imagine the leaf shape was a maple leaf or something else with deep lobes that interrupt the text. Do you want to continue the text on the other side of the interruption or not?

I think it is important to have author control over this, so we would need a new property. It would also be needed for CSS Shapes 2 / CSS Exclusions (which would define how to create layouts like the linked example).

The values for the new property (wrap-inside?) would be similar to those for wrap-flow, but with the important distinction that there could be more than two shape regions that intersect any given line of text. I would suggest the following options:

• all Text fills any region of the shape that it can fit into while respecting word breaks, continuing in straight lines.
• start Text fills the first shape region on each line (based on text direction), continuing until it reaches a shape edge, then shifts to the next line.
• end Text fills the first shape region on each line (based on text direction), continuing until it reaches a shape edge, then shifts to the next line.
• minimum Text only fills the shortest continuous section of the shape for that line.
• maximum Text only fills the longest continuous section of the shape for that line.

I would suggest that either all, start or maximum be chosen as the default value.

I can put together a demo of the options, if @Tavmjong does not already have something similar.

Note that I do not think that this property would be a reasonable way of dealing with flowing text from one shape to another, as describe in Issue #38. That is about filling one shape neatly, then moving to the next, like flowing from one column to another.

[AmeliaBR]

From the CSS/SVG working group joint face to face in Sydney on 3 February 2016, the following were confirmed:

• Default behavior for exclusions should be to break the text into separate line boxes before and after each interruption in the shape, similar to Tab's figure:

• The ability to control this behavior is desirable, and could be added with a new property in future.

[AmeliaBR]

Examples of the same shape with different wrapping scenarios. Text is manually positioned, so padding is not super precise and hyphenation may be non-standard, but you get the gist:

all wrapping (default)

start wrapping

maximum wrapping

The example brings up a problem with maximum (and also minimum): what happens when multiple spans along a line have the same available width? (This is also an issue with minimum/maximum for wrap-flow, and correct behavior is not currently defined in the CSS Exclusions spec.) I have fallen back to start for the example here.

[Tavmjong]

It was decided at the joint CSS/SVG working meeting that text is laid out on both sides of a hole. The SVG 2 spec has been updated.