Here's a fiddle with some Unicode characters.
<p>★★★½☆</p>
Here it is rendered in Safari, looking as expected:
Here it is in Firefox:
I badly need Firefox to look like Safari. What exactly is going on here, and is there anything I can do about it?
Those characters aren't present in the font you're setting in your stylesheet, so the browser does fallback to some font that does have the characters. This fallback is done on a character-by-character basis, so different fonts can ed up being used for different characters. Specifically, I strongly doubt Times New Roman has those star characters.
I suggest setting a font that actually has the characters you're using in your stylesheet.
I had the same problem with © (copyright character) and I just wrapped it around a span tag and then changed the font-family and font-size attribute as suggested in the answer by Boris Zbarsky, and it worked perfectly.
Related
I have a webfont that doesn't support Cyrillic. The font only has latin chars. If I try and display some Cyrillic chars, instead of displaying blank or corrupt chars (as I would expect it) it bypasses the webfont and displays them in a system font instead. Whilst this is a good thing I don't know why or how. As I understand it, if a font specified in the CSS isn't supported by a browser or the browser doesn't support webfonts it is then that a substitute font is put in place. However this is happening if the characters used aren't supported. Is my understanding of this correct?
it can be difficult when using a font that is not supported in your language.
It varies from font to font and browser to browser.
So there is no hard and fast rule sorry.
I would recommend making sure you HTML is set to support Unicode fonts.
<meta charset="utf-8">
I would also programme your font so it is in a stack,(has a default to full back on if unsupported)
And give it and test in all browsers to see if it defaults or doesn't show.
You may wish to find a font that is suited to that language.
Most browsers do missing character fallback by default, so you never see blank characters when something's missing. If the developer uses a font family stack like font-family: MyCyrillicFont, Arial, sans-serif your browser will use the next available font. Otherwise, the browser itself has a default font setting (that the user can typically choose).
In short, browsers have fallbacks on the characters level.
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 trying this solution for a star rating.
Can someone please explain why the stars are so much bigger in chrome than in firefox? (I know that webkit and gecko are doing different things from time to time but so much difference?)
And has someone a suggestion on how to fix that?
Update:
This is how big the difference is on my mac:
You are seeing the characters in different fonts in different browsers. The size of a character may well very by font (even when the font size is the same).
The technique uses the characters “★” U+2605 BLACK STAR and “☆” U+2606 WHITE STAR, which are present in a few fonts only. If the font-family property on the relevant element does not mention any font containing those characters, browsers will (or at least should) use some backup font, and different browsers use different lists of backup fonts.
You can make it more probable (though not certain) that different browsers in the same system use the same font for the characters by listing suitable fonts in the font-family list. Even then, the results will vary by system, depending on the set of installed fonts. And in some systems, the rendering may even fail, because no font contains those characters.
This issue could be addressed using downloadable fonts, but that would probably be overkill here.
The practical workaround is to use just images, with a sequence of elements like <img src=star.png alt=star> and <img src=whitestar.png alt=""> or (for better accessibility) a pre-made image that contains a specific number of stars, like <img src=stars4.png alt="four stars out of five">.
I had the same issue and have found that using U+2B51 and U+2B52 ("BLACK SMALL STAR" and "BLACK WHITE STAR") displays consistently between Chrome and Firefox. (Haven't tested thoroughly across other browsers and browser versions yet though.)
May be it's strange for you.. But I dont find any difference in the browsers.
find attached image.
Characters in different browsers may vary. Use image as star. Not char. http://i.imgur.com/I2x2Yld.png use {content:''; background:url(....) no-repeat;}
A website I'm working on is using a custom embedded font that newer versions of Chrome on Windows don't seem to like. Instead of whitespace, weird white rectangles show up. Removing the custom typeface fixes the problem but that's hardly an acceptable solution.
Screenshot:
Does anyone know how Chrome interprets whitespace so that I can fix the typeface?
Turns out the typeface didn't define the Unicode whitespace character (0020). All the other browsers substituted the missing character for whitespace, except Chrome. Fixed by editing the font and adding the character.
Changing the CSS propety letter-spacing to something other that the default value (normal) may produce this behaviour.
is it just me, or does Chrome no longer render HTML characters such as the —? I've tried changing the DOCTYPE, changing the character encoding meta tag, changing the character encoding option in Chrome, and even using the entity number instead of the entity name. I cannot for the life of me get Chrome to display an em dash, and I've noticed that it isn't rendering it for other sites as well. Has anyone else had this problem also?
UPDATE
Are you sure the font you're using
actually has an em dash character? - Andrew Marshall
It just dawned on me what's going on. A while ago, I wanted to be able to use Helvetica Neue on Windows, and I didn't want to fork out a few hundred bucks, so I copied the font file from a Mac, converted it to a TTF on Ubuntu, and brought it over to Windows. I guess the tool I used didn't convert all the characters because it obviously can't display the em dash. The only reason I noticed the problem in Chrome is because the other non-webkit browsers wouldn't use Helvetica Neue for some reason.
Arg... I feel stupid. Thanks for the help!
I'd argue that HTML entities should be avoided (except &, of course). Instead just use the actual character and declare (and save) your HTML as UTF-8, something you should already be doing.
There are several top sites that do this, in particular with the use of © instead of ©.