My app does the following:
enumerate fonts installed on the clients machine, and populate a dropdown list with them
present a s:TextArea with special characters (like äöü)
update the TextArea's font family to the one selected in the dropdown
After it updates, there seems to be three possible results: the correct glyph, a blank space, or a fallback glyph in a device font (seems to be _serif, though the CSS style is _typewriter). My goal is to programmatically detect whether a device font supports all the glyphs in a chosen user font.
I have tried getBounds on various children (to detect 0 width, etc.), getting info about atoms, and comparing fontFamily for a correct glyph against fontFamily for a blank or fallback glyph. For formatting changes that dispatch a UpdateCompleteEvent or CompositionCompleteEvent, i am always doing my checks after it completes.
Is there another way to approach this, or am I missing something?
thanks.
enumerateFonts
hasGlyphs
Related
I use icomoon.io to create and manage my icon fonts. It's excellent and you can set "ligatures" for the text you want to display the icon.
However, I cannot find a sane way to handle missing ligatures to display a default or "missing" icon.
One insane way was I created an icon component and check the text against an array of ligatures. But this would mean that I must maintain the array to match the icons in my font.
everyDangLigature = ['star', 'arrow-up', ...]
iconText = everyDangLigature.includes(str) ? str : 'missing';
IcoMoon wrote me back with
...if you parse the CMAP table of the font, you could check if a glyph
exists by its code point.
Also asked the opentypejs group.
How does one go about parsing the CMAP table of the font?
Is there another way to elegantly handle missing ligatures in our icon fonts?
How does a web browser handle the case when a given glyph, character, symbol, dingbat, etc is missing from a font ? You can for example declare fonts in your CSS that don't include the font maker recreating: Unicode Character “⌚” (U+231A) yet it will still render. How does the browser make the decision itself?
So the font matching algorithm is relatively complex so I don't want summarize it incorrectly. But basically after it goes through the fonts mentioned in your CSS and none of them work it goes to a user agent defined system font fallback procedure. There is no spec or standard for this, so it is going to be browser / user agent specific.
https://www.w3.org/TR/css-fonts-3/
I'm searching for a method to tell the browser to render each glyph rendered with a specific font, e.g. FreeMono, in a bigger font size than glyphs rendered with other fonts. The reason for that is, that I use characters like ᚠ in a website and these glyphs are rendered using FreeMono in Chrome (see inspect element → computed → rendered fonts) and they look always like they're to small to fit the surrounding text. Is there any way I can do that?
You cannot. CSS has no tools for such font-specific tuning, apart from the font-size-adjust property, which has very limited effect, limited browser support, and buggy support.
If you use a character such as “ᚠ” U+16A0 RUNIC LETTER FEHU FEOH FE F on a web page, then it will be up to each browser in each system which font (if any) is used to render it, at least if you do not explicitly suggest some font(s) that contain it. It may be FreeMono, but most computers in the world do not have it. Besides, in FreeMono, “ᚠ” is rather large—taller than uppercase Latin letters. So if it looks too small, the reason might be a mix of fonts.
To make, say, Runic letters match the style of other text, you should try and find a font that is suitable for both—so that you can use a single font, designer by a typographer to make things fit. You would then probably need to find a suitable free font and use it as a downloadable font (with #font-face). It might be FreeSerif or FreeSans; only in very peculiar circumstances would I consider FreeMono, a monospace font, suitable for rendering computer code in some cases and mostly unsuitable for everything else.
How does the font-family property work in CSS? Why is more than one font used? Isn't only one font used at a time by the browser?
The font-family property holds several font names to provide a "fallback" system.
The browser tries each font family in the order that they are listed; if the browser does not support the first font, it tries the next font, and so on, down the list. That's why it's important that at least the last font in the list be a generic font family that is guaranteed to be universally available. There is no guarantee that the fonts you have loaded on your computer when you design the web page will be loaded on your visitor's computers—fonts are generally handled client-side, rather than server-side.
A common declaration might look like this:
font-family:Georgia,"Times New Roman",serif;
The "Georgia" font will be used if it is available. If not, the browser will attempt to fall back to "Times New Roman". If it can't find that font either, it will use a generic serif font.
For more technical information, I suggest reading the Fonts specification from the W3C.
To expand on what cody said:
When you look at a web page through a browser, your browser looks at the css and sees what fonts to use. Then it checks this list against the list of fonts that your computer has installed; the first one that matches is the one that gets used. Fonts are client-side, not server-side, and if you don't have the font that the css specifies, your browser falls back either to the next font specified or a default font.
I am new to style sheets and Section 508.I am trying to understand it.
As i understand, style sheets provide some specific set of details on how to display a web page. For example, it can mention color, font and size to be used for all elements/specific elements in a page.
One of the criteria in section 508 states that, we should not override user specific settings of font, color and contrast they may make at OS or browser level. In this case, how should we go about respecting this? The idea of having a style sheets is to have a unique, more impressive and usable style of our own. So we will have our own set of font, color etc., in our style sheets.
If this criteria is to be met, we should not override any font/color/contrast in our UI which is a bit contradictory to one of the ideas of using style sheets. Isnt it? So should we provide another style sheet which uses high-contrast details which is also our own set of fonts, colors etc., or provide an option to use our UI without style sheets? Please advice.
Thanks in advance.
Style sheets themselves (or at least CSS) already provide a suitable mechanism for this: User style sheets. A user can set any styles within his user agent, which, if suffixed with the !important rule, override the author's definitions.
Furthermore, regarding fonts, authors can specify font families which are user-specified. Those are, among others, serif, sanf-serif and monospace.
You can also use the system colors to specify foreground and background colors of elements to ensure contrast, such as
background-color: Window;
color: WindowText;
This would ensure legibility and use of the system-defined colors.
What language are you using? Some languages allow you to change the styles on an object programatically; others you'll have to use javascript. Which you can't rely on for 508c compliance.
They're really more guidelines than anything else. If your design works well no matter what the default font size or whatever is, then feel free to keep it at that. If not, no biggie. There's whole-page zooming, screen inversion, and if all else fails, turning off CSS (or CSS overriding), if someone really dislikes your design.
The most important part to remember is that your user can have defaults that are different from what you're used to. If you change a foreground color, you should also change the background color, and vice versa, since your user might have set them to different colors than you expect them to be. If you set the font size of text in one place, you should set the font size of text everywhere (preferably in body or html) And in general, when you change one setting, to make sure it could never conflict to your users' defaults, overriding those defaults if necessary.
Stylesheets actually help you to adhere to 508, WCAG and (in the UK) the disibility discriminations act. It is also worth noting that in many cases they are much stronger than just guidelines, they are law.
You use your stylesheet to make your page look ace, and if a user has a special need, they can choose to "switch off" stylesheets, or even replace them with their own.
With this in mind, you can set whatever values you like in your stylesheet (see note below) but also check that your website works when you switch it off completely (you can test it by taking out the reference to your stylesheet, or if you are using Firefox, with the Web Developer Toolbar).
Note: When I say "whatever values you like", you should still be trying to ensure that the values you select give at least 80% contrast - i.e. not white text on a yellow background etc
The BBC did a very nice job explaining a lot of accessibility standards and making references. I think this page could be helpful to you: http://www.bbc.co.uk/guidelines/futuremedia/accessibility/colour_contrast.shtml