3

I'm seeing inconsistent rendering of SVG <tspan> elements in regards to text-decoration.

Using this simple testcase:

<text font-family="Helvetica" x="0" y="50" font-size="30" text-decoration='underline overline'>
  outer text
  <tspan font-size="15" text-decoration="overline">tspan w. overline</tspan>
</text>

WebKit (~Safari 8)

enter image description here

Firefox (37)

enter image description here

Internet Explorer (11)

enter image description here

The section on text decoration doesn't seem to explain much.

Since ‘text-decoration’ is specified on the ‘text’ element, all text within the ‘text’ element has its underline rendered with the same fill and stroke properties as exist on the ‘text’ element (i.e., blue fill, red stroke), even though the various words have different fill and stroke property values. However, the word "different" explicitly specifies a value for ‘text-decoration’; thus, its underline is rendered using the fill and stroke properties as the ‘tspan’ element that surrounds the word "different" (i.e., yellow fill, darkgreen stroke)

There's some clarification of fill/stroke but nothing on font size. Does this mean this is left up to implementors' decision? Is this defined/explained anywhere else?

kangax
  • 38,898
  • 13
  • 99
  • 135
  • Firefox does the right thing according to the CSS specification and the wrong thing according to the SVG specification. If there are inconsistencies the CSS specification will generally win in Firefox. Not sure that the others are right by any specification really. – Robert Longson Jan 12 '15 at 22:23
  • Yeah, I came across similar comment by Boris — http://stackoverflow.com/a/10907588/130652 – kangax Jan 12 '15 at 22:39
  • 1
    Also if check the strike line, you will notice that firefox render it slightly above half font, while chrome slightly below. – AndreaBogazzi Jan 17 '15 at 13:59

0 Answers0