Improved SVG text support in Firefox Nightly

  ·   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.

Twelve comments

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

  1. Robert O'Callahan
    1 July 2013, 10:36pm

    I was hoping you’d blog about this. Hooray!

  2. Great work, Cameron! This turned out to be a lot more work than we expected – thanks for sticking in there!

  3. Marek Raida
    1 July 2013, 11:51pm

    Incredible, great, thx very much!!

  4. Emanuel Hoogeveen
    2 July 2013, 1:23am

    Wow! That’s quite a lot of improvements. Sounds like SVG text is much more of a first class citizen now :)

  5. Really great! I wonder whether other browsers are on-par.

  6. Great work, Cameron!

    Now that you’ve laid the groundwork, can we get a nightly that includes SVG text wrapping (behind a flag, of course)?

  7. I was about to ask about SVG text wrapping, too. Do these patches make it easier to implement it? That would be neat!

  8. It definitely lays the groundwork for it. Doug, if we can settle on how to do the rectangular text wrapping and get some preliminary wording in the spec I’ll look at getting a proper patch together.

  9. I’ve been working on the Text chapter this week with the goal of getting the basic text wrapping stuff in. It’s requiring a reorganization of the text layout stuff. Hopefully will have something to show in a couple of days.

  10. John Vandervort
    5 July 2013, 4:08am

    Really appreciate the hard work getting this done. Looking forward to textLength!

  11. There were some very welcomed fixes in the last FF revision.

  12. SVG should be used more. And this is an important step towards resolution independence / HiDPI support!

Leave a comment