New issue
Advanced search Search tips

Issue 592233 link

Starred by 1 user

Issue metadata

Status: Duplicate
Merged: issue 583298
Owner: ----
Closed: Mar 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

svg letter-spacing is off by 50%

Reported by s...@benchling.com, Mar 5 2016

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.75 Safari/537.36

Example URL:
https://jsfiddle.net/3dw9g07p/

Steps to reproduce the problem:
1. Visit https://jsfiddle.net/3dw9g07p/ 
2. Observe in Chrome 49 that the first two lines match despite the first one (HTML) having different letter-spacing than the second one (SVG).
3. Further observe that the first and last lines do not match despite having the same letter-spacing.

What is the expected behavior?
The first and last lines should have the same letter-spacing. 

What went wrong?
It seems that letter-spacing for SVGs is off by 50%. The SVG span with 10px letter-spacing matches the HTML span with 15px letter-spacing.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? Yes Chrome 48

Does this work in other browsers? Yes 

Chrome version: 49.0.2623.75  Channel: n/a
OS Version: OS X 10.10.5
Flash Version: Shockwave Flash 20.0 r0

Safari renders this as expected.

At Benchling, we render text using SVGs, relying on precise measurements for font-size and letter-spacing to ensure other UI elements properly align with the text (e.g. https://benchling.com/s/SAMPLEPLASMID ). 

The only reasonable workarounds I can currently see are to either detect the letter-spacing issue and correct for the 50% increase, or avoid using letter-spacing until the bug is fixed.
 

Comment 1 by s...@benchling.com, Mar 5 2016

svg-letter-spacing-regression2.png
141 KB View Download

Comment 2 by s...@benchling.com, Mar 6 2016

For anyone else running into this, if you use <foreignObject><xhtml:span>...</xhtml:span></foreignObject>, you avoid the issue entirely.

Comment 3 by kochi@chromium.org, Mar 7 2016

Components: -Blink Blink>SVG Blink>CSS Blink>Layout
Status: Available (was: Unconfirmed)

Comment 4 by f...@opera.com, Mar 7 2016

Mergedinto: 583298
Status: Duplicate (was: Available)

Comment 5 by s...@benchling.com, Mar 7 2016

Are you sure this is a duplicate? This bug does not affect 48.0.2564 while httsp:// crbug.com/583298  does.

Comment 6 by f...@opera.com, Mar 7 2016

Pretty sure it has to do with applying letter-spacing twice (verified by disabling one of the applications).

Before the complex text path was enabled for all text, this would depend on the font used (among other things), so the exact version is nothing to go by on its own.

Comment 7 by s...@benchling.com, Mar 7 2016

Ah, I see. Thanks for the clarification.

Sign in to add a comment