Webkit CSS Content Unicode Bug

Support for Unicode By browser

This is primarily a font problem, but if the fonts listed in your CSS do not cover some character, then different browsers will use fallback fonts differently. The cure is to try and find a list of fonts that probably covers all the characters you use. The difficulty of doing this greatly depends on the characters you use. Using recently introduced characters in buttons is mostly pointless, because images work more reliably. Using characters in text proper is a different issue. See my Guide to using special characters in HTML for details.

Create webfont with Unicode Supplementary Multilingual Plane symbols

You can try to adapt the dejavu build script used to create dejavu-lgc. That, or edit it in fontforge directly.

Why does chrome render different unicode characters ”你”(U+2F804)”和你”(U+4F60) are the same characters

A note: unicode code point and font glyphs are not directly related. The actual glyph depends on context, ligature, combining characters, language, and possibly other factors (see Unicode standard).

Unicode defines that U+2F804 is decomposable to U+4F60. Often Unicode texts are normalized by software. Either by decomposing them (so often splitting characters and accents e.g. for Latin languages), or by composing them. Such algorithms are described in Unicode. So in that case, it is considered U+4F60 semantically fully equal to U+2F804 (and preferred form). It is not frequent to see decomposition which contain the same number of code points (but also not unseen). And it is also not seldom to have decomposition in one direction, and no relation on the other direction.

This character is in CJK Compatibility Ideographs Supplement, so the important part is compatibility, and this is confirmed also by wikipedia article (https://en.wikipedia.org/wiki/CJK_Compatibility_Ideographs_Supplement).

Compatibility codepoint were introduced to simplify introduction of Unicode, by providing a lossless roundtrip conversion of other encoding. [In such manner, one could implement Unicode on different layers, without problems and fully transparent, and without requiring to change other layers (or worse: to change all stack in one step).

Special character not displaying as expected

1 - Replace your

<meta charset="utf-8">

with

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

2 - Check if your HTML Editor's encoding is in UTF8. Usually this option is found on the tabs on the top of the program, like in Notepad++.

3 - Check if your browser is compatible with your font, if you're somehow importing a font. Or try and add a css to set your fonts to a default/generally accepted one like

body
{
    font-family: "Times New Roman", Times, serif;
}

Hope it helps :)

WebKit bug? Hover state does not get applied to content inserted via CSS

This works for me http://jsfiddle.net/X4gjL/5/

a:before {
    content: "Hover Over Me";
}
a.foo:hover {
    color: red;
}
a.foo
{
    display:block;
}

-------------EDIT---------

Thanks to BoltClock for pointing this out, making it inline-block doesn't make the width 100% by default like block. http://jsfiddle.net/X4gjL/6/

a:before {
    content: "Hover Over Me";
}
a.foo:hover {
    color: red;
}
a.foo
{
    display:inline-block;
}