[BATIK-1092] Add support for background on text content elements

• Type: New Feature
• Status: Open
• Priority: Major
• Resolution: Unresolved
• Assignee: Glenn Adams
• Reporter: Glenn Adams
• Created: 13/Nov/14 04:27
• Updated: 16/May/18 09:45

Description

An oft requested feature in SVG is the ability to draw a background color on text and tspan. While it has been suggested that this can be done using a separate rect element, it is either impractical or highly inconvenient to do this because the bounding box and/or line height geometry of this rect is not available at authoring time.

Given the greater use of CSS features in SVG 2.0 and the general desire to support CSS properties, it is proposed that the 'background-color' [1] property be supported on both text and tspan elements.

[1] http://www.w3.org/TR/CSS2/colors.html#background-properties

In addition, it is desirable to allow the author to customize the presentation of the background decoration by distinguishing between the use of bounding box versus line height in order to control the block progression dimension. Further, it is desirable to allow the author to outset or inset the edges of the background decoration.

In order to support these latter two features, it is proposed that the following additional properties be supported:

• background-mode, with values 'bbox' or 'line-height', default of line-height

• background-outline- {top,right,bottom,left}

  takes <length> value, where positive is outset and negative is inset, and default is 0

• background-outline, a shorthand for the above, with value syntax <length> {1,4}

  , where 1 value expresses out(in)set on all four edges, 2 values express out(in)set on top/bottom and right/left, 3 values express out(in)set on top, left/right, bottom, and 4 values express out(in)set on top, right, bottom, left

This background outline operates similarly to the CSS outline-width property [2], except that (1) the outline color is set to the background color, (2) the outline style is solid, and (3) the outline widths can be independently specified for each edge (instead of the same value applying to all edges). In addition, this outline is drawn adjacent to the edges of the background rectangle determined by the 'background-mode' property, i.e., bounding box or line height.

[2] http://www.w3.org/TR/CSS21/ui.html#propdef-outline-width

It might be argued that this background-outline is equivalent to the CSS 'border' property semantics. We do not take that position here because it may be desirable to add border or padding support to the SVG text and tspan elements in the future, and we don't wish to influence the possible semantics of doing so. If border and padding were to be added in the future, then the background-outline would effectively intersect with the border or padding regions, but be drawn before, not after (as is done with the CSS outline property); i.e., the drawing order should be background with background outline, text with decorations, then borders (if added in future), then CSS outline (if added in future).

Issue Links

• is duplicated by: BATIK-1093 Add support for background on text content elements