SVG 2 Flowed Text

SVG 1.2

SVG 1.2 flowed text is complicted: 11 elements:

1. flowRoot
2. flowRegion
3. flowRegionExclude
4. flowDiv (includes text and graphics)
5. flowPara
6. flowSpan (tspan)
7. flowRegionBreak
8. flowLine (line break)
9. flowTref
10. flowImage
11. flowRef

Partially implemented by Batik and Inkscape

Text flowed into a Chinese Coin. Done in Inkscape.

Text flowed into three circles. Done in Inkscape.

SVG 2 Requirements

• Keep it simple.
• Keep it consistent with CSS

SVG 2 Proposal

Rely on CSS Exclusions and CSS Shapes:

• "shape-inside": defines wrapping context.
• "shape-outside": defines exclusions.
• "wrap-margin": padding inside shape-inside.
• "wrap-padding": padding outside shape-outside.

Shapes defined by SVG elements.

	<def>
	  <circle id="mycircle" cx="150" cy="150" r="125"/>
	</def>
	<text x="100" y="100" font-size="18px" text-align="justified"
	  line-height="125%" wrap-margin="25"
	  shape-inside="url(#mycircle)">This is a mockup of...</text>
      

Text flowed into circle using CSS Exclusions.

	<text x="100" y="100" font-size="18px" text-align="justified"
	  line-height="125%" wrap-margin="25"
	  shape-inside="url(#mycircle),url(#mysqare)">This is a mockup of...</text>
      

Text flowed into circle and square using CSS Exclusions.

Note: The way I have specified the flow regions conflicts with CSS. I am told the correct way to do this is with CSS Regions. That seems overly kill for our needs.

	<text x="100" y="100" font-size="18px" text-align="justified"
	  line-height="125%" wrap-margin="25"
	  shape-inside="url(#mycircle)"
	  shape-outside="url(#mycircle1),url(#mycircle2)">This is a mockup of...</text>
      

Text flowed into circle but excluded by two other circles.

Lines and paragraphs

SVG doesn't have <br/> and <p>/</p>; rely on CSS Text 3 properties:

white-space

• "pre-wrap": white spaces preserved, but with wrapping.
• "pre-line": collapes white space, but with wrapping and linebreaks.

Additional properties of interest:

• tab-size
• line-break
• word-break
• hyphens
• overflow-wrap/word-wrap
• text-align
• text-align-last
• word-spacing
• letter-spacing
• text-indent
• hanging-punctuation

Note: 'x' and 'y' are ignored when flowing text but can serve as a fallback for SVG 1.1 renders.

Doug's proposal

A simple proposal for defining a rectanglular wrapping context using the width/height, top/right/left attributes.

• Email
• Proposal
.