So long as we're tidying up text

Take a look at this screen shot of five modern browsers rendering a
relatively simple SVG file with one text tag having various text effects
applied:

 

http://srufaculty.sru.edu/david.dailey/svg/text/FancyTextBrowsers.jpg 

 

I must surely get some sort of prize for maximizing the ratio of
Sum(BrowserDiscrepancies) / SVGFileSize . The browsers depicted are
(clockwise from upper left): 

Opera, Firefox, Chrome, IE9, and Safari.

 

The raw file (barebones version ) is at
http://srufaculty.sru.edu/david.dailey/svg/text/textfeatures.svg 

(Though the one depicted in the screen shots is actually
http://srufaculty.sru.edu/david.dailey/svg/text/textplay.svg . )

 

I think much of what we're seeing here stems from lack of specification
rather than bugs, though bugs appear to be ample as well.

 

The operative text tag reads as follows:

 

<text id="T" fill="none" stroke-width="4" stroke="url(#g)"
stroke-opacity="1"

font-family="serif" font-stretch="ultra-expanded" stroke-dasharray="10 5"
rotate="-25 -20 -15 -10 -5 0 5 10 15 20"

textLength="90" lengthAdjust="spacingAndGlyphs" font-style="oblique"
text-decoration="overline" 

font-size="50" x="5" y="65%"  font-weight="bold">       

 

Conclusions:

 

1.       Firefox doesn't yet handle overline or textLength="90"
lengthAdjust="spacingAndGlyphs" . I am pretty confident that these are known
bugs and not surprises. textLength, though is rather important since it
seems to be the only way (short of converting text to paths) of making sure
that text will occupy roughly the same footprint on different sized devices.

2.       The browsers don't seem to agree on what units to use (pixels or
viewport) for dash array when applied to text.

3.       The browsers don't seem to agree on whether overline and glyphs use
the same dash-array units or not.

4.       The extent of the spread of the gradient through the text seems in
some cases to be based on total cumulative path length of the glyphs rather
than on each glyphs own horizontal size. Note the difference in gradient
spread across the four browsers where we can see the completion. IE hits the
final stop at about .8, while Opera does the expected thing at about .9;
Chrome hits it at about .1 and Safari only reaches the final stop color in
its overline. Only Opera seems to keep the gradients of the overline and the
text in sync.

5.       Commencement values of the dash-array seem to be differently
calculated for different glyphs than for others in some browsers.

6.       The overline is discontiguous in most browsers.

7.       Rotations of the overline follow rotations of the glyphs in most
browsers. Opera does it as I would expect.

8.       The baseline of the phrase seems to droop from left to right in
some browsers. It appears to be nonlinear in others. The simpler file (with
the guidelines at the bottom make this clearer).

9.       Some browsers allow the rotated glyphs to begin outside the drawing
area, others interpret textLength and spacingandGlyphs obviously
differently.

Hope this adds more clarity than confusion, as that is the goal.

 

Regards

David