cufon glyphs support - javascript

I have a problem with cufon and a few Turkish glyphs. This is the context:
I used the #font-face property to embed the custom font (Delicious-Roman) on a website. The client didn't like the fact that the font was the last one to load on each page (common issue with font-face) so I switched to cufon. When I was using font-face all the characters worked as they should, but when I used cufon a few glyphs stopped working (they simply don't show up on the page). I opened up Photoshop to test the font and indeed it doesn't have those Turkish characters (ğĞİşŞ).
Why the font-face property managed to show all the characters even if the font didn't have them?
How can I add those Turkish characters (ğĞİşŞ) to cufon?
I tried the "...and also these single characters" option on the cufon website but it didn't worked. I simply inserted the characters - ğĞİşŞ - in that text field. Is that correct?
If there is no way to add these glyphs to cufon, what is the easiest way to add them directly in the font I use?

The easiest way I found was to simply include the missing characters into the font and the re-use cufon. For this task I used the Glyph App - Demo version works perfectly for 30 days and you can export fonts without restriction.

Related

Fallback fonts in react native

Are there any current solutions for fallback fonts in react-native?
I have a font used throughout my application, but a specific character is not supported by this font. I would like it to fallback to a custom font (specifically for iOS) since it looks like the styling for this character changed from iOS 12 to iOS 13.
I see in the react native Text documentation that multiple fonts are not supported, but I'm wondering if there are any third party solutions for this.
EDIT: The font cannot be hard coded since this character may show up in any string. It must fall back at a high level text component used throughout the application.
Cheers!
Basically, there is no way that React Native will automatically do that. You have to define your special character and tell RN to use your alternative fonts. There is a RN library to do that for you: React Native Hightlight Words. This component will detect your special character, and render it with your custom style (including your font)

How to convert an emoji image to Unicode in JavaScript, or reflect a custom emoji for a given Unicode?

I'm trying to understand how to implement custom emojis for user input and I can't seem to get a handle on it.
I see that sites like Facebook initially show a list of small .png emoji images, then, once you click the image, it converts it to a Unicode character.
Also, I've been digging through custom emoji packages that use sprite images.
I can't find any material that explains how to utilize a sprite, or a single image, then convert this to Unicode on the fly to be displayed later.
If you can't convert images to Unicode on the fly, how is it that different sites reflect their own custom version of an emoji with a given Unicode character?
I would like to point to the OpenMoji Project for Inquiry:
https://github.com/hfg-gmuend/openmoji
In the data folder you will see neat look up files you can utilize. Basically they save pngs with the name of the choresponding unicode character in their font, more advanced info is in the json:
{
"emoji": "😀",
"hexcode": "1F600",
"group": "smileys-emotion",
"subgroups": "face-smiling",
"annotation": "grinning face",
"tags": "face, grin",
"openmoji_tags": "smile, happy",
"openmoji_author": "Emily Jäger",
"openmoji_date": "2018-04-18",
"skintone": "",
"skintone_combination": "",
"skintone_base_emoji": "",
"skintone_base_hexcode": "",
"unicode": 1,
"order": 1
}
Edit: Sorry, I thought you were interested in how to build lookup table with pngs. My Solution for the problem of adding emoji-fonts to webpage would have been to add a font, but thats not working:
How to use an emoji font on a website?
I dont think there is a "proper" solution to this problem currently.
Edit2:
<!DOCTYPE html>
<head>
<style>
#font-face {
font-family: "OpenMoji Black";
src: url(OpenMoji-Black.ttf) format("truetype");
}
.openmoji {
font-family: "OpenMoji Black", fantasy;
}
</style>
</head>
<body class="openmoji">
<span>Hello World 😅 😇</span>
</body>
</head>
Works sweet with https://github.com/hfg-gmuend/openmoji/blob/master/font/OpenMoji-Black.ttf on Chrome, Firefox and even IE.
Broadly speaking, there are two methods for adding emoji functionality to user inputs:
Unicode characters, which relies on a custom font imported by the developer OR the browser vendors default font, to determine which version of a particular emoji is used. You simply type in the unicode string and the browser inserts a given emoji based on the font. Check out unicode emojis here. and also this post explains more about unicode usage for emojis.
The insertion of images into a rich text editor (RTE). This technique relies on having single emoji images (typically .png) or sprite sheets that the developer can use with the RTE. This article is a great place to start.
The first method can be harder to customize the emoji unless you're into making custom fonts. RTE plugins like TinyMCE are a simple and quick way to tinker with unicode emojis.
The second method becomes a bit more complex, and is used by some of the big players like Facebook and Twitter. As with most things coding, with complexity comes flexibility. This method involves programmatically transposing some plain-text flag such as :smile: into an html element like <img src='smile.png' />. It creates a text area by utilizing the contenteditable div tag. Inside this div, the content is edited programmatically in order to add or remove emoji images, bold/italic letters, etc...
In order to better understand how the second method works, I created react-ez-emoji, which is a lightweight, emoji-enabled contenteditable div that allows you to use any emoji image file you'd like. It would be a good start for anyone looking to study the topic, but I don't recommend it for production.
This article does a good job explaining the limitations of Unicode emojis, and why the second option is more customizable and efficient.

How to place a checkMark as a character?

$("#status").html('<img src="available.png">Available');
Instead of checkMark picture I want a chekMark character.
Is there a way, please?
You could use U+2713 (Check Mark Symbol ✓):
$("#status").text("\u2713 Available");
Try
$("#status").html('✓');
try either of
✓
✓
one is hex, one is decimal. If I don't put code markers around them, you get
✓ ✓
See this: http://www.danshort.com/HTMLentities/index.php?w=dingb
✓ or ✔
Although I must say that I think a picture is a better option: you can modify it later at any time without changing your code.
Try this:
Decimal:
✓
or
hex:
✓
example: $("#status").html('✓');
You can also use a check mark in a web font.
This question (and the answers) are now five years old. For the sake of those coming from Google, I wanted to add another option that's become available in recent years, but is not mentioned in previous answers.
You can certainly still use unicode characters (.html("✓") or .text("\u2713"), but in the past few years web fonts have become more common. For example, material icons has a check mark:
https://material.io/icons/#ic_check
Google (who made and maintains material icons) also did a good job of explaining web fonts and how to use them here: https://google.github.io/material-design-icons/
Basically web fonts are the best of both worlds: the customization of images and the usage/dynamics of font characters. The advantages to using web fonts over unicode characters are:
control over style (you can make your own web font character of any style, whereas unicode characters are what they are)
use of multiple styles (you can make web fonts with numerous styles of check marks for different situations; you're not locked into one style)
code readability (very few developers will know what \u2713 or &#10003 means, but <i class="myfont">check</i> is easy to understand
portability: although every major browser uses a unicode font by default, there are still some computers or devices which may render with a non-unicode font by default. In fact, wikipedia's current list of unicode fonts is decently long, but the supported characters vary widely between each font, and there are clear differences between how the each font is rendered by different platforms. Including a webfont ensures that every user will see the same thing, regardless of platform or default fonts.
More options: having an installed webfont allows you to update the style, add new icons/characters to the font, etc. There is no way to currently do this with unicode.

Certain HTML Character Entities are HUGE in Firefox Only

For some reason, in my Firefox 12.0 for Mac OS X, my 〉 (〉) characters are much larger than they should be. On Chrome and Safari, they look exactly how I want them to be.
I have AddDefaultCharset utf-8 in my .htaccess as well as <meta charset="utf-8"> in my <head> (as the group I'm delivering these files to may not use my .htaccess).
Also, according to Adobe's Browser Lab, IE 7 and 8 just show a square box... is there anyone I can get these browsers to support that character? It would make things a lot easier (as the colors are going to be changing, so images are very inconvenient, and no color fade with images).
Demo: http://cameronspear.com/demos/rang/
This is what I see in Chrome and expect to see:
This is what my Firefox is showing:
This is a screenshot from Browser Labs of IE8:
TL;DR: I want all of these screenshots to look like the first one using 〉 aka 〉 characters. Use of JavaScript would even be acceptable.
Thanks.
[edit] I should specify that it's not as crucial I have the 〉 character as I am able to change its color with CSS and have it look the same across multiple browsers.
Solution
I just wanted to share exactly what I did for posterity's sake.
Thanks to Pointy's tips and resources, I created my own SVG with Inkscape using the template and methods as described at "How to make your own icon webfont". I mapped a big angle bracket to X and a small one to x.
The one thing I ran into was that my angle needs to touch the baseline and only go about 72% the way to the top of the box to fit "inline," so capital X was my original too-tall one, and lowercase x was the more inline one.
I then converted my SVG to TTF with http://www.freefontconverter.com/ and converted to a webfont with http://www.fontsquirrel.com/fontface/generator
... and that was it.
The demo (http://cameronspear.com/demos/rang/) is still up. You can see it looks consistent in all the browsers and the onclick rotation animation is dang close to the point, etc.
[Update] I found a great resource called IcoMoon that helps on making fonts and organizing fonts for the web, and it accepts regular svg vectors so you can make it in Illustrator and not mess with Inkscape since IcoMoon handles the keyboard mapping and stuff. You can only export the icons you use, so you only load 3 or 4 icons if that's all you need and not the entire font.
It's become an invaluable resource, and I recommend everyone else wanting to get into Icon Fonts check it out. You can learn more about the entire process from CSS-Trick's 113th Screencast.
Are you able to use images? They would provide a consistent look across all browsers. In many cases, images are preferable to character symbols.
This is a font issue. To maximize the odds of having a rare character (one that is not present in most fonts) rendered properly, specify a maximal list of fonts that all contain it.
The page now has just font-family: Arial,sans-serif set on the span elements that contain the bracket. Since Arial does not contain it, each browser will use its own definition for sans-serif. If the map that it is mapped to does not contain the bracket, clever browsers try something clever, like scanning through other fonts in the system, but this may still result in lack of any glyph for it.
There’s an additional problem. Normally it does not matter that you use entity references like 〉 instead of the character itself, but here it does. By HTML 4.01, 〉 means U+232A; by HTML5 drafts, it means U+27E9. IE obeys HTML 4.01 here, whereas Firefox uses the HTML5 definition. So it is better to use the character you really want, either as such in UTF-8 encoding, or as a character reference 〉.
If you can check e.g. the font coverage for U+232A and write the fonts in order of preference. But you should check that all of the fonts give an acceptable presentation. For example, if Cambria Math is used, the default line height will be very large, so you probably want to set line-height explicitly to some reasonable value like 1.3.
Finally—and this should perhaps have been asked very first—do you really want to use RIGHT-POINTING ANGLE BRACKET or MATHEMATICAL RIGHT ANGLE BRACKET? They are brackets, to be used as paired with left angle brackets, not arrow symbols.
Some more info: Guide to using special characters in HTML.
Making an icon font is easy enough that I can do it, though (for me) the process is somewhat mysterious. I suspect there are many actual graphic artists who are better at it, and surely many who understand the technical details more than I do.
Here is a pretty thorough blog post on the topic. (Not mny blog.) The main thing it doesn't describe very well is the relationship between the Inkscape "art board" area and the vertical positioning of each glyph in the font. It goes into some detail, but I've just never been able to figure it out.
What I did, therefore, is just make a square artboard 1024 pixels on a side. I then set up a grid in Inkscape so that the art board is divided up into a 16x16 grid. That makes it (somewhat) easy to design characters that will render nicely at a 16px font size. (Of course you could target a different font size, if you want; 16x16 is good for stuff that needs to be pretty small however.) Then, I just make sure that when I put the glyphs on the page, they're in a 1em by 1em box (or 16px by 16px; however you want to do it in your CSS) with no padding. I use <i> tags, and give them display: inline-block. That gives me a lot of flexibility, and it generally works great.
The Inkscape SVG font tool is, to put it mildly, pretty raw. It's literally the result of somebody's summer project. It works, but not much more than barely. Save often.
Now the process for generating the font files is somewhat crazy. I use FontSquirrel. I upload the .svg saved from Inksccape, and then ask for EOT, WOFF, and TTF. Amazingly, it works.
If you just need a few glyphs, this is a pretty sweet way to go, because you'll have a little bitty font file to download and it'll be cached by the browser. There are some accessibility issues however and the practice is sufficiently controversial that some more fanatical members of the community may consider you a barbarian for doing this :-)

How can I detect whether Unicode characters are displayed properly on my web page?

I’m trying to use a reasonably esoteric Unicode character on a website — specifically “︙”. Windows XP, as far as I know, didn’t ship with a font that included a glyph for this character — the Virtual PC IE 6 test image doesn’t display it at any rate.
Is there any way I can detect whether the character is displaying properly, in case people are looking at the site using Windows XP without Arial Unicode MS installed?
An answer on a similar question suggested comparing the width of an element containing just this character with the width of an element containing an unprintable Unicode character. Unfortunately, both seem to render at the same width in browsers that display my character properly as well.
Try using ⋮ (⋮), which is an alternate character for the same thing (a vertical ellipsis). I'm not sure why there are two glyphs for this, and they are slightly different; in my own testing, ︙ (︙) uses circles for the dots, while the other one uses squares. That probably varies by font though. And anyway, you have to increase the font size to ridiculous sizes to notice a difference.
What you are trying to do is virtually impossible, at least not in a safe way.
Instead you should clearly define your supported audience, specifying exactly what browsers you will support and for unsupported ones display an warning.
BTW, Do not display the warning for any browser that it was not identified by you, just for the that were identified as bad.
You could add an embedded font but this will work only on some browsers and probably not on mobile devices. I wouldn't recommend you to use such esoteric characters.
One idea http://www.devslide.com/labs/browser-detection
NOTE: in the text above, I refer to a browser as a combination of browser and operating system. Today most browsers do properly display Unicode characters, BUT the fonts do not, and the user will see boxes instead of correct characters. A well designed web page must render properly with the default fonts existing on the client computer.
Use an embeded font. You have to have 4 versions or so of the font file around for it to work in all browsers, but it works in IE6 Up and all modern browsers, including iOS mobile devices..
http://www.fontsquirrel.com/fontface/generator
You can upload a TTF font and get the whole package back as a download - all the font files needed and the CSS plus a sample page to test with. I have not found a browser that this will not work in (including 1-2 version back from current, depending on the browser).
I am not sure you need to worry about this... according to the Microsoft site, Arial Unicode MS is automatically installed for Windows XP.
http://office.microsoft.com/en-us/visio-help/install-the-universal-font-for-unicode-HP005255840.aspx

Categories