Drag and drop font testing page

2»

Comments

  • PabloImpallari
    PabloImpallari Posts: 806
    edited August 2012
    Updated to version 8.2

    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/
  • Stuart Sandler
    Stuart Sandler Posts: 363
    Really slick Pablo! I may have missed it but does this work in Safari?
  • PabloImpallari
    PabloImpallari Posts: 806
    It's working on latest Chrome and Firefox.
    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.
  • PabloImpallari
    PabloImpallari Posts: 806
    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.


  • PabloImpallari
    PabloImpallari Posts: 806
    edited March 2013
    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.

    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.
  • Craig Eliason
    Craig Eliason Posts: 1,440
    Terrific work!
  • John Hudson
    John Hudson Posts: 3,227
    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?
  • PabloImpallari
    PabloImpallari Posts: 806
    edited March 2013
    Hi John,

    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.


  • Ralf
    Ralf Posts: 170
    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.
  • PabloImpallari
    PabloImpallari Posts: 806
    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 Stange
    Karl Stange Posts: 38
    Maybe we can take a libre full unicode font and add a box around each glyph.
    Have you experimented with the SIL Unicode BMP Fallback font? It already has boxes in place, along with the relevant Unicode code point:

    http://scripts.sil.org/cms/scripts/page.php?item_id=UnicodeBMPFallbackFont
  • Mark Simonson
    Mark Simonson Posts: 1,739
    I think a better idea would be to display the fallback font in a different color.
  • Dave Crossland
    Dave Crossland Posts: 1,431
    @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.

Categories