New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 787967 link

Starred by 2 users

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Android
Pri: 2
Type: Bug



Sign in to add a comment

Android font fallback fails to find contour font for card game symbols

Reported by shinygol...@gmail.com, Nov 22 2017

Issue description

Example URL:
https://jsfiddle.net/jjhzrhfo/

Steps to reproduce the problem:
1. go to https://jsfiddle.net/jjhzrhfo/
or create a new one with:
HTML:
<div class="s-s">
  &spades;
</div>
<div class="c-s">
  &clubs;
</div>
<div class="h-s">
  &hearts;
</div>
<div class="d-s">
  &diams;
</div>
CSS:
div {
      font-size: 80px;
      display: inline-block;
}

.s-s {
  color: black;
}

.c-s {
  color: limegreen;
}

.h-s {
  color: red;
}

.d-s {
  color: dodgerblue;
}

2. Check the result on Android with Chrome

What is the expected behavior?
Check the attached desktop screenshot or check it on desktop Chrome

What went wrong?
css style format (color, font size) is not working/applied

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No 

Did this work before? Yes Chrome 54.0.2840.85 and Android 4.4.2 or desktop Chrome 62.0.3202.94

Does this work in other browsers? Yes

Chrome version: 62.0.3202.84  Channel: stable
OS Version: 62.0.3202.84
Flash Version: 

Problem is occurring on Chrome 62.0.3202.84 on Android 6.0.1
 
Screenshot_android_chrome.jpg
39.9 KB View Download
Screenshot_desktop_chrome.jpg
43.0 KB View Download
I update Chrome to 62.0.3202.84 on Android 4.4.2 and it is working fine.
It seems it is a Android 6.0.1 problem. But on this android it works with Firefox.
This bug is very weird on 6.0.1.
It worked with latest Firefox v57. (It was upgraded form v56)
I reinstalled it, after that Firefox also does not apply css formatting. :-(
Labels: Needs-Triage-M62
Labels: Needs-triage-Mobile
Cc: sandeepkumars@chromium.org
Components: -Blink Blink>Layout
Labels: M-64 Triaged-Mobile
Status: Untriaged (was: Unconfirmed)
Tested the issue in Android and could reproduce the issue.

Steps Followed:
1. Launched Chrome Browser.
2. Navigated to https://jsfiddle.net/jjhzrhfo/
3. Observed css style format (color, font size) is not working as expected.

Chrome versions tested:
62.0.3202.84, 64.0.3275.0

OS
Android 6.0.1

Android Devices
6.0.1; Nexus 5 Build/MOB31E

This seems to be a Non-Regression issue as same behavior is seen since M50. Untriaged for further input's on this.

Note:
1. Issue is not seen in Desktop
2. Issue is not seen using #62.0.3202.84 on Android 4.4.4 sony xperia. 

Please navigate to below link for log's and video--
go/chrome-androidlogs/787967

Thanks!!
Cc: drott@chromium.org e...@chromium.org
Components: -Blink>Layout Blink>Fonts>Emoji
Status: Available (was: Untriaged)
Hmm, no idea how emojis and color interact...

Comment 7 by drott@chromium.org, Nov 28 2017

Components: -Blink>Fonts>Emoji Blink>Fonts
Summary: Android font fallback fails to find contour font for card game symbols (was: unicode poker suits style problem on android)
Chrome on Android's font fallback only finds the emoji font for the card game glyphs. Since these are color bitmap glyphs they cannot be styled using CSS colors. 

As a workaround, I would recommend embedding a web font which has TrueType or CFF contour glyphs for the card symbols, so that they can be styled using CSS colors.

Tested in FF nightly: Allows color styling of these glyphs. I am not sure whether that's with a system font or with a font provided by FF.


Friendly ping. Is there any update on this issue.

Comment 9 by drott@chromium.org, Apr 9 2018

There's no update. I don't think Android has a system font with contour versions of the cards glyphs, as mentioned in #7.

Cc: pnangunoori@chromium.org
drott@ -- Can this issue be closed?
Thanks!

Sign in to add a comment