Page MenuHomePhabricator

SVG text-anchor=end confused by tspan with following #text
Closed, ResolvedPublic

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

AntiCompositeNumber added a project: Thumbor.

Reported upstream to work on librsvg-2.46. Not fixed in 2.44.10.

JoKalliauer changed the task status from Open to Stalled.Jun 30 2021, 3:02 PM
JoKalliauer moved this task from Backlog to update librsvg on the Wikimedia-SVG-rendering board.
hnowlan claimed this task.
hnowlan subscribed.

This specific issue appears resolved - I see some other unresolved issues in SVG_Test_TextAlign.svg but not pertinent to this issue.