Text Decoration in SVG 2
Background
SVG 1.1 includes simple text decoration based on CSS 2 with one main difference: SVG uses the 'fill' and 'stroke' values to paint the text decorations.
SVG cannot only use solid colors for painting the decorations, but can also use gradients and patterns.
One thing to note about text decorations in SVG is that the 'fill' and 'stroke' values of a decoration are set to the 'fill' and 'stroke' values of an element when the 'text-decoration' property is explicitly set. These values are applied to all child elements even if the child elements have different 'fill' and 'stroke' values. (This parallels what is done with HTML/CSS2.)
CSS 3 Text Decorations
CSS 3 Text Decorations introduces the new properties:
- 'text-decoration-line' (equivalent to CSS 2.1 'text-decoration').
- 'text-decoration-style' (sets the style of the decoration, e.g. 'wavy').
- 'text-decoration-color' (sets the color of the text decoration).
The 'text-decoration-line' and 'text-decoration-style' properties are immediately usable in SVG.
The 'text-decoration-color' property has some problems. SVG does not use the 'color' property for painting text so it is not clear how 'text-decoration-color' should be mapped to the 'fill' and 'stroke' of SVG text decoration. 'text-decoration-color' also does not allow the use of gradients, patterns, or other SVG paints.
The 'text-decoration-color' property is quite useful. It allows one to have a different color stroke from the text color without resorting to nested <tspan>'s (in SVG) or nested <span>'s (in HTML).
This leads to the question, how should text decoration paint be handled with CSS 3 text decorations. Here are some options:
Option 1: Don't allow 'text-decoration-color'
This would be the simplest route. SVG would then still require the nested <tspan> 'hack' shown above to set a different decoration paint than used for the text.
Option 2: Let 'text-decoration-color' set text 'fill'
This is also fairly straight forward to implement but it breaks the SVG pattern of treating 'fill' and 'stroke' the same in terms of paints.
Option 3: Add new SVG only 'text-decoration-fill' and 'text-decoration-stroke' properties
This keeps the SVG pattern of treating the 'fill' and 'stroke' the same way and it allows the use of all SVG type paints (gradients, etc.). This actually is trivial to implement as any SVG renderer already has to track the 'fill' and 'stroke' paints used for text decoration separately due to the inheritance rules.
Inkscape trunk implements CSS3 text decorations (rendering only), for the moment with option 2 but option 3 is highly preferred and is only a few lines of code to implement.
Appendix: Implementation Observations
- Chrome implements CSS3 text decorations in HTML but not SVG except that it recognizes 'text-decoration-line' as an alias for 'text-decoration' in SVG.
- Chrome text decoration does not respect the 'paint-order' property (it does use 'paint-order' for rendering text).
- Chrome seems to have problems with decorating white space.
- Firefox only implements CSS2 text decorations.
- Inkscape trunk implements CSS3 text decorations (rendering only).
Appendix: CSS Text Decoration in HTML
CSS 2
Underline Overline Line-through Blink Underline and Overline
CSS 3 - Shorthand
Underline Solid Blue Overline Double Red Line-through Dashed Green Blink Wavy Purple Underline Wavy Purple
CSS 3 - Longhand
Underline Solid Blue Overline Double Red Line-through Dashed Green Blink Wavy Purple Underline Wavy Purple
Inheritance
This is an example of crossed out words with a different color text decoration.
This is an emphasized word. This is an emphasized word. This is an emphasized word. This is an emphasized word.