New issue
Advanced search Search tips

Issue 876977 link

Starred by 3 users

Issue metadata

Status: Assigned
Owner:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Compat



Sign in to add a comment

Chrome standard font affects custom font positioning

Reported by radarn...@gmail.com, Aug 23

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.75 Safari/537.36

Example URL:
http://www.dmm.com/netgame_s/kancolle/

Steps to reproduce the problem:
Just open the website (it's a Japan only web game, uses PIXI.js library)

What is the expected behavior?
The text in canvas should render at correct height.

What went wrong?
In Chrome, text renders correctly. However in Chromium (same version number) it renders higher than normal (higher comparing to Chrome)

Since this game is limited to Japan only, you can see my attached file for the difference, notice all the white texts (mostly numbers) renders higher on Chromium (Up) comparing to Chrome (Down).

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? Yes

Chrome version: 68.0.3440.75  Channel: n/a
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: 

At first I thought this was a problem with me using an older version of Chromium (65) but today I tried Chromium with same version as Chrome (68) it still doesn't render the same. How is Chromium different from Chrome??
 
chromium_chrome_difference.png
369 KB View Download
It seems I have found the difference between Chrome and Chromium: I have changed my Chrome "Standard font" to something else while Chromium remained in default setting.

This font setting difference didn't come across my mind because the web game uses a custom web font, as a result you can see in the attachment although the text is rendered in different height, they are rendered in same font.

So the real problem is: the "Standard font" setting of Chrome affects the rendering position of text with custom web font.

Can someone change this issue title for me?
Components: Blink>Canvas Blink>Fonts
Labels: Needs-Triage-M68
Summary: Chrome standard font affects custmo font positioning (was: Chromium renders some canvas text higher comparing to Chrome (same version))
Summary: Chrome standard font affects custom font positioning (was: Chrome standard font affects custmo font positioning)
Labels: Needs-Reduction
We will need a better way to reproduce this (a page we can actually open), otherwise there's nothing much we can do.
Components: -Blink>Canvas -Blink>Fonts Blink>WebFonts
NextAction: 2018-09-02
This is likely due to the custom web font not having full coverage of the glyphs needed to render the text. Never the less, this needs a reproduction.
The NextAction date has arrived: 2018-09-02
Labels: Needs-Feedback
radarnyan@: What are your "Standard font" in Chrome / Chromium?
@ksakamoto

I can't remember which font setting it was in the fisrt screenshot, but it should be the default chrome setting (en-us locale)

The lower screenshot (which the texts are rendered lower) is taken with the standard font set to "Micosoft Yahei" (which I believe is the default for zh-cn locale)

I can't confirm if this still happen right now as the said web game is under maintenance today which means I can't get to the screen where the screenshots was taken.

One thing I can say is that I tried many font (for the standard font setting, like Arial, Meiryo, even Consolas) and they all results in different rendering height. I haven't come across any other site with similar problem either. Also, the web font used by the game is "A-OTF-UDShinGoPro-Light.woff2". I don't think I can upload it though.
Project Member

Comment 11 by sheriffbot@chromium.org, Dec 7

Cc: ksakamoto@chromium.org
Labels: -Needs-Feedback
Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
NextAction: ----
Status: Assigned (was: Unconfirmed)
Confirmed that "Starndard font" affects test positioning and the texts are rendered by CanvasRenderingContext2D.fillText() with A-OTF-UDShinGoPro-Light.woff2.

The font seems to have enough coverage of the glyphs, so I'm still not sure why "Standard font" affects the positioning.

I'll try to create a small repro.
Cc: -ksakamoto@chromium.org
Owner: ksakamoto@chromium.org

Sign in to add a comment