How does wrap-flow apply when a shape has holes? #37

nikosandronikos opened this Issue Jan 30, 2016 · 4 comments


None yet

3 participants


Source: (See 3.3)

The ''wrap-flow' property allows choosing how wrapping flows around an exclusion. It's not clear how this would apply to divided lines from the 'shape-inside'.

AmeliaBR commented Feb 2, 2016

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 commented Feb 3, 2016

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:

Text filling an X-shape

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

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)
N-shape filled with the introduction to the SVG 2 spec

start wrapping
Same shape, part of same text, but only the left side of the N is filled

maximum wrapping
Same N-shape, this time text fills the top left and then the bottom right

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 commented Apr 6, 2016

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.

@Tavmjong Tavmjong closed this Apr 6, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment