Bug 215321 – SVG text element with text-anchor: middle is misaligned using icon font

• Component: SVG
• Status: NEW

[David Negley]

Created attachment 406294 [details]
Example SVG file

Consider the attached svg file, which contains this snippet

    <g transform="translate(200 200)">
      <rect width="200" height="58" rx="4" ry="4" fill="lime">
      </rect>
      <circle cx="29" cy="29" r="19" fill="yellow">
      </circle>
      <text x="29" y="29"
        style="dominant-baseline: central; font: 400 38px / 14px &quot;Material Icons Round&quot;; text-anchor: middle;">expand_more</text>
    </g>

along with the embedded "Material Icons Round" font in the <defs> section.

the text and the circle have the same x attribute, therefore they should be positioned in the same spot.

in Safari, the text element is too far to the left. it appears as if the position is based on the measured string "expand_more" and not the measured text element.

using a shorter icon name like <text>build</text> will result in an icon placed farther to the right, although the text elements are the same size.

removing the font name and using a single character like "+" in the text element produces the expected result.

[Radar WebKit Bug Importer]

<rdar://problem/66869020>

[Said Abou-Hallawa]

It looks like ligatures are not handled correctly for SVG fonts.

For example the test case contains the text "expand_more" which is supposed to be drawn by one glyph. When getting the width of this text, we loop through all the characters one by one and sum the widths of all the characters. But because the widths of all the characters are 38 which is the width of the ligature, we end up adding this width 11 times. And we get the width = 418 instead of getting 38. See SVGTextLayoutEngine::recordTextFragment().

[Ahmad Saleem]

I am still able to reproduce this bug in Safari Technical Preview 151 on macOS 12.5 and all other browsers (Chrome Canary 106 and Firefox Nightly 105) render it aligned within yellow circle. Thanks!

[Ahmad Saleem]

(In reply to Said Abou-Hallawa from comment #2)
> It looks like ligatures are not handled correctly for SVG fonts.
> 
> For example the test case contains the text "expand_more" which is supposed
> to be drawn by one glyph. When getting the width of this text, we loop
> through all the characters one by one and sum the widths of all the
> characters. But because the widths of all the characters are 38 which is the
> width of the ligature, we end up adding this width 11 times. And we get the
> width = 418 instead of getting 38. See
> SVGTextLayoutEngine::recordTextFragment().

Fixed by this commit in Blink:

https://chromium.googlesource.com/chromium/src.git/+/f75cb329068c3768b2d4e6b0c0243795c81d1ae6

It might be above my expertise to merge but still looking into how to do.

I think Blink introduced 'line layout' specific to SVG sometime after split and it is not 1-1 merge.

[Vitor Roriz]

Pull request: https://github.com/WebKit/WebKit/pull/49560