Please refer to this jsfiddle.
It includes text, both inside a highcharts chart and outside, where the text includes a "sun" character as shown in this page. I've also included variants both with and without variation selectors (see also here) to see what difference they make.
Outside highcharts:
<p>Embedded: ☼ ☼︎ ☼️</p>
symbols.innerHTML = '<p>Added: \u263C \u263C\uFE0E \u263C\uFE0F</p>';
Inside highcharts:
title: {
text: 'In highcharts: \u263C \u263C\uFE0E \u263C\uFE0F'
},
Now, it seems to depend on which browser you view this jsfiddle as to whether you get a coloured emoji version of the sun symbol, or a plain-text black version... or even both versions!
For example, in Chrome on a Windows desktop you get the plain version all round:
... while in Chrome on Android 7 you get part-plain and part-emoji:
I really don't like that the style of the emoji versions is completely out of my control, particularly when the style clashes horribly with the rest of the page (e.g. the sun symbol is bright orange and the equivalent moon symbol is bright blue).
So I'd like to force the page to use the plain version on all browsers in all contexts... any idea how?
It would seem completely crazy to have to resort to using images, because I want the symbols to have the same appearance as the surrounding text, including text colour (which the user can change at will). And isn't UTF-8 meant to be a character encoding rather than an emoji encoding? I have nothing against cute emojis per se, but only in the right context.
The symbols appearance depends on the font you use.
Please look at your updated jsfiddle.
I've just changed the font on all elements:
* {font-family:serif !important}
Any element can have its own font.
It's up to you which font to use. So choose the right one and tune it up.
Update
I have to clarify several points:
There are NO 'safe' or 'unsafe' fonts.
Basically font works like a key-value storage {code1 => glyph1, code2 => glyph2, ...}, input a code and get the corresponding glyph
Font may or may not contain any code-glyph pair
You can make your own font containing only desired symbols, having codes of your choice associated with glyphs of your choice e.g. \u263d can be any glyph you want, not always the moon
In css font-family: you can specify one or several font-families and/or generic-families (look here). When the style's being applied to the text the browser converts each symbol ('A', ' ' or '\u263d') to its code and tries to get the glyph from the specified font-families until the glyph has been found or no more fonts have left.
If the font contains the desired code-glyph pair we can see a glyph, if not - we can see a space, ?, an outlined rectangle, a rectangle with the code inside, etc. (depends on the browser).
In this case: {font-family:serif} for \u263d browser searches for the glyph for \u263d in all system fonts of generic-family serif. And on Android it firstly finds what you name the 'emoji'.
The solution is to find (see the jsfiddle) or to make (see the other jsfiddle) a font with the desired glyphs and apply it to the desired elements.
Hope it's helpful and clear.
The answer by Kosh Very has hit on something. Indeed, changing the font-family on all elements to serif does indeed result in the plain symbol being used in highcharts, even in Android 7. The trouble is, in actual use I cannot stick to a single "safe" font family... the font can be specified by the user, from any web font listed on Google fonts.
I've updated the jsfiddle to include loading and use of a web font:
// see https://github.com/typekit/webfontloader
WebFont.load({
google: {
families: ['Fresca:400']
}
});
And I use that font throughout, both inside and outside highcharts. The result on Windows Chrome is as before (plain text symbols all over), but now the result in Android 7 Chrome is:
So this now rather suggests that the issue isn't highcharts-specific after all, and more of a font issue as Kosh Very as indicated. Indeed in the original example, without any font stated explicitly, the font used in highcharts is different to that used outside... and probably hence the difference in symbol style.
But I've tried a couple of other completely different web fonts in the updated jsfiddle example, with the same result. In other words, the emoji sun symbol is not apparently coming from the font itself. Perhaps when a font is missing a particular character (these fonts probably don't have a character for every unicode value) then it reverts to using characters from the system font? From other discussions it seems that these coloured emojis might only show on Samsung devices, so maybe the system font on Samsung has these?
The solution (or workaround) seems to be use a "safe font" only where required (for the graphical characters), and your desired font elsewhere, as per this updated jsfiddle, which gives the following result on Android 7 Chrome:
BUT I've hit a snag with this solution... it works nicely for the sun symbol as above, but for the very next unicode character (moon symbol) it doesn't... so maybe that symbol is missing from the serif font family and it reverts again to system emoji.
jsfiddle with moon
So the solution is probably still very patchy... maybe only limited to certain symbols.
Even for a font like Cardo that apparently supports the moon character \u263d, this example doesn't work in Android Chrome... still get the coloured emoji version rather than the plain version.
Related
I'm experiencing an odd rendering problem in SOME versions of Chrome when trying to render the unicode characters U+2795 thru U+2797, the Heavy Plus/Minus/Division Signs. On some versions of Chrome, the sign will render as an ugly gray with some kind of black pseudo-outline, which does not respond to CSS color commands. Here is an image:
For a sample of how it looks on every other browser I've tried, see FileFormat.info - Unicode Character HEAVY PLUS SIGN
By SOME versions, I mean, I can't seem to narrow it down to a particular version of Chrome. The same version of Chrome on two different computers running Win10 will render differently, and I can't find where the difference is.
Is this a bug in Chrome? I can't seem to find where anyone else has run into this problem. I'm trying to include this on a website, but if certain versions of Chrome render it ugly, I need to find another solution.
-- edit --
XY Problem
My purpose is to use the +/- as the "expand/collapse" markers in a collapsible accordion box where the background may be light-colored or dark-colored. I was hoping to be able to color them to match the remainder of the text without needing to resort to images, but based on the comments below I'm starting to think it may be easier to throw together an .svg, recolor it in CSS, and be done with it.
The problem is that the browser is replacing the glyphs with emoji, which will be rendered differently for each browser. Emoji cannot be colored using CSS -- the best you can do is silhouette them and color the silhouette, as described in Color for Unicode Emoji. Unfortunately, this still means that the glyphs will appear differently on different browsers, as the emoji won't render using the font you specify.
There isn't currently a way to force browsers to render glyphs instead of emoji. Appending \FE0E (as described in How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?) will sometimes work, but this is not consistent, not guaranteed, and therefore not recommended.
You can provide a web font which contain the glyphs you need, but this is also not guaranteed to work, as some browsers (especially on mobile devices) will still replace them with emoji.
If you require consistent rendering, the best way seems to be to use an image instead of trying to force the browser not to use an emoji.
(Discaimer: I only learned to code alone and upload some contents.)
I retrieved a symbol for a running person and used the code to build an html file to upload. The problem is that the image appears in different ways in different browsers.
A temporary mwe example.
direct view in my site ramoneando.com
code snippet:
<h1><span style="font-family:'Segoe UI Symbol';color:black;font-size:40px;">🏃</span>runner</h1>
(Desired) Image on local browser.
Why does this happen and how can it be avoided?
I actually am OK with the variants. The worse thing is that some look to the right and others to left. I would prefer to remain with the first image, in dark filling and looking to the right.
The problem is that not every computer has the font Segoe UI Symbol installed, so the ones that don't just display the character with code 🏃 in the default font.
For example, this is what the snippet looks like on my computer
(It used the font Unicode Upper, if you're interested.)
So what you can do is any of the following:
Accept that the "Man running" symbol looks differently in different fonts and keep it the way it is
Use Segoe UI Symbol as a webfont (this may be overkill for displaying just one icon)
Or make a screenshot of the icon and turn it into a png file.
I use the unicode symbol ⏬ on my webpage. The problem is that this symbol is displayed good in chrome of the linux but in chrome of the windows 10 this symbol has the border and blue background color.
Here is my code: <div>Hello world ⏬</div>
Could anybody help me please?
Well this is something which are rendered by the browser dom itself. Every engines are showing something else, instead those who has the same engine. There are some possible ways to change the style a bit by changing the font-family where it's writing in.
If you want, you could do it by HTML and CSS by making a background image or do it with simply using font-awesome!
Hopefully this is a answer on your question.
<div>Hello world ⏬</div>
Since you haven't set any font, the browser will use whatever default font it has. In Chrome, that means colour fonts:
As with any other piece of text, if you need to have full control on how it looks you need to set your own font. For instance, Google provides the Noto family, which includes two emoji fonts (monochrome and colour).
An alternative is to handle it as icon and use either SVG or an iconic font.
Never seen before that url bar would change its font, but if you go to the following link in Chrome, you would see that "New Features" is written in different font:
Copying url into text file reveals some magic symbols:
http://g-wiki.net/wiki/Battlefield_3%EF%BC%9ANew_Features
Can anyone explain why it changes font and what else can I do with this technique (can I make red bold letters)?
That's a full-width colon character. The only difference should be that it takes more horizontal space; it's not supposed to affect the font and it doesn't do so for me. However, because it's missing from many fonts, some operating systems might switch to a different font or rendering mode in order to display that character, and may continue to apply this change to subsequent text.
I've noticed this before in instant messaging. I'll copy some Chinese characters into my message, and the rest of it will be displayed differently. It's the same effect and I'd consider this to be a bug in the the operating system/font routines. It's probably not been deliberately programmed.
This is a minor presentation thing that has bugged me for ages:
http://gyazo.com/e5bed138e234fef7f570bd36edee3edd.png
Checkout how the left and up arrows inserted with → and ↑ are the wrong size and style (this is Monaco in Apple Webkit). From my understanding this is because the font doesn't support these glyphs so it's falling back to another one. But why?? It happens with lots of standard fonts, I can't believe that Monaco doesn't have left and up unicode arrow glyphs.
Anyone else come across this and if so is there any kind of solution or workaround? Couldn't find one on Stack Overflow yet!
Update: I'm using glyphs because you can do cool things like fade the colours, and it's lightweight - they are like a free graphics library. As suggested by Thirty dot using sans-serif is the best to go with, it's good in Webkit but Firefox still looks wrong. I'm not sure the exact unicode values that entities such as ← and ↑ point to but I'm guessing in some browsers they are mismatched. Shame.
Workaround:
Use images to represent the buttons instead. It's not important that they're text, is it? Specifically, use a CSS Sprite so that all the buttons are contained inside one image.
Another Idea:
You could try font-family: sans-serif on just the buttons. sans-serif usually defaults to a safe font with many different symbols available. Hopefully, this font will have all the glyphs you require. You should also check you're using glyphs from the "same area" of Unicode.
Also, line your buttons up properly: at the moment, they like this: