Demonstration of improved SVG text features in Firefox 25

Underlines are finally here!

Text decorations

Underlines, line-throughs and overlines are now painted, and they take on the same fill and stroke as the glyphs in the text.

Why not try to search, search, search! for text on the page?

Finding text on the page

Try pressing ^F (or ⌘F) and searching for the word “search” on this page. The SVG text on the left should be highlighted. Click the “Highlight all” button on the Find toolbar to highlight all of the matches.

Wikipedia is called ויקיפדיה in Hebrew.

Correct handling of bidirectional text

Note that the entire word “ויקיפדיה” is ordered correctly. In older versions of Firefox, the characters within each individual coloured span would be ordered correctly, but the spans themselves would not be ordered correctly relative to each other.

This is some text that has been manually wrapped using the ‘pre-line’ value of the ‘white-space’ property.

‘white-space’, ‘text-transform’ and :first-line

The ‘pre’ and ‘pre-line’ values of the ‘white-space’ property can be used not only to avoid collapsing white space (as xml:space="preserve" does), but also to perform manual line breaking. :first-line was used to style the first line of the text with ‘text-transform’, both of which are also newly supported.

spilled coffee font-variant-ligatures: no-common-ligatures font-variant-ligatures: discretionary-ligatures

Using OpenType features

Hover over the purple text to turn discretionary ligatures on using the ‘font-variant-ligatures’ property.

Actually it turns out this already worked with the old SVG text support! But I like the example so I’m leaving it here…

And all of the text on the page should be selectable with the mouse.