I'm having problems with some Unicode character (🞻) not showing on iOS.
I have this line of code <p><a class="title" href="index.html">🞻 Luiso Vázquez</a></p> using the HTML entity of the character.
It looks good in desktop, but when it comes to Chrome on my iOS device it appears as an outlined square.
Is there anything I can do to solve this?
Thank you in advance
iOS's font doesn't cover the character you're trying to use. To fix this, you can either
Use a web font
Use an image of the character
Use a different character
Related
I have a really strange behaviour in Safari. The problem is that I have a string (inside an tag) which has one part of it written in cyrillic (Bulgarian) and the other part written in latin (English).
On all the desktop browsers I have, it's all working good and there are no problems at all. Then I took my iPhone, and I noticed a surprise: part of the sentence is bold (as it should be according to the CSS), and part is normal.
You can see this weird behaviour here:
http://www.buderus-bg.com/bultherm/product/10
What can it be? And why I get this problem only on iOS?
The charset of the website UTF-8. And that field in the database is a utf8_general_ci.
You are trying to display the text using a font that doesn't contain Cyrillic characters (Google's Open Sans with subset=latin), so the browser will need to find a different font to display the Cyrillic text.
Solution: remove the subset=latin bit.
Edit: the fact that it happens only in iOS with Safari is a coincidence. The browser searches for a font that can display the Cyrillic characters, and what it finds is sufficiently different from Open Sans that you can see the difference in thickness. On my desktop machine, I see the difference too.
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 have just come across this website (http://helios.io) that has an icon IN the title.
Not a favicon, but next to the title text (on the right of it).
How was this achieved?
(worked in both Safari and Chrome)
That would be the Unicode character U+1F680.
You can find it here, using the handy Unicode Character Search:
http://www.fileformat.info/info/unicode/char/search.htm?q=rocket&preview=entity
on your Mac, it's rendering used the built in emoji font - a preview is here:
http://www.iemoji.com/view/emoji/146/places/rocket
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.
How do i get the special character ☺ of a smiley face to render correctly in the mobile browsers?
<li><span style="font-size: 20px;"> ☺</span></li>
It appears on most browsers as [ ]
What you are seeing is a lack of that character in a font, not a character encoding problem.
There is nothing you can do about this, short of trying to use your own custom font (you may have mobile browser support problems). I would suggest using an image instead, if possible.