More SVG text news

  ·   A couple of notes subsequent to my last post about Firefox Nightly’s SVG text improvements.

First, Robert Longson pointed out to me that there were a couple more features that SVG text now supports since the rewrite landed:

  • You can use ‘font-variant: small-caps’.
  • SVG text can be copied to the clipboard with Cmd/Ctrl+C once selected.
  • SVG DOM methods for selecting text – selectSubString and deselectAll – are now implemented.

Second, the latest Firefox Nightly (2013-07-08) now supports the textLength="" and lengthAdjust="" attributes on the <text> element (but not yet on child text content elements). These attributes are useful if, for example, you have some text in a diagram that you want to ensure does not run over some other elements, which might happen if the font used is not present on the client, or if text layout resulted in a total text width different from what the author expected.

You can see the effect of using textLength="..." lengthAdjust="spacingAndGlyphs" in this example:

If you mouse over the ellipses, the text is changed to use a monospaced font. This would normally make the text wider than the ellipse, but the use of lengthAdjust="spacingAndGlyphs" scales the text so that it retains its specified width.


You can subscribe to the comment feed to follow the responses to this entry.

Leave a comment