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:
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.
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 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.
I have a multilingual project (currently 13 languages), which uses many different font variations of "Helvetica Neue", mostly bold, condensed and regular cuts from the LinoType Pro font set ( which includes western european characters) and the same for cyrillic. We will probably add chinese and japanese variations in the future.
I have set up the project to use different CSS stylesheets and separately load the fonts for each version, depending on which language the user selects, so I can have different line heights, kerning and/or font sizes to make everything keep the original look, even if the fonts look nothing alike.
All of this works well, except for one problem: For some reason, all cyrillic letters seem to be displaced. They appear 2-3 pixels below the correct base line, and actually protrude across the textfield's bottom border, even when the field is set to autosize. When I use textfield.getCharBoundaries(), all values seem to be correct, even though they obviously aren't rendered correctly.
To make everything look neat, I could of course manually move all problematic textfields up or down according to language and font size, but I was wondering if there was some way to prevent or at least detect this kind of displacement in order to automatically handle the adjustments - the Flash Player should have some sort of information on how things are rendered, shouldn't it? Have any of you had similar problems? Or better yet: a solution?
I had this problem for Chinese, but only in OS X versus Windows. I couldn't figure out how to automatically get proper metrics for where the characters really were, either. I ended up with a rough function which I called whenever I set up a TextField:
public static function adjustPositioning(field:TextField):void
{
if(OS != "MAC") return;
var fontSize:int = field.defaultTextFormat.size as int;
field.y += fontSize/5;
}
I was setting up all my TextFields in code rather than the IDE, so this was easy. I guess it's the solution you're not looking for, though!
Does your version of Helvetica Neue have glyphs for Cyrillic? If not, then you get font fallback and the font used for Russian is in fact not Helvetica Neue, but something else, with other metrics.
And you will have more of this if you go to Chinese, because Helvetica Neue definitely does no contain Chinese glyphs :-)
On the other side, really-really consider TLF. It is way better for international support, and Flash Player 10.0 (which introduces TLF) is already more than 2.5 years old. Try to convince your customers that is unreasonable to ask for high level international typography with ancient technology. It is an either/or deal.
I've experienced similar problem with Arabic language. Seems like Adobe applications always have issues with non-English languages. In some languages, in Flash player the text look corrupted, but while playing the Flash in Flash Player the problem doesn't exist.
I'm not sure what could be the solution for your problem, but you can try some work around.
Try this work around, but it becomes more complicated:
- on each keypress, insert the pressed character as an image. It could solve your problem, but it would take more time to write the code
I've had similar issues, and all solutions I've tried are quite complex, or have some drawback:
Use TLF. I know you don't want to,
but it's a pretty safe (but complex)
solution.
Don't use "readability" antialiasing,
use "animation". Fonts will look
worst, but their metrics should be
a bit more reliable.
Try with cacheAsBitmap, or null
filters (i.e. BlurFilter(0,0,0)). It
will work in some cases, but not all.
Manually cache all textfields as
BitmapData. This should show much
more reliable metrics, but can be
tricky. You can even fix this on the
fly with getColorBounds to get the
"real" metrics. But again, it's all
very tricky, and needs a lot of testing.
It sounds like the font you are using has an actual error in the glyphs for cyrillic. So here's a brutally simple, but annoying solution. Edit the font. It sounds crazy, but there aren't that many Cyrillic glyphs, and you seem to want a single font. Edit it, distribute the corrected version, and you're done.
Fontforge is pretty decent, I'll bet you can edit the font in an hour once you're set up.
Have you tried using a fixed width font?
Have you tried simply modifying the font to adjust for the 1px or so. Simply shift the letters upwards (or down) I didn't quite read everything that everyone wrote. Although I do not currently have it installed, I beleive my preference for editors is "Fontlab".
First off, I don't have a copy of Verdana bold. It's no where on my hd and I don't know the first thing about making fonts so that is out of the question.
I've been searching for a couple of hours now and it seems the tried and true solution is to embed multiple versions of the font off the stage.
Ridiculous. Right? In either case, I am pleading to all you Flash Jedi out there to please tell me there is another way? I refuse to turn to the dark side.
First of all, you don't have to buy it. Second, this is how it's done in Flex so it can give you some insight.
#font-face{
src:url('fonts/Verdana.ttf');
font-family:Verdana;/*any name you want actually, you can have it VerdanaBold*/
font-weight:bold;
}
To call it later from a component, let's say a Label
<s:Label text="Your text here" fontFamily="Verdana"/>
The long answer is that I can't believe you don't have Verdana on your system, how come? If you see it in Office software or even in notepad font settings but don't know how to get it, assuming it's a Windows system, look under Control Panel > Fonts.
If you're using the Flash IDE, embedding it outside the stage (anywhere - it just need to be on your project) is, indeed, the best way to do it. Basically, if you have a TextField with font embedding set, Flash only embeds the basic font, ignoring the rest - so if you want text with <b> somewhere in there, the bold font has to be embedded.
You probably do have Verdana bold in your system, maybe you just can't see it (depends on your system). Just try creating a Verdana TextField and enabling bold.
You can also have it added to the library as a font asset, but it has problems of its own. Feature wise, the hidden textfield trick works best.
You can also embed fonts with the [embed] meta tag, but that's a bigger can of worms for you if you're working with the IDE (since it means to start using the Flex SDK from it).
You can go to the library panel and from the top right corner (click the little triangle and grid looking thingy) and choose "New Font". There you can embed bold Verdana and use it in your code.