7. Text
7.1 Rendering Text
There are more properties associated with the text element than any other. Many are concerned with achieving good results when the text is non-European requiring a different writing direction from left-to-right and even bi-directional text (in Hebrew, for example, the writing direction is normally right-to-left but embedded European words are written left-to-right).
The properties are a superset of the ones defined in CSS.
7.2 Font Properties
Figure 7.1 shows some of the properties that are primarily concerned with how individual characters are rendered.
The font-family property defines the font to be used for the text. The font-size property defines the size of the characters using one of the SVG unit measures.
The font-style property has the values normal, italic and oblique.
The font-weight property defines the boldness of the rendering and has the same set of possible values as those used in CSS. Similarly, the text-decoration property has the same possible values as those used in CSS.
Text is rendered in a similar way to paths and both the interior fill of the characters and the stroke to be used for the outline can be specified by the fill and stroke properties.
Figure 7.1: Font Properties
7.3 Text Properties
One of the most useful properties associated with the whole text string is the text-anchor property (Figure 7.2) which specifies where in the text string the text origin is located. This is particularly useful when trying to centre text, say, within a rectangle. In this case defining the origin at the middle position in the x-direction and defining the value as middle will achieve the desired result.
Simple formulae can be rendered using the baseline-shift property. The example in Figure 7.2 requires the following:
<text x="10" y="240" style="fill:blue" >x <tspan style="baseline-shift:super">super</tspan> +y <tspan style="baseline-shift:sub">sub</tspan> +1 </text>
The writing-mode property defines the direction that the text is drawn. The possible values are lr, tb, and rl.
Figure 7.2: Text Properties
For those using the Opera browser, it should be noted that Opera expects all font-size related values to have their coordinate units defined. So for Opera, font-size:40 needs to be written as font-size:40px.