Proposals/SVG2 Text

From SVG

Overall goal: align as close as possible with CSS, add text wrapping.

Aligning with CSS

How far do we want to go? For example, do we follow CSS 3 Writing Modes and deprecate properties like 'glyph-orientation-horizontal'?

Adding text wrapping

The key requirement is to provide a wrapping context. Two ways to do it:

  • Rectangle wrapping context via 'width' and/or 'height' attributes in <text> element. See Doug's proposal: Wrapping_Text.
  • Reference an SVG shape using 'shape-inside'. See Tav's proposal Flowed Text.

Notes:

  • Attributes 'x', 'y' are ignored but can serve as fallback for non-SVG 2 renderers.
  • Attributes 'dx', 'dy', and 'rotate' are applied after text-wrapping (this allows the ability to rotate characters... how useful is this? maybe we should ignore these too).
  • text-anchor is ignored.
  • text-align required.
  • Paragraphs/line breaks done with 'white-space'.
  • Other CSS 3 Text properties added if useful.

Reorganization of Text chapter:

Mostly rearranging text layout sections:

  • Introduction
  • Characters and their corresponding glyphs.
  • Fonts, font tables, and baselines.
  • The 'text' element.
  • The 'tspan' element.
  • The 'tref' element.
  • Text layout introduction and common properties.
    • Inline-progression direction.
    • Glyph orientation.
    • Baseline alignment
    • Spacing properties
    • White space handling
    • Text overflow
    • Text rendering order
    • Etc.
  • Simple text layout.
    • Current position.
    • Text anchoring
    • Etc.
  • Wrapped text layout.
    • Wrapping context
    • Text alignment
    • Etc.
  • Text on path.
    • 'textPath' element
    • etc.
  • Text decoration
  • Font selection
  • Alternative glyphs.
  • Text selection and clipboard operations
  • DOM interfaces

Relevant CSS Specifications

CSS 2.1: REC

  • line-height

CSS Text Module Level 3: WD, ED

  • text-transform
  • white-space (Already partially in SVG2)
  • tab-size
  • line-break
  • word-break
  • hyphens
  • word-wrap
  • overflow-wrap
  • text-align
  • text-align-last
  • text-justify (At risk)
  • word-spacing (Modified from SVG 1.1)
  • letter-spacing (Modified from SVG 1.1)
  • text-indent
  • hanging-puctuation (At risk)

CSS Text Decoration Module Level 3: WD, ED

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration (Redefines as shorthand)
  • text-decoration-skip
  • text-underline-position
  • text-emphasis-style
  • text-emphasis-color
  • text-emphasis
  • text-emphasis-position
  • text-shadow

CSS Writing Modes Module Level 3: WD, ED

  • direction
  • text-combine-horizontal
  • text-orientation
  • unicode-bidi
  • writing-mode (Depricates SVG1.1 writing modes)

CSS Basic User Interface 3: WD, ED

  • text-overflow

CSS3 line?

Seems out-of-date.

CSS Exclusions Level 1: WD, ED

  • wrap-flow
  • wrap-through

CSS Shapes Level 1: WD, ED

  • shape-outside
  • shape-margin

CSS Shapes Level 2:

  • shape-inside
  • shape-padding

Also references to SVG elements.

CSS Regions Level 1: WD, ED

CSS Fragmentation Level 3: WD, ED