Using textLength with tspan children - browsers vary in how they render things.

I've been working on a project that requires me to put text in tspan children to a text element, in order to control changes in font/font-size/color, etc for the various fragments.
However, I still need to be able to precisely define how long the text element needs to be via textLength.

In working with IE 11 and Firefox 28, I found that the 2 browsers differ substantially in how they implement the combination of the textLength and the tspan functionality.

I've put together a jsFiddle to illustrate the issue.  Depending on if you view this in IE or Firefox, you get different results:

There are 4 examples in the fiddle, from top to bottom

1.       textLength is specified as an attribute of the text element, the various text are all in tspan children of the text

2.       textLength is not in the text element, but in the first tspan child.

3.       No textLength specified at all (for reference only)

4.       PNG raster of what I am hoping is the target implementation when case #1 is the specification

a.       The textLength is specified as attribute to <text />

b.      The various <tspan /> children to text as a whole, fill up the extent defined by the textLength in the parent <text /> element.

It appears Firefox 28 implements the desired functionality.
What we see is that IE and FF differ in how they implement the effect whein tspan and textLength are used in a <text /> element - the result is thus not at all consistant and a problem for authors.

What are the thoughts of the community on expected behavior?

Thomas Smailus, Ph.D.  P.E.
Boeing Information Technology

Received on Friday, 16 May 2014 22:15:52 UTC