Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Strange display error: Google Chrome (OSX) with Unicode CJK Unified Ideographs Extension B (but not C)
<!DOCTYPE html><html>
<meta charset="utf-8">
@font-face {
font-family: 'cjk';
src: local('Sun-ExtA');
unicode-range: U+4e00-9fff;
@font-face {
font-family: 'cjk';
src: local('Sun-ExtB');
src: local('HanaMinB');
unicode-range: U+20000-2a6df, U+2a700-2b73f;
body, html {
font-family: 'ampersand', 'cjk', 'ancientsymbols', 'Source Code Pro';
font-variant-ligatures: common-ligatures;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-variant: small-caps;
<div>一丁丂七丄丅丆万丈三 u-cjk</div>
<div>𠀀𠀁𠀂𠀃𠀄𠀅𠀆𠀇𠀈𠀉 u-cjk-xb</div>
<div>𪜀𪜁𪜂𪜃𪜄𪜅𪜆𪜇𪜈𪜉 u-cjk-xc</div>
Copy link

loveencounterflow commented Mar 21, 2015

As you can see, it uses a composite font constructed with @font-face and unicode-range rules; some of the rules will be shadowed by others, which is intentional since it makes debugging a bit easier.

The following behavior is very surprising: when i open this page in Chrome on OSX, the ideographs in the div containing the Extension B characters are not displayed. Now when i open the devtools and de-activate the font-variant-ligatures and common-ligatures rules, the text re-appears; activating any one of these three rules will make the text disappear. The Latin letters are always shown as entered. It is also possible to use a 'div'-local style rule like font-variant-ligatures: normal to make the affected characters display.

This behavior persists when choosing Sun-ExtB instead of HanaMinB, so it does not seem to depend on a bug in the font.

The other surprises are that (1) the text that starts the document and is not enclosed by a div is always shown correctly although it contains the same characters as the divs below it; (2) only characters from CJK extension B, not those from extension C seem to be affected.

Copy link

power8 commented Apr 4, 2015

@font-face {

font-family:    'cjk';

src:            local('Sun-ExtB');

src:            local('HAN NOM B');

unicode-range:  U+20000-2a6df, U+2a700-2b73f;


With HAN NOM B font is ok.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment