I'm working on a font detection library that needs to be very, very small, suitable for including inline on every page of a website. I've already gotten it pretty small (417 bytes gzipped). You can check it out at the Github repo.
Upon further thinking, I can reduce the size of the library significantly again (around another 10%) if I can make a few basic assumptions:
It is impossible to define a working font file (for browsers, anyway) without a space character/definition.
OR, if such a space-omitting font could be created, that all modern browsers and IE9+ will choose the fallback font's space character when a space character is needed. That is, there is otherwise nothing special about the space character in terms of font-fallback.
And, tangentially, all modern browsers and IE9+ will have a different width for the space character in serif and monospace generic fonts provided by the browser (probable, but I will need to test further).
I just attempted to explicitly define a font without a space character using FontSquirrel's font generator. This was done by explicitly omitting the space from the selected Subset and disabling the 'Fix Missing Glyphs' for space. FontSquirrel still generated a font with a space character with a width differing from both serif and monospace.
I understand that some languages do not have a space character in the traditional sense, but due to the nature of font file formats and definitions, I do not think that fonts tailored to such a language could or would omit a space character.
If these assumptions all hold, the library could remove the need to support custom text checking and reduce the number of tests from 3 to 2, also speeding up the library and reducing its memory usage. The new size would be around 380 bytes or less when gzipped.
So how about it, font experts? Is it possible to define a valid font without a space character definition? If there is such a font, can you provide an example?
It appears that while it is possible, it is virtually unheard-of to create a font without a space character. Even icon font services appear to include it. Other than a special case for a font detection library, there are no known fonts that omit the space character.
This research led to an improvement to my onfontready library. Details here. Thanks to Mike 'Pomax' Kamermans for his contributions.
Related
I'm trying to get an id of a font-awesome icon. It is located in ::before style. When i use
window.getComputedStyle(document.querySelector("[id='5']"), '::before').getPropertyValue('content')
to get it, instead of "\f458", "\"\"" is returned.
I assume that JavaScript is trying to convert the code into a char but fails. Is there any way to prevent this?
The decoding works, the problem is the font. If there's no match for this character in a font you use, it'll be mangled or in the form of the unicode value in a box.
Since it's in the private area, depending on the font it might be resolved into a glyph or be mangled or be just empty/space.
Checking in the Font Awesome Cheatsheet it looks like a an icon for quidditch.
Perhaps there's a text to image/svg map somewhere on the internet (and if not, then just copy-paste localy and create one) which you might use if the font itself isn't good or you are decoding in a problematic environment (can't install fonts, etc).
I'm trying to write some javascript that detects if a unicode character has been rendered in the browser or not.
Note — this question or similar questions have been asked before, but none of them have had an answer that actually answers the question. Either, the chosen answer doesn't work for every unicode character, or the chosen answer solves the questioner's problem in a different way. e.g. install a font that has the unicode character you want to use.
There are a couple of approaches to this problem I have come accross. Neither of them i think cover every possible situation, or are particularly elegant solutions.
HTMLCanvas
Render the unicode character in a canvas element and compare it to all existing fallback glyphs e.g. � or ▯ etc...
if it matches any of those characters then you know that it hasn't rendered correctly.
The problem with this solution is it requires knowing what all those fallback characters are, which is basically not possible. It also would show a false negative result if you test a character like "▯"
Use a fallback font with blank, zero-width characters for every code point
Render the unicode character with the following css, if the character has no width, then you know it has failed to render correctly.
#font-face {
font-family: 'Blank';
src:url('~assets/fonts/blankfont.ttf') format('truetype');
}
.testfont {
font-family:
-apple-system,
system-ui,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
sans-serif,
serif...
... every possible font that it could render in by default...
"Blank"
}
The main problem with this approach is knowing all the possible fonts the character could render in. I've given this approach a try. I'd render the same unicode character twice, once with the above css, and again without the css.
I found that the unicode character would sometimes render with correctly without the css and render as blank with the css. This suggests that there are more fallback fonts on my system that aren't covered by serif, sans-serif and other generic css font families.
So, you would have to add all the possible fonts before falling back to the "blank" font.
Both these approaches might work most of the time with a lot of tinkering. But I'm looking for an approach that will work all of the time.
Any help would be much appreciated. If I find a solution I'll make sure to post it here.
The only way to do this is to have all the fonts in the font stack available for inspection, and then testing each font in that stack to see whether it supports the character(s) you care about.
The canvas won't work because (a) there is no universal "not supported" glyph, each font gets to define its own, so a list of "not supported" glyphs is something you'd have to build for each set of fonts yo use. But then also (b) the canvas is an imaging bitmap, and so trying to match pixels to a known picture becomes horrendously complex due to point sizes, subpixel offsets, and text rendering optimizations like ClearType.
Also, wanting "missing glyphs" to take up zero space is generally a really bad idea: instead, use a font that very clearly shows that you have missing glyphs, and fix those before pushing updates with missing characters live. This is one of the things you write integration tests for.
The only reliable way would be to only use webfonts, not built-ins (so no "Times New Roman" or "Hiragino") and no "serif" or "sans" as final generic category keyword, but something like Adobe Blank, and then for each of those fonts check whether at the OpenType cmap level those fonts support the character(s) you're trying to render.
(and you could do that server-side, or you could do that in-browser with something like fontkit or font.js)
I'm building a site that uses a lot of emojis. Kind of like the one's you're used to seeing when texting, or on Instagram, Facebook, etc.
Examples: 😄 😘 😂
Of course, not all of the emojis are supported by all the browsers out there. When they aren't then they show up as a square with a question mark in the middle like so:
Is there anyway in JavaScript that you can tell if a character is supported by the browser, or if it'll show up like the question mark above?
Browsers do not "support" displaying unicode characters, it's the font that is responsible. Of course, you can always directly include the font that you want to use to display the characters in the emoji section in Unicode with CSS.
Here is a free and open font that can display emojis.
In case you want to detect if a font exists, here is a tool for that.
As others have noted.. It's not the browser but the font.. So specify a font that supports all your emojis
I'm working on a multi-language website. I have a problem with the color of the Chinese characters. My text color is #333333 but the Chinese characters appear darker than the occidental chars. My content comes from a database.
I thought to do it with Javascript / jQuery. The script detects the Unicode from the paragraph with the .fromCharCode() function. But what I read was that function expects an integer and the Unicode for Chinese chars are not integers. And that should be the reason my function is not working.
EDIT
Here's an image from what I got:
My function to check for the Unicode:
if($('#container p').fromCharCode(4E00)){
alert('Chinese');
}
Any help?
The screenshot suggests that different characters have been taken from different fonts. This often happens when the primary font does not contain all the relevant characters. So the odds are that you are trying to solve the wrong problem. Perhaps you should just consider making a font suggestion that is suitable for all the characters that will appear in the content.
The code snippet is in error in several ways. For example, 4E00 should be 0x4E00. And even that way, you would check for a single character only.
You need to post the full code, or a URL, or both, to get more constructive help.
Your problem is that you are displaying Simplified Chinese in a font that was designed for Traditional Chinese. So when the display engine hits a character that's Simplified (and thus not in the Traditional font), it takes the default simplified font and uses that instead. Then it reverses back to the Traditional font. Hence the unseemly look.
You need to look into what would be the most common Simplified Chinese font (or font family) and use that specifically for Simplified Chinese texts. Something like Heiti TC and Heiti SC.
How can I check if a special character is available in the user's computer?
For example: ♥ ♦ ♣ ♠ ♪ ♫ ¶
If the user's browser doesn't support one of them, then a rectangle () will appear instead of the symbol.
I’m afraid there’s no way to test it, and there’s the added complexity that even if a character is available, browsers (especially IE) may fail to render it.
On the other hand, the information would not be particularly useful, except perhaps in the sense that you could dynamically change the character to an image if it can’t be rendered as a character.
A better approach to having your characters rendered properly is to write your style sheets so that they select suitable fonts. This also addresses the problem that a character might be displayed using a font that does not suit the overall design, such as the basic copytext font.
For example, if you need the characters ♥ ♦ ♣ ♠ ♪ ♫ ¶, select a font that contains them and all the other characters you need. This would probably boil down just to
body { font-family: Arial, sans-serif; }
a different solution can be using google's webfonts
http://www.google.com/webfonts
if you see a character, every other computer [with a recent browser] will see it