CODEWITHSUNDEEP
mobileunicodecross-browser
Parris
Parris

Reputation: 18456

Certain Unicode Characters Not Showing Up In Certain Browsers?

So I am having consistency issues with a certain set of unicode characeters. The characters within the buttons under the reply section, and at various parts of the page show up as squares: http://bit.ly/zlhgEI

When I copy them into google i can navigate to a wikipedia page describing that character. So it seems like it is a rendering issue. Or perhaps that platform is just missing characters? I don't know.

Where it works: Firefox (I think on any platform), Chrome on windows7 and ubuntu maybe osX Where it is broken: Chrome on XP, iphone4 and droid incredible

Does anyone know a way to ensure this character set will get added. I already tried adding to utf-8 meta tag, which seems to do nothing. What can I do?

Thanks!

Upvotes: 1

Views: 3005

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

This is primarily a font problem. The buttons contain Syriac letters, which are not present in most fonts. The CSS setting is font-family: Helvetica,Arial,sans-serif, but Helvetica and Arial do not contain Syriac letters, so browsers will first try the font to which they map the generic name sans-serif. It most probably does not contain Syriac letters either, so browsers will either give up and e.g. show a square or (more properly) scan through the fonts available on the system. So indirectly this is a browser issue too.

The odds are that the vast majority of users will not see the Syriac letters unless you use an embedded font for them. For suitable fonts, you could check http://www.wazu.jp/gallery/Fonts_Syriac.html where many download links don’t work, but try http://www.bethmardutho.org/index.php/resources/fonts.html

You could also write a CSS rule with fonts that contain Syriac letters, e.g. font-family: Estrangelo Edessa, TITUS Cyberbit Basic, Sun-ExtA, Code2000, unifont. But most people don’t have any of them in their computers, so consider adding the downloadable font of your choice into the list, once you’ve selected and installed one.

The character encoding is not a problem. The data is UTF-8 encoded and declared as UTF-8 in HTTP-headers, so meta tags don’t affect encoding issues (as long as the page is viewed online).

The buttons look really odd (each occupying the full width of the window) on IE 9, but this seems to be unrelated to the problem at hand, and it’s a Quirks Mode issue and can be fixed by adding <!doctype html> at the start.

Upvotes: 6

Matt Andrews
Matt Andrews

Reputation: 2878

This could be an example of mojibake. There's probably not a ton you can do about it -- I believe it depends on the fonts available and the range of encodings they support.

Upvotes: 0

Related Questions