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.
Related
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.
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 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.
HTML entities are not working on chrome and IE (on windows).
I have entered the following code in my page and it works fine on mac chrome or firefox or safari, but not on windows.
<span class="font-family:Arial;">〈 〉 〉 〈 </span>
This is primarily a font issue, though there is a nasty silent change in HTML specs involved.
Modern browsers interpret 〈 and 〉 as referring to U+27E8 MATHEMATICAL LEFT ANGLE BRACKET “⟨” and U+27E9 MATHEMATICAL RIGHT ANGLE BRACKET “⟩”, informally known as “bra” and “ket”. This interpretation is being made official in the named character references section of HTML5.
These characters are adequate for use in many mathematical notations, and the ISO 80000-2 standard explicitly specifies that they are used e.g. for certain scalar product notations. But support to them in fonts is rather limited. In old Windows systems, no font contains them. In newer Windows systems, from Windows Vista onwards, Cambria Math should be available. It is possible that you have been testing on an old Windows version, but it is also possible that Chrome is unable to find the right font. To give it a helping hand, use a CSS rule that suggests that font, e.g. with the attribute
style="font-family: Cambria Math"
You might consider adding some other fonts to the list, using fonts that are known to contain the characters. See my Guide to using special characters in HTML.
The nasty change is that in HTML 4.01, in the entities section, 〈 and 〉 are defined as referring to U+2329 LEFT-POINTING ANGLE BRACKET “〈” and U+232A RIGHT-POINTING ANGLE BRACKET “〉”. They are logically less satisfactory (and deprecated by the Unicode Standard), but they have somewhat wider font support.
So in addition to declaring fonts that contain the characters you use, you need to decide which pair of these characters you use or whether you use something else; it's a complicated question. If you use them, it is best to use them as such (in a UTF-8 encoded HTML document) or using numeric character references such as ⟨. The reason is that 〈 and 〉 should not be expected to work consistently; they probably work the HTML5 way in all modern browsers, but there is hardly any reason to take the risk, when you can unambiguously indicate the characters you want.
That particular character is simply a unicode codepoint which is an arbitrary number. There are a lot of unicode codepoints that do not have an 'official' symbol. Even if they do have a symbol, it is not necessarily the case that your font has a symbol for that codepoint. If you choose a different font, you may end up with a different symbol.
I looked at the CSS for the page and it shows this character displaying in Arial (plus a bunch of other fonts that do not matter). Windows comes with Arial so it should always pick up that font first. It looks like Arial does not have a symbol for that unicode codepoint. Anytime you do not have a glyph for a codepoint, it puts in some form of a box indicating there is no glyph
It depends on the entity, and the fonts on the system your reader is using. The issue is that these characters are not in the MathJax web fonts, so MathJax has to fall back on system fonts to find them. Some browsers are better at that than others. Your configuration controls what fonts MathJax lists for the browser to look in, so you may want to modify that to include fonts where you know your entities can be found (and you may want to think about the fact that you may have people reading your site on Windows, Mac, and Linux, and also mobile devices, so such decisions are not always easy).
Notice that when you install STIX fonts, it works for you. This is because STIXGeneral is in the default list of fonts that MathJax uses for unknown characters. You want to add others to that list (it is stored in the undefinedFamily property of the HTML-CSS and SVG sections of your configuration). Note however, that IE will stop checking fonts once it encounters a font that is installed on the system, even if it doesn't include the needed character and later fonts in the list do, so you have to be careful about the order that you use.
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).