Spec conformance of textPath, adding a compatibility mid-line rendering attribute
Won’t fix Issue #13518804
Steps to reproduce
I’ve made a small example to demonstrate how Edge is the only browser implementing the SVG spec correctly, regarding calculating the glyph position relative to the glyph-midline.
The SVG 1.1 and 2.0 specification says:
Position the glyph such that the glyph-midline passes through the midpoint-on-the-path and is perpendicular to the line through the startpoint-on-the-path and the endpoint-on-the-path.
And a note after the list:
In the calculations above, if either the startpoint-on-the-path or the endpoint-on-the-path is off the end of the path, then extend the path beyond its end points with a straight line that is parallel to the tangent at the path at its end point so that the midpoint-on-the-path can still be calculated.
This issue is tracked in https://github.com/w3c/svgwg/issues/337
An implementation of both the de-facto standard web algorithm and the spec compliant algorithm, with a compatibility attribute named “midline” to choose between the de-facto standard “sharp” value and the spec conformant “smooth” value, is available here:
https://github.com/msand/react-native-svg/blob/0dbddcc2b4b375e8ae122b47d9c5941013b9d2d7/android/src/main/java/com/horcrux/svg/TSpanShadowNode.java#L770-L846
I suggest, that Edge makes the de-facto web standard (and much more efficient in both computation and memory) implementation available by default, and the conformant algorithm behind an attribute with some appropriate name and values, which would be added to the SVG 2.0 draft.
What are your thoughts on this?
Is the behavior that all existing text on a path svg content on the web has been designed against and the fact that it works the same way as when it was authored or not, more important?
Or is spec conformance more important?
Should a compatibility attribute be added?
<svg width="900" height="600" viewBox="180 0 330 220" xmlns="http://www.w3.org/2000/svg">
<defs>
<path id="textpath" d="M225,150 v-80 h240 v80 Z"></path>
</defs>
<use href="#textpath" stroke="#00f" stroke-width="1px" fill="none"></use>
<text stroke="#000" word-spacing="0" letter-spacing="2" alignment-baseline="top" style="font-family:AvenirNextLTPro-Regular;font-size:20">
<textPath href="#textpath" letter-spacing="2">
<tspan letter-spacing="2" alignment-baseline="bottom" dx="73" dy="-5">SVG Text on a linear path test, testing 1, 2, 3, fi.</tspan>
</textPath>
</text>
</svg>
You need to sign in to your Microsoft account to add a comment.
Sign in