Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.Sign up
GitHub is where the world builds software
Millions of developers and companies build, ship, and maintain their software on GitHub — the largest and most advanced development platform in the world.
How does wrap-flow apply when a shape has holes? #37
Source: http://tavmjong.free.fr/SVG/TEXT_SYDNEY_2016/#Wrapped (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'.
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 (
I would suggest that either
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.
From the CSS/SVG working group joint face to face in Sydney on 3 February 2016, the following were confirmed:
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:
The example brings up a problem with