This new version improves the OT panel. - Now it should work on Google Chrome and Firefox. - It also shows you my recommended syntax for using OT features in your CSS code, for all browsers. - You can also print using webfonts from Google Chrome. - Lettering Sheet "tab" added
Updated to v8.4 to accommodate for the Firefox15 public release.
Firefox has changed the way it handles the OT features: in FF v14, they used a custom "Firefox only" syntax style (now deprecated). in FF v15, now they have switched to the standard CSS3 syntax.
It's a good thing. Now all the browsers use the same syntax. On the bad side, what used to work on FFv14 is now broken in FFv15.
The same applies for the testing page: Now it works on FFv15, but no longer works on FFv14.
I recognize it would require far more complicated programming, but it would be cool if, when editing the text in the first, waterfall, tab, the text in each size changed accordingly.
Hi Craig, Dave Crossland implemented it.
Version 9.0 updates: - When editing text in any of the first 7 tabs, the text will update for all sizes. - In "Words" and "Caps" tabs, we added preview for multiple sizes. - Added a few extra glyphs in the "Lettering" tab. - Added more diacritics in the "Latin Tab", now covering all Latin Languages. - Also added Vietnamese diacritics, and a few more Pangrams and text samples.
The 'More' tab gives samples of non-Latin scripts that may or may not be supported in the test font. On Windows Firefox -- I'm guessing other browsers too --, the scripts not supported by the font are displayed using default fonts, which gives a bit of a confusing impression. Is there any way to only display samples for the scripts actually supported in the font?
Yep, we are aware of that. It's the way browsers work. If a glyphs is missing in any font, browsers won't show the /.notdef glyph. Instead, they use the fallback system fonts. This is good for websites in general, as the content will still be accessible if the user does not have the required font, but is not good for our special use case.
Dave has suggested a possible solution. It's a bit complex and require quite a lot of javascript magic involved. Hopefully it may get implemented in future releases, as it's one of the next things in our To-do list. It will also be great for quickly detecting missing glyphs in the "Latin" tab as well.
It's a bit complex and require quite a lot of javascript magic involved.
You could just generate a fallback font which has nothing but .notdef or empty (but existing) glyphs in each Unicode slot. Then you stick that in the font stack at the second position and no fallback to system font glyphs should happen.
Yep... But that way you won't be able to see which glyphs are missing in the font you are testing.
But your idea is interesting... Maybe we can take a libre full unicode font and add a box around each glyph. So when testing, the missing ones will still be easy to detect.
@Karl Strange, The SIL suggestion is great! Pablo just moved the code to GitHub so I've filed an issue to track this - https://github.com/impallari/font-testing-page/issues/8 - and it might also make sense to have a font that just has a 500 unit wide empty glyph in each character, and have that in the fallback stack, so that if a glyph isn't present it doesn't appear.
@Mark Simonson, I'm not sure how to detect that a font doesn't have a glyph in JS; the fallback font is probably the best way forward at the moment.
Comments
This new version improves the OT panel.
- Now it should work on Google Chrome and Firefox.
- It also shows you my recommended syntax for using OT features in your CSS code, for all browsers.
- You can also print using webfonts from Google Chrome.
- Lettering Sheet "tab" added
http://www.impallari.com/testing/
I guess it should also work on IE10, but that's untested.
Safari is not working at the moment.
However, the "Recommended CCS Code" generated by the tools, does indeed work for ALL BROWSERS.
Firefox has changed the way it handles the OT features:
in FF v14, they used a custom "Firefox only" syntax style (now deprecated).
in FF v15, now they have switched to the standard CSS3 syntax.
It's a good thing. Now all the browsers use the same syntax.
On the bad side, what used to work on FFv14 is now broken in FFv15.
The same applies for the testing page:
Now it works on FFv15, but no longer works on FFv14.
Version 9.0 updates:
- When editing text in any of the first 7 tabs, the text will update for all sizes.
- In "Words" and "Caps" tabs, we added preview for multiple sizes.
- Added a few extra glyphs in the "Lettering" tab.
- Added more diacritics in the "Latin Tab", now covering all Latin Languages.
- Also added Vietnamese diacritics, and a few more Pangrams and text samples.
Use it freely at:
http://www.impallari.com/testing/
Or grab the source code. Upload to your own server, tweak it to your needs, etc.
http://www.impallari.com/projects/update/93
Suggestion for futures updates are always welcome.
Yep, we are aware of that. It's the way browsers work.
If a glyphs is missing in any font, browsers won't show the /.notdef glyph. Instead, they use the fallback system fonts. This is good for websites in general, as the content will still be accessible if the user does not have the required font, but is not good for our special use case.
Dave has suggested a possible solution. It's a bit complex and require quite a lot of javascript magic involved. Hopefully it may get implemented in future releases, as it's one of the next things in our To-do list.
It will also be great for quickly detecting missing glyphs in the "Latin" tab as well.
But your idea is interesting... Maybe we can take a libre full unicode font and add a box around each glyph. So when testing, the missing ones will still be easy to detect.
http://scripts.sil.org/cms/scripts/page.php?item_id=UnicodeBMPFallbackFont
@Mark Simonson, I'm not sure how to detect that a font doesn't have a glyph in JS; the fallback font is probably the best way forward at the moment.