Skip to content

Instantly share code, notes, and snippets.

@loveencounterflow

loveencounterflow/index.html

Last active August 29, 2015 14:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save loveencounterflow/270254d68ebde0c3695a to your computer and use it in GitHub Desktop.
Save loveencounterflow/270254d68ebde0c3695a to your computer and use it in GitHub Desktop.
Download ZIP
Strange display error: Google Chrome (OSX) with Unicode CJK Unified Ideographs Extension B (but not C)
Raw
index.html
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>font-face-test</title>
<style>
@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;
}
</style>
</head>
<body>
一丁丂七丄丅丆万丈三𪛍𪛎𪛏𪛐𪛑𪛒𪛓𪛔𪛕𪛖𪜀𪜁𪜂𪜃𪜄𪜅𪜆𪜇𪜈𪜉𪜊
<br>
<div>一丁丂七丄丅丆万丈三 u-cjk</div>
<div>𠀀𠀁𠀂𠀃𠀄𠀅𠀆𠀇𠀈𠀉 u-cjk-xb</div>
<div>𪜀𪜁𪜂𪜃𪜄𪜅𪜆𪜇𪜈𪜉 u-cjk-xc</div>
</body>
</html>
@loveencounterflow
Copy link
Author

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.

@power8
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