890692 - maybe support textLength="" and lengthAdjust="" on tspan and textPath

Status: NEW

(Core :: SVG, defect)

Description

[Cameron McCormack (:heycam)]

Bug 569722 added support for textLength="" and lengthAdjust="" on <text> but not <tspan> and <textPath>.  We should think about whether it makes sense to support them on these child elements as the spec currently says, and bring it up in the WG if not.

If we do support this, we'll need to change SVGTextPathElement::Get{Enum,Length}Info to also include these attributes, since they currently override the ones on SVGTextContentElement.

Comment 1

[John Hewson]

Attachment: tspan-textLength.svg (testcase)

Here's a test case showing how textLength on SVG can be used. It's a single <text> element containing a separate <tspan> for each line. These lines wrap around a rectangle, e.g. an image in a newspaper style layout.

Comment 2

[Cameron Lakenen]

FWIW, a fix for this would help me a lot. Right now my workaround is to add a CSS rule for Firefox if sub-pixel rendering is not supported properly: 

text { text-rendering: geometricPrecision; }

Comment 4

[Taylor Hunt]

Implementing this for <tspan> would work wonders for multiline text. Right now I have to use <text> for everything to get the proper fallback behavior, which has two problems:

* Text selection gets weird (Firefox interprets <tspan> boundaries like inline elements, <text> boundaries like line breaks)
* Assistive technology thinks each <text> should be treated like a paragraph

Comment 5

[kevinh]

Yes.  Since it is in the spec it seems good to implement it (this bug seems to have been around a long time).  My webapp looks fine in IE and webkit, but was unreadable in firefox.  My workaround is to not use tspan on firefox but that breaks screen readers for the blind.

Comment 6

[namurray85]

Attachment: textLength applied to <text> element with <tspan> children

<svg width="350" height="200" viewBox="0 0 350 200">
        <text textLength="350">
          <tspan x="1" y="80">I am a single line of text inside an SVG</tspan>
          <tspan x="1" y="100">and this is basically one sentence.</tspan>
        </text>
        <rect x="0" y="0" width="350" height="200" fill="none" stroke="blue" stroke-width="2"></rect>
      </svg>

Comment 7

[namurray85]

I would like this to be revisited. <text> cannot be expected to be used for each line as that is not proper markup. 

so far the only proper fix I have found to get <tspan> glyphs to fit the viewbox is to apply dx values to every glyph, starting with 0. however this is far from a good solution, as the spacing isn't consistent across browsers, and it's just plain tedious. all other latest browsers (including IE 11)support textLength on tspan.

Comment 8

[namurray85]

Attachment: textLength applied to tspan children

<svg width="350" height="200" viewBox="0 0 350 200">
        <text>
          <tspan x="1" y="80" textLength="350">I am a single line of text inside an SVG</tspan>
          <tspan x="1" y="100" textLength="350">and this is basically one sentence.</tspan>
        </text>
        <rect x="0" y="0" width="350" height="200" fill="none" stroke="blue" stroke-width="2"></rect>
</svg>

Comment 9

[Dennis Schubert [:denschub]]

The SVG 2 CR does mention both attributes as valid for <textPath>, and Chrome supports this as well, even though they do not support textLength on the <text>. Because we have received a webcompat report about this, this may be breaking some things.

Comment 10

[Mike Kaganski]

Note that MDN claims support since FF 1.5 for these attributes https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/tspan#browser_compatibility , which I filed as defect of documentation in https://github.com/mdn/browser-compat-data/issues/26945.