I have a text-only comment textbox (users can submit comments), and UTF8 emojis are accepted, such as "Hello 😂".
This is finally displayed in a <div class="comment">, that already uses a Google Font (Barlow Semi Condensed).
How to make that the rendering of this emoji is consistent across the different browsers?
For example, 😂 (codepoint U+1F602) does not appear in color in Chrome for Windows (at least on certain versions), but only in black and white, whereas, it appears in yellow and blue colors in Firefox.
I thought that using font-awesome would allow this, but instead font-awesome requires that we use <i class="..."></i> instead which is not possible since users will submit ordinary text, containg UTF8 emojis.
This is impossible for various reasons:
Windows officially supports multi colored fonts since 8.1. If a browser uses the font rendering of the system then results will differ by the operating system and its version already.
Gecko engines (e.g. Firefox) and Goanna engines (e.g. Pale Moon) come with their own font(s) (which you can delete) and on top render that font themselves, instead of relying to the system. As a result even under Windows 7 the browsers render colored Emojis although the operating system itself is unable to do that.
The default font and/or the default font for Emojis may differ as per personal settings, either in the scope of the operating system (user settings) and/or in the scope of an installation (program settings). Settings can be modified - not everybody uses the factory setting of Times New Roman as default font for websites in an internet browser. Likewise the default for displaying Emojis can be different if you leave it undefined (as per CSS).
It's as impossible as expecting a user to have installed the fonts of interest and also in the minimal version of interest: having Tahoma is one question, but having version 5.22 or 7.00 of it is yet another.
Related
I really don't know what to do so I hope that maybe one of you can find the solution for this issue:
https://www.schwitzen.bubblfy.com/
This wordpress website is shown different on Windows than on Mac. So on my Windows Computer I am using Google Chrome. And even on Firefox it is the same site.
But when I use the website on a MAC, it looks completely different. (Not the same font, not the same margin, etc..)
At the beginning I thougt, that maybe MAC's Safari Browser is the reason for this but even when I open Firefox on the MAX, it looks different. Why?
How can I adjust the site so, that it looks like on the Windows Version?
Hope you can help me!
Kind regards
The browsers use fonts preintsalled in operating system and display text via font-family css.
The different operating systems have different font families pre-installed, and when a certain font is missing, it is silently substituted with another. Moreover, the font that is used for substitution may be a native to the OS and specific to that particular OS only.
The same font size can be displayed differently on different OS.
Besides fonts, there might be other problems of different website view such as rendering engine(webkit, presto...), browser version, client operating system, browser-specific code and etc.
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 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.
I have a case in which text inside a strong tag, is rendered with different widths on different Windows PCs.
I've checked the style with dev tool, they have the same font-family. DOC TYPE is at the beginning of document.
Other browsers are consistent (rule out font differences on PCs).
I understand that different browsers calculate things differently, but I wonder what is the problem with different PCs...
It seems however that font-weight:bold gives equal widths.
I see also that Chrome assignes a font-weight:bold to strong, from user-agent style sheet.
I don't know about IE.
I'll try to put a strong {font-family:bold} in my style sheet.
Anyone has exeperienced important style differences across different PCs?
thx
There is some cases that explain the difference, the render of the <strong> tag and font in the page may differ between versions of Windows.
A Firefox 3.6 on Windows XP and the same Firefox on Windows 7 should have some fonts differences because the native fonts installed in windows may be different. Be careful on the Service Pack versions too, it may differ from that as well.
Have you checked the default theme/font used on the both windows ? Have you checked if all the defaults of the browsers you test have been reset ? (font size, font style)... Is there a font smooth used software installed ? (like a skin or a theme ?). Like 'daGUY' as said, also check the ClearType.
I think the problem doesn't come from your code but from the font installed on the PC and i think it's the normal behavior you see.
What you should do for testing is apply your own font by using CSS #font-face. You will be sure that the font used is the same between computers. But the render should differ too.
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.