Page MenuHomePhabricator

SVG text-anchor=end confused by tspan with following #text
Open, Needs TriagePublic

Description

A text element with text-anchor="end" whose children are a tspan element followed by a #text node renders incorrectly.

librsvg renders the red text in JoKalliauer's
https://upload.wikimedia.org/wikipedia/commons/archive/b/bd/20180726133044%21Test.svg
example incorrectly. It paints the red "H3C" to the right of where it should be.

Red  :   H3C
Green: H3C
Blue : H3C

The incorrect rendering can be seen in the history for [[c:File:Test.svg]] https://commons.wikimedia.org/wiki/File:Test.svg at 12:41, 26 July 2018. The red text should be more to left and align with the green and blue text.

Red  : H3C
Green: H3C
Blue : H3C

The relevant SVG code is

<text fill="red" text-anchor="end"><tspan x="24" y="20">H</tspan>3C</text>

The red "H3C" should be in one "text chunk" as defined at https://www.w3.org/TR/SVG/text.html#TextLayoutIntroduction

The text element starts a new text chunk, but that text chunk never gets any characters and remains empty.
The tspan element has absolute positioning commands, so it starts a new text chunk; the "H" is added to that chunk. The characters "3C" should be added to that chunk; a #text node does not have any absolute position adjustments, so its content characters always add to an existing text chunk. Then the whole text chunk ("H3C") should be anchored to end at (24,20).

Instead, librsvg anchors the "H" to end at (24,20) and the "3C" continues where the "H" finished. Consequently, the text is painted too far to the right.

Interestingly, librsvg renders correctly if the "3C" is placed in a tspan element instead of a #text node.

Also

<text fill="green" text-anchor="end" x="24" y="21"><tspan>H</tspan>3C</text>

renders correctly. In this case, the tspan does not start a new text chunk; all of "H3C" belong to the text element's original text chunk

The bug can also be seen in the red text at the lower left of [[:File:SVG Test TextAlign.svg]].
https://commons.wikimedia.org/wiki/File:SVG_Test_TextAlign.svg

<text fill="red" text-anchor="end"><tspan x="400" y="550">tspan </tspan>text-anchor="end"</text>

GNOME issue: https://gitlab.gnome.org/GNOME/librsvg/issues/370

Event Timeline

Glrx created this task.Jul 26 2018, 4:10 PM
Glrx updated the task description. (Show Details)Jul 26 2018, 5:28 PM
Glrx updated the task description. (Show Details)Oct 24 2018, 9:16 PM
Aklapper moved this task from Backlog to Reported Upstream on the Upstream board.Mar 10 2019, 5:45 PM