Improved SVG text support in Firefox Nightly

1 July 2013   ·   On the weekend, I landed the final patch in what turned out to be quite a long running project to overhaul Firefox’s SVG text support to reuse the same text layout and rendering code that it uses for HTML. Much of the work was done in bug 655877, which ended up being a series of 50 patches^(!), with about 40 followup bugs to get the code into shape so that it could be turned on by default.

Improvements resulting from this work include the following:

• The ‘text-decoration’ property is now honoured, so underlines, strike-throughs and overlines are painted.
• Searching for text on a page will now search through and highlight SVG text.
• Text can be selected with the mouse.
• Layout of bidirectional text when there are multiple child nodes of a <text> element is now correct.
• The ‘white-space’ property now applies to SVG text. In the future, in SVG 2, ‘white-space’ will be recommended method to control white space handling rather than xml:space="". ‘white-space’ can be used to render manually wrapped text when using the pre and pre-line values. ‘line-height’ is used to determine the spacing between lines.
• Various CSS3 Font properties, including the new ‘font-variant’ related properties to turn on and off OpenType features, now apply to SVG text.
• The :first-letter and :first-line pseudo-elements now apply to SVG text.

If you work with SVG content, please download the latest Firefox Nightly and test out the new functionality, and if you encounter any issues, please do file a bug.

My thanks to roc, jwatt, longsonr, bz and dbaron for their help and reviews!

---

Update 3 July 2013: Here is a page demonstrating these features.