I am having difficulty having geez texts like these
እቶም ዝቐለሉ ክፋል ናይቲ ቋንቋ እዮም፣ በዚ ኣብ ታሕቲ
to which you can find more information on wikipedia. Are not rendering at all on most mobile platforms.
I don't know what the causes are. I have declared the charset on my document as utf8
<meta charset="utf-8">
Is there some solution to showing these texts on mobiles like Nokia S60, or symbian phones running opera or their native browsers?
This is a font problem, nothing to do with encodings. The issue is that only few fonts contain glyphs for Ge’ez letters, and many devices have no such font installed.
Thus, the only practical option is to use a font as a web font (downloadable font) with #font-face. For general instructions, see my Guide to using special characters in HTML.
The following fonts have Ge’ez letters: Code2000 (an extensive font, which appears to be abandonware), FreeSerif (seems to have all wrong spacing for Ge’ez letters), GNU unifont (a coarse bitmap font), Nyala (shipped with new versions of Windows), SunExt-A, and TITUS Cyberbit Basic. This leaves about two options, the last two; TITUS Cyberbit Basic is announced as free for non-commercial use, and SunExt-A is free. Both are rather large, so there will be problems on slow connections. Both look reasonable to me, but I don’t really know Ge’ez.
Related
My site has thumbs up images that I want to render these as HTML entities. The decimal and hex codes are:
👍
👍
respectively.
In FF, both codes are rendered as a thumbs up but in Chrome neither is (nothing is displayed at all).
Here is the rendering (in white) on a dark background.
Why is this happening?
In general, for emoji entities like this, you can't rely on the end user's font including it. This is especially true of Chrome (as of December 2014), which is the last major remaining browser where rendering emoji doesn't work by default.
You're best off using an image here.
A custom font is also a good solution (hat tip to #Vucko).
The font support to THUMBS UP SIGN (U+1F44D) is very limited, as usual for any characters added to Unicode recently (during the last few years). A large number of users’ system have none of the fonts, so the only way to make almost all browsers render the character is to use a downloadable font (web font) via #font-face; in practice, you would use Quivira or Symbola for this. As they are rather large fonts, using an image may be a better option.
What happens when you use the character and do not specify the font at all, or specify a font or list of fonts not containing that character, is that browsers will use some backup fonts. They may do this in different ways, so that browsers in the same system render it differently, since they scan thru the list of fonts in a different order. Moreover, browsers have bugs in this respect. They are expected (according to CSS specifications) to render the character if any of the fonts in the system contains it, but they often fail to do that. Sometimes this is caused by a faulty font: a font contains information according to which it has a certain character, so the browser uses that font, but in fact the character is missing and some generic symbol appears. Sometimes we just don’t know why it fails.
You can avoid such bugs by explicitly listing fonts that are known to contain the character. But this is of course ineffective when the user’s system has none of the fonts.
<style>
.emoji {
font-family: Segoe UI Emoji, Segoe UI Symbol, Quivira, Symbola;
}
</style>
<span class=emoji>👍</span>
I have a huge problem. I just updated my websites homepage to display a unicode hexagon character: ⬢ ⬢ aka U+2B22
I made it 200px big and filled it with text. It looks good and works fine on my computer. With both Internet Explorer (win8) and Firefox 28.
I tested it on 5 different computers and it didn't work there! Tested with Firefox 28 and Internet Explorer (win7) on each device and on one computer even with the newest Chrome.
So what am I doing wrong? How is it possible that it works on my FF 28 and on 5 different devices with FF 28 it doesn't?
I already tried:
<?php header('Content-Type: text/html; charset=utf-8'); ?>
and in HTML directly:
meta http-equiv="content-type" content="text/html; charset=utf-8"
Is U+2B22 not part of utf-8?
Try it yourself here, scroll to the very bottom of: http://jtauber.github.io/articles/css-hexagon.html
For my PC it looks like this: http://250kb.de/u/140401/j/RzN1lYTL8fLJ.jpg
On other devices it looks like this: http://250kb.de/u/140401/p/VEeerGhyv4lM.png
I appreciate any help!
The character U+2B22 BLACK HEXAGON is included in a few fonts only. None of those font comes with Windows or with other widely used software, so in most computers, there is no font containing it. Moreover, browsers may fail to render the character even if some font in the system has it. For some more general explanations, see my Guide to using special characters in HTML.
In this case, the font setting is font-family: "Helvetica Neue", Arial, Helvetica. None of those fonts contains the character, so each browser tries to use other fonts in the system, in a browser-dependent order. In your own computer, you have a font that contains the character. You may have downloaded and installed it, or it may have come along with some software
What you could do is, alternatively,
a) specify, in a font-family declaration, a list of fonts known to contain the character. This could help against problems of browsers not finding a font, but this would not matter much.
b) use a downloadable font (web font, via #font-face). This would mostly be overkill if you just want one character for essentially non-text use. Fonts that contain U+2B22 are generally large.
c) use an image instead, possibly as a background image. This would be here the rational choice, especially since you would not use U+2B22 as a character in text but as a background of a kind.
Regarding the question “Is U+2B22 not part of utf-8?”, characters aren’t really part of utf-8. Instead, utf-8 is a transfer encoding for characters, and all Unicode characters (and, moreover, all Unicode code points) have representations in utf−8. Besides, the page mentioned does not contain U+2B22 as such but as the character reference ⬢, and this works independently of character encodings. Thus, this is not an encoding problem, but a font issue.
These computers on which it does not work do not have a font installed which contains a glyph for this particular character. That is all.
Solutions would include to not depend on users having fonts with such unusual characters installed and provide them as web font instead (which you might have to create) or to use an image, SVG or canvas instead.
I am working on a website with multilingual characters (Latin,Cyrillic,Japanese, Chinese and so on) mixed together.
I've used the following meta-tag to ensure the correct visualization of the content:
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
My question is: is this sufficient to be 100% sure that all the users will visualize the content without any problem? Do their OS need to have specific support for such characters?
Silly example: do all the modern browsers and/or OS support the Korean Alphabet/characters or are the users required to install them?
The meta tag does not guarantee anything. It declares that the encoding is UTF-8. It may be overridden by HTTP headers. See Character encodings by the W3C.
If the encoding has been declared as UTF-8, and it it actually is UTF-8, then you can be pretty safe that are all browsers get the characters right. Whether they display them depends partly on availability of fonts, partly on font-family settings in CSS; see my Guide to using special characters in HTML. It does not depend on the OS.
Regarding Korean (Hangul) characters, the Fileformat.info data on font support seems to be too limited (I have reported this to the author). In addition to fonts listed there, at least the following fonts contain them, or at least a large part of them: Batang, BatangChe, Dotum, DotumChe, Gulim, GulimChe, Gungsuh, GugsuhChe, Malgun Gothic, Sun-ExtA.
So you could write a long list of fonts (in order of preference) containing Korean characters, as the font-family value. I would expect this to work in most modern computers, but not all. To maximize the odds, you would need to use a downloadable font (web font) via #font-face, such as Sun-ExtA, which appears to be a free font, available from Alan Wood’s repository. Beware that it is a large font, and you would need it in a few formats, generated e.g. with FontSquirrel, to cover different browsers. Like most large fonts, it has one (regular) typeface only, so you should not try to use it as bold or italic; make sure you override and bold and italic settings that browsers tend to have for many HTML elements, like heading elements.
I've been displaying Chinese fonts on my Chrome browser on my Mac and I liked it. However the font is rendered differently in Firefox or when I use Chrome on Windows. Is there a way to standardize the font that the browser chooses for Chinese characters?
You have various options:
As Art of FITZ says, specify an #font-face and have the font downloaded to the user (which will, indeed, take up a lot of bandwidth if the font is large)
As Jukka says, provide a list of font names in the font property and hope one of these is installed on the user's computer
The legacy method: render the text on your own computer in the font of your choice, upload this as an image file. If you don't have much text to display, this may be even more efficient than having an #font-face clause that downloads a multi-megabyte font file.
Tailor the #font-face to your needs: Depending on the amount of text to display, you may be able to create a font with only the subset of characters you need (with an online utility such as Font Squirrel), reducing the size of the font file to download.
Here is a quick reference to how this line of code is used.
http://www.css3.info/preview/web-fonts-with-font-face/
Different browsers have different default fonts, but can can override this by setting font-family in CSS. Just remember that different computers have different sets of fonts available, so you should normally use a list of fonts, hopefully covering most browsing situations.
Maybe you have done so but see different results on different browsers. Please post a relevant part of the code and/or a URL then.
Chrome 5 was recently released for Windows, Mac, and Linux, all with the same version number. Are there significant differences in behavior (CSS or JS) between the different platforms, or do they behave pretty much the same?
I'm not interested in how they handle extensions -- just handling of HTML, CSS, and JavaScript.
The only thing to worry about are fonts, as these are (or may be) different or even unavailable on different platforms. The main problem that can arise from this is that fonts are wider or narrower than the ones for which the design was made, thus breaking some elements (for example, if the fonts are wider, certain text blocks will break onto more rows than intended, making the design look out of place; if the fonts are narrower, "gaps" might appear).
There are two solutions for this:
Use a generic font family (such as sans-serif) and while designing take into account all platforms that you wish to support;
Use #font-face, which is supported by all major browsers (except for IE) -- including Google Chrome. This way, you will be able to provide a fully consistent look across all platforms.
Other than the fonts issue, there's nothing to worry about. Both the layout engine (that takes care of HTML and CSS) and the JavaScript engine are the same across all platforms.
Useful resources for fonts:
#font-face - Mozilla Developer Center + most of the links in the See Also section of that page;
Google Font Directory - Google provides a nice API for using webfonts.