Last active
August 29, 2015 14:17
-
-
Save loveencounterflow/270254d68ebde0c3695a to your computer and use it in GitHub Desktop.
Strange display error: Google Chrome (OSX) with Unicode CJK Unified Ideographs Extension B (but not C)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
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
As you can see, it uses a composite font constructed with
@font-face
andunicode-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 thefont-variant-ligatures
andcommon-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 likefont-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 thedivs
below it; (2) only characters from CJK extension B, not those from extension C seem to be affected.