I was designing a website whose brand icon is an emoji. While I was testing it across various browsers I noticed that the emoji changes according to the different browsers. Further digging showed that it also changes the emoji in the title when sharing it on platforms like Messenger and WhatsApp.
Is there a way to get around this?
This site was how I actually realized emojis are just Unicode.
The image that is displayed depends on the image associated with that
Unicode on that platform
You have different possibilities. As #PraneethAvvari answer: if it is a brand icon, get it as picture, so that you have full control on how it will be displayed, also in future version of fonts.
An other possibility it is to specify the font you want to use (select a webfont) for specific items. You can do this with CSS and e.g. a special <span class="my_emoji">X</span>.
On the other hand, you should care about the expected consistency from people, not of your site. People prefers consistent view on their architecture. If I look your website from Windows, probably I'll never look it from a Mac. The same between IPhone and Android. And possibly within 10 minutes I'll not change architecture (computer to phone), but I'll change website. So I would be more annoyed if I do not recognize the same emoji quickly. As you see, there is always a trade off, and you should check for every element, it you need to use it as a logo, or as a functional feature (so with specific font), or just semantic (e.g. text from user, so keeping default font).
Don't use emoji as Brad Icon , Instead take a Image file of the emoji you want, being a Unicode emoji changes from platform to platform, take a Screenshot of required Emoji resize it to all the sizes you require and upload.
Related
I am making an application, and I want to add a "HOME" button.
After much struggling with various icon libraries, I stumbled upon this site,
http://graphemica.com/%F0%9F%8F%A0, with this
š
A unicode symbol, which is more akin to a letter than an image.
I pasted it into my HTML, and it just workedTM.
All this seems a little too easy, though. Are unicode symbols widely supported? Is there some kind of problem with them that leads people to use icon libraries instead?
It depends on what do you mean for "safe".
User should have the fonts, so you must include the relative font, and in various formats: there is not yet a format recognized by most used web-browsers.
Additionally, font with multiple colours are not fully understood by various systems, so you should care about what do you expect from users (click, select, copy, etc.).
Additionally, every fonts has own design, so between different fonts (so browsers and operating system) things can look differently. We do not have yet a "Helvetica 'Home'", a "Times New Roman 'Home'".
All this points, could be solved by using a web font, with monochrome glyphs (but it could be huge, if it includes all Unicode code points (+ usual combinations).
It seems that various recent browser crashes if there are many different glyphs, but usually it should not be a problem.
I also recommend aria stuffs so that you page could be used also by e.g. readers (and braille screen).
Note: on the plus side, the few people that use text browser can better see the HOME (not the case in case of an image), if somebody still care about this use case.
Some things you want to make sure youāre doing:
Save your HTML file as UTF-8. In fact, save all text files as UTF-8 unless thereās some reason you canāt.
Put the line <meta charset="utf-8" /> near the top of your HTML file.
Make sure your server isnāt misconfigured to tell all browsers that webpages are in the wrong encoding.
If, somehow, it is and you canāt fix it, fall back on &entities;.
Specify a font stack for your emoji in CSS with a set of fonts that cover nearly every system, perhaps including Apple Color Emoji, Noto Color Emoji, Segoe UI Emoji and Twemoji.
If a free font such as Noto or Symbola contains the emoji you use, you can package it as a WOFF to be sure it will always display the way you want. (As of 2018, Tor browser does not show most emoji correctly by default, but mainstream browsers do.)
I think using unicode is a good practice for development. Beacause The unicodes are essentially part of your operating system so you donāt need any special library or plugin and you treat them like regular text.
The only problem is - code can be defficult to read or understand. I think it is not easy to understand that (ㇼ 8;š ) printing home icon.
Even the 8 bit PNGs are faster then the font icons.
Image icons can be lightweight but still slow down your site with another HTTP request and time for the image to load. With images you donāt have flexibility over the color and scaling. SVG vector image alternatives are still not faster than plain-text (Unicode characters). Unicode doesnāt require additional HTTP requests and can be made to scale nicely.
If you are developing a website using only simple shapes, you can use unicode UTF-8 symbols as replacement for font icons.
I think :
Almost every developer use libraries for icons because of readablility of code, Easy to use and get more options.
Safe or Not
I can not say whether it is safe or not.
Because Unicode contains such a large number of characters and incorporates the varied writing systems of the world, incorrect usage can expose programs or systems to possible security attacks. This is especially important as more and more products are internationalized. This document describes some of the security considerations that programmers, system analysts, standards developers, and users should take into account, and provides specific recommendations to reduce the risk of problems.
Read about UNICODE SECURITY CONSIDERATIONS
Here are few precautions to be taken while doing that, I did some research and found this to be more helpful for your question. Also I dont know how you can do but credits go to Mr.GOY
Displaying unicode symbols in HTML
I was curious how Imgur was rendering their upvote/downvote arrows:
I assumed they were images, but I found something that I did not expect:
A custom font that contains glyphs for up and down arrows, mapped to the 'o' and 'x' characters, respectively:
Is this method considered acceptable these days? I have never considered using a custom font for something that doesn't semantically map into an alphabet. This approach is not even on my radar of best practices for web design.
I can imagine the reasons for:
Your site uses a standard icon set that can be mapped to single-character codes.
You only need control over foreground/background color for the icons.
You want icons that scale the same as text.
I want to know any specific reasons against using this method.
In particular, I'm looking for answers that address any of the following:
browser/platform compatibility
future maintenance implications
semantics
performance
standards compliance
The only thing I have come up with so far, is that, semantically, it does not make sense to map an upvote icon to the character 'o' and a downvote icon to the character 'x'. And, just to be specific, I'm not talking about keyboard mappings, but rather language mappings, character codes. It seems to me that raster images or SVG are much more preferable alternatives in this case.
I thought of one other possibility: language and encoding compatibility. Would the html lang attribute or character encoding of the page have any effect on the character mappings into the font in the CSS stylesheet (the stylesheet uses 'x' to represent a downvote icon)?
However, I'm certain Imgur has thought all of this through already. So, why am I wrong?
Modern browsers (e.g. IE9 above) support custom fonts.
Even Bootstrap also uses custom fonts for icons, known as Glyphicons! It is a nice way to beautify the websites icons without having to do it from Photoshop as an image which may cause responsive issues.
They are usually used by calling the class name which links to the CSS that call the icons from the font family. Html lang would not have any issues with it.
Many websites use "icon fonts". But yes, assigning language letters to them would be wrong. It would be best to assign an arrow icon to the Unicode character code for a similar arrow. Another option would be to use the Private Use Area of Unicode. In this case, if your font fails to load for any reason, you won't have a good fallback strategy. But if you choose meaningful char codes for your icons, you would.
Many people are in favor of using SVGs over icon fonts. But there are pros and cons to both icon fonts and SVGs. I think that it's great that as web developers, we get to choose among different implementations or solutions to the same problem.
To answer your question, I would say that if done right, there is nothing wrong with using fonts for implementing icons.
As Mike 'Pomax' Kamermans put it:
"Fonts are for encoding vector graphics that are to be used in
typesetting context. That can mean letters, or icons, or emoji"
One big reason is accessibility. There are many browser extensions which swap out a website's font for one that's more legible for people with different visual impairments. If you use fonts for your icons, these will be swapped out too, leaving your user looking at whatever string you placed in for your icons.
I am currently using the utf code "\293B" for an arrow to put before the reply link in posts. the html is declared utf 8. The arrow works in firefox and explorer but not chrome. i saw that wordpress uses content: "ļ" ("\f412";) (for example here:http://cinematicamsterdam.wordpress.com/2014/05/26/cinematic-city-a-retrospect/) that works accross all browsers but I can't paste it in my document. How can I do it?
i'm a newbie here, sorry if the question is simple..
This does not primarily depend on browsers but on fonts installed in the system; secondarily it depends on your CSS settings and on some shortcomings in browsers. For a general description of such issues, see my Guide to using special characters in HTML.
In particular, U+293B BOTTOM ARC ANTICLOCKWISE ARROW āā¤»ā has rather limited font support. A large number of systems have no font containing it. It could be used rather (though not 100%) reliably using a downloadable font, but it sounds like you are generating HTML-format e-mail messages, so downloadable fonts are hardly a feasible option.
The best short appears to be to an image instead.
What your describe as WordPress usage is a Private Use codepoint. In practice it works only with a particular special font. You can copy and paste it, but outside the private use context such as use on a web page with a specific font, it has absolutely no meaning and should not be expected to have any particular rendering, or any rendering at all.
I have a javascript application, that converts text in runes using the Unicode rune chart. The problem is, that some fonts do not contain the rune symbols.
Mozzila Firefox simply finds out the correct font and uses it for runes, instead of Goudy Medieval and Times New Roman. Google Chrome is not capable of doing that and displays black boxes instead of runes.
So my question is:
How can I find out which web-safe font supports these symbols?
Can I find which font does Firefox use at any point of the document?
Re. 1.: Use a character map program. (On Linux, use e.g. gucharmap, where you can search for the character, and by right-clicking on it (and holding), you can see the font used. You can also switch to other (non-default) fonts in the program and see if the character is present in that font too.)
Re. 2.:
Highlight the text whose font-family you want to determine.
Right-click and select Inspect Element.
In the Developer window that should open, on the right hand side, there should be a Rules column with a bunch of CSS rules. You'll usually have to scroll to the bottom there, and somewhere in there you should find the applicable font-family (inherited or custom-specified) list of which fonts to preferably use.
Compare this list (which may be a single item) with the list of fonts installed on your system. The first matching font between that list and what you have installed would be what Firefox is using.
Use a font-manager program (on Linux this might literally be "font-manager") to get a list of fonts installed on your system.
if rune is an open type font ligature, you can view the font's open type features a few ways....microsoft typography has a free tool u can download, install, then right click on an open type font, some new tabs will appear with the usual ones...one of them is properties. click on that guy, it'll have a list of all the features.
you can also use photoshop, i know if you select an open type font as the text in use, you can then view it's open type features. here's some images of exactly how to do it...sorry for the quality, these are from CS4: http://dev.bowdenweb.com/css/fonts/accessing-open-type-features-in-photoshop.html
so that's how you can tell what features they offer. i'm not sure if runic is a feature itself, or just a design term....that said, quick google search and "Junicode" is a medieval font with the "Junicode is an advanced Unicode font for medieval scholars, including the full range of characters for languages written in the Latin script" http://www.filewatcher.com/d/FreeBSD/8-stable/sparc64/junicode-0.7.6.tbz.1331504.html
but maybe your heart is set on your font....i can't find alot about the rune chart, sorry. you can search the entire open type font features list....i know microsoft typography has it listed, as does adobe...but neither are great for searches, and i'm also not a fan of their naming conventions, which confuse me even more.
I have a web app in which a user can change the font family of an input text area in a WSIWYG-kind style. Now, let's say the user inputs some Chinese text in the text area, but selects a Font that has no support for Chinese characters. In my application, I'd like the user to see those nasty squares (or something like that) that are usually shown when the font doesn't support the character. That way, the user would know that the font doesn't support the language and could choose a different one. The issue I'm having is that the browsers (Firefox 17 and Chrome 23) seem to render the Chinese part of the text with fonts (as Arial) that do support those Chinese characters, making the user believe that the font he's trying to use works fine.
Is there a way (I'm guessing through CSS) to prevent this? Is there a way of making the browsers not to be so "nice" for only this time?
Thank you in advance.
As the other answer already explained, the solution is to use a fallback font which includes 'all' unicode codepoints. However the difficult part was to find or built one which doesn't weight a few MBs.
A few years later there is now a more lightweight solution for a fallback font, the NotDef font by Adobe. It shows a box with a cross for 1,111,998 Unicode code points, is only about 22Kb and is using the SIL OPEN FONT LICENSE Version 1.1.
If you don't want to show anything there is also the Adobe Blank font.
You can intercept the font substitution process by throwing in a catchall font, using some equivalent of font-family: userChoice, yourCatchAll where yourCatchAll is a font that has a generic glyph for all characters.
The problem is in finding such a font. The LastResort font distributed by the Unicode Consortium would be ideal, since it also visually indicates the category of the character in broad terms, but its EULA does not seem to allow modifications. It is debatable whether this applies to the construction of web font formats (like .eot and .woff).
The Unicode BMP Fallback Font appears to have more liberal rules of use, but it displays a character simply as its Unicode number in a box (and supports only Basic Multilingual Plane, though it contains all characters that most people ever heard of).