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.
Related
I'm rendering a text svg using handwriting style google fonts. Assume that I must use these fonts.
For this example, lets use Princess Sofia
Setup
rendering text svg to png via cairo svg in python
text svg is being prepared in the browser
The Problem:
When creating a PNG out of the text svg with this font, some part of it is being cut off. The cut off part matches the areas that are not higlighted in the screenshot below:
Rendering result for A (cut off in the screenshot):
Rendering result for P (NOT cut off in the screenshot):
Question
Is there a way to work around this using CSS or JS?
What won't work
"Kerning, stretching, font variants, word and letter spacing options, glyph orientations, baseline shifts and many other properties are not supported" by Cairo SVG
It's difficult to quickly test this without seeing some code reproducing the problem.
However, this may be rectified by using font kerning which can be specified in CSS using the font-kerning property:
font-kerning: normal;
Setting font-kerning to normal achieves the following effect:
Font kerning information stored in the font must be applied.
The default is auto, which allows the browser to decide whether to use font kerning or not. Forcing it to normal means that the kerning specified in the font itself will be used.
The docs for font-kerning can be read here.
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.
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.
I'm looking for best solution how to implement .svg icons into web.
Basically, I need to implement just few icons, what I have in my .psd, so I can choose any format, but it will be nice to have vector so I've choosed .svg.
Only, the problem is that I need to change color of that picture and also I need to be sure that it will be supported on all major browsers, IE as well.
For now, I'm using tag < object > which works nicely, but I'm unsure about browser support and also I can't simply change color.
How would you solve this situation ?
The .svg icons are very small and simple, I've also thought to convert them into fonts or icons, but not sure about best workflow how to do it properly.
Also, I was thinking about using .pngs, but there is a problem with changing colors and of course "scaleabness", but if I will not find out anything, I will probably end up with this...
I personaly like working with fonts (like font awesome and so...), as they are scaleable, colorable.... and displayed everywhere
Is possible to convert and add these icons from .psd to such a format, that will be close to fonts ?
Thank you for your answers :)
Check browser support for the various ways to implement SVG at http://caniuse.com/
Common workflows:
Automatically process .svg files into icon fonts, usable in CSS, with Gulp
Automatically insert .SVG content into HTML as data URIs, with server middleware
Insert all SVG icons inline into a page and reference as SVG Symbols
Insert all icons into one SVG document as individual symbols, and refer to individually with svg 'use' - https://css-tricks.com/svg-use-with-external-reference-take-2/
So I've found a solution
I've generated my own fonts from .svg. As icons we're small, there we're no problem to work with them like fonts.
I've used
http://fontastic.me/
Very easy to work with, just upload your .svg, make some customisations like name of your fonts, mapping and add them into your page.
The best method is to use SVG code directly in the web browser, which is supported by almost all major web browsers. The SVG code can be easily customized with all of the CSS attributes, for example, you can use current Color for properties like fill and stroke color so that one can easily change the color of your free SVG icon from their CSS. This will also reduce the number of HTTP requests required to retrieve the image icon.
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: