Anybody else want to commission a open source Wordpress type tester?

124»

Comments

  • Complete random question, will there be an option to set the controls to be underneath the preview?
    This should be rather easy to implement. In general, I am still looking for the best ways of making the interface customisable, but this could be a simple boolean toggle for above / below. Thanks for the suggestion.
  • Another small suggestion. The option that inverts the color of the text and background behaves weird when you enlarge the text, also I don't feel it works as well by having a box around it. I am not sure how possible this is in wordpress (or with other foundries site designs), but I feel that Google Fonts has the best solution to this issue by having the background color change across the whole page or maybe you could limit it to a box that encompasses the whole of the fontsampler?



  • Do you reckon it would be sufficient to have a RTL checkbox in the admin backend that designates on of these type samplers as containing a right to left script and thus changing all the default alignment and text directions?
    Sure. I have no idea. :->
  • I‘ve been playing with Fontsampler on my development site this week. Even in this early state it’s an impressive tool. Great work, Johannes.
  • Lasse FisterLasse Fister Posts: 7
    edited November 2016
    I happen to currently build JavaScript tools to generate font specimen.

    The relavant repositories:
    https://github.com/graphicore/specimenTools
    https://github.com/graphicore/mdlFontSpecimen

    And here are some current demos:
    Loads fonts from server: https://graphicore.github.io/mdlFontSpecimen
    Drag and Drop: https://graphicore.github.io/mdlFontSpecimen/html/drop-fonts.html

    Today I became aware of the fontsampler project at https://github.com/kontur/fontsampler-wordpress-plugin

    I think some of our goals are similar, so I wonder if you want to take a look and tell me what you think.

    Technically `specimenTools` tries not to define any layout. It relies fully on (configurable) CSS-classes to initiate the widgets. I'll have to evaluate, but making 'real' Web Components eventually may be a good future plan.

    I'm using opentype.js to get the available features (thus just GSUB so far) from the font and for more things, like getting the outline data to draw the glyph tables.

    It looks like I'll be on the project full time for some more time. So it will evolve probably a lot in the next time.
  • Hallo Lasse!

    Your specimen generator looks great, thanks for sharing your work! The focus of both projects seems to be slightly different, but overlapping indeed, so I'm glad you messaged. Aside from the Wordpress backend integration, I've so far aimed to create contained instances of customisable input test fields (possibly for having several per page), but suggestions like a glyph table preview have come up as well.

    I'll have a closer look at your codebase over the weekend, but the way you've created the library of modular widgets very well lends itself to sharing some code. Particularly the rendering of the type input field I'm currently handling only with a simple jQuery wrapper for manipulating the css as well as the font loading. I imagine it would benefit from using your widgets or fork of them instead, in some form or another. 
  • Thanks.

    > I imagine it would benefit from using your widgets or fork of them instead, in some form or another.

    I'd be happy to help figuring out how we can share. At the moment it would seem good for the specimenTools project if we wouldn't have to fork, but could instead make it more useful to include your use case and demands as well. We'd have to figure out what that means though ;-)

    When you had a look at the code, let me know what you think.

  • Hey Lasse, very cool stuff indeed!

    I had a little play around with the codebase and had a look how to integrate it to the Wordpress plugin. Off the top of my head here are some things I'd be happy to have a look at to see how to best add them to your library to make it work for this use case:
    • Multiple instances per page. I got this almost working out of the box but for example some of the font loading events are document wide, so would need some tweaking to react to loads per instance
    • Adding a couple of manipulation options to TypeTester I already make use of in my implementation, like leading, tracking; also I haven't looked too much, but by assumption the UI implementation seems flexible, so that's great
    • I was wondering about multiple file formats for fallback; I see the WebfontProvider using the window.FontFace API which I am not familiar with yet, but for my own @font-face implementation I tried to conditionally provide several formats, when uploaded and provided through the backend - maybe that's outdated already and assuming support for only woff/woff2 should be enforced?
    • The FamilyChooser could be restricted to any font added to one instance, not necessarily of same family; I imagine a case like a foundry's front page featuring a couple of different, unrelated fonts in one tester
    There certainly will emerge more things, but if it's okay for you I could just open github tickets for these above and we discuss per issue further on how to implement. I'm happy to submit patches for those things, given some dialogue with you on how you'd approach them.

    I'm particularly happy to see how you're integrating opentype.js and detecting and generating the opentype css instructions dynamically based on the currently displayed font; it was something I hadn't quite figured out yet in entirety, so it's great to have your implementation!

    Another thought that came to mind was that while my plugin so far is used for creating these inline instances to test drive fonts, it might be worthwhile thinking about how to offer plugin users the option to generate entire specimen pages like you're working on - so they could use the TypeTester widget on overview pages, but also there would be some semi automated way to generate more in-detail specimen overviews. But one thing at a time ;)
  • > if it's okay for you I could just open github tickets

    Definitely, that's the way to go! Also, I'm not receiving email notifications from typedrawers.com so I always must remind myself to come here :-/ Github issues is great.

    > how you're integrating opentype.js and detecting and generating the opentype css instructions

    That was a priority.

    > how to offer plugin users the option to generate entire specimen pages

    We have probably some similar need, make it an issue as well and we can discuss it.


  • Hi Johannes,
    I found several bugs or strange behavior in Fontsampler wich you might like to fix:

    1. Standart ligatures are per default on in he Fontsampler. But when you klick Standart Ligatures in the OT dropdown panel they are off. Regarding other Apps (In Design, AI etc.) that should be reverted.

    2. When you check an OT feature in the OT dropdown panel — for example Old Style Figures.

    — then select another font style in the drop down
    — all previous OT feature selections (in example case Old Style Figures) are deselected
    — when you try to select them once more they don’t work
    — when you deselect them they start to work in the new font style
  • I shared this thread with my web guys.

    Their response: 
    To use that plugin every font would need to be available to the website as a webfont, which we ain’t doing.

    Sounds right to me.
  • Johannes NeumeierJohannes Neumeier Posts: 197
    edited October 2017
    Thanks for the bug reports @Botio Nikoltchev, and sorry for not confirming per your email - I did get them o:) They are now on the to-do list, feel free to open issues right there on Github if you are using that site. A smaller bug fix update will soon be shipped.
    About standard ligatures: I think by default browsers have them activated - I agree the checkbox state not being selected is a bug, but would keep that standard behaviour (i.e. active by default).

    @James Montalbano yea, sure they are. That's just the nature of webfonts. The "feature request" to make the fonts served in the sampler be somehow secured comes up over and over again. I just think it's a philosophical mismatch that one the one hand folks want users to be able to test their fonts on their website, but on the other do not want to serve the font as a webfont. I'm open for suggestions!
    Also, what I have been suggesting is that folks use only subset fonts for the samplers, to mitigate the harm from anybody in fact ripping those webfonts used in the sampler. If you sell webfonts, anybody can rip those fonts from wherever those (legally licensed and payed for) webfonts are used, but of course I appreciate the foundry's or designer's own site is a different story.

    At any rate, thanks to the people that have been using the plugin and sharing their feedback to make it better :)
  • Johannes, we've explored a way to produce image previews using Inkscape running via command line via the server, otherwise you'd need to use a combination of Harfbuzz and GhostScript to render them as images which is something we're also interested in.
  • Just use hb-view. You can even get it to render them as SVG, and embed that in your DOM for nice live updating.
  • Hi Johannes,
    many thanks for the quick respond! I posted it here too, cuz I transferred my website to a new hosting, so email account did not work proper... Sure, will post on GIT if I find something else.  
    Will wait for the update  ;)
  • @Stuart Sandler yea, I've seen some sites using this kind of server side rendering, but the responsiveness of those kinds of solutions is just sub-par, in my view. Users nowadays are used to any font rendering immediately in their browser, so typing-and-waiting just doesn't cut it - personal view.
    Also for the use-case of a Wordpress plugin, which often runs on shared hosts and LAMP stack and with no or restricted shell access, most of those solutions are out of the question to begin with. The other question is that of how fonts then are rendered; meaning PNG's or even SVG files don't enjoy the same font antialiasing that actual webfonts receive in the browser, so again the display quality would be further removed from how the files will actually render when purchased in full. I really wish there was something in the browser one could do without significant trade offs or providing just the idea of protection through obscurity.

    In the end it all boils down to just how difficult you want to make it for people to rip fonts, it will always be possible. And at the same time, those people that do rip fonts, are they likely to become paying customers just because it is more or less difficult for them to technically do so? Personally, I believe it's more a question of morality, and enforcing DRM is something that might just rather give someone an excuse to rage against the machine and go ahead and rip that font. Philosophies on this vary, I gather :)

  • >>Also, what I have been suggesting is that folks use only subset fonts for the samplers<<

    Easy for you to say
  • Just wanted to say thanks Johannes—I've been waiting for a plugin like this for some time!
  • I am interested
  • I am interested
    It is launched and available for download from the Wordpress plugin registry, or simply in your Wordpress admin area go to Plugins > Add New > Search for: "Fontsampler" > Install > Activate

    An update to version 0.4.0 will soon be published also, including new and improved features such as testing Opentype locl features, better support for right-to-left languages, translated defaults for the frontend, UIs for handling .notdef user input, better customization for developers using hooks, actions and javascript events, and more :)

    In the sidebar of the plugin page is a donation button, if you want to support continued development or show your appreciation. In addition to the original sponsors' sites, recent months also saw a bunch of type foundry sites launch which use it, among others Adele Type Foundry, Lettersoup, my own Underscore Type Foundry, and many more :heart:
  • I just saw @Neil Summerour express a similar question to the OP in this blog post - sorry for being late to the party (i've only just returned to TD). I'm unsure if Neil's website is still in Wordpress. https://positype.com/blog/finally/
  • This looks really great!
  • Filip ZajacFilip Zajac Posts: 16
    @Johannes Neumeier Now I see your answer here! Great to see that something is done already, maybe we can put forces together, or at least contribute.

  • @Filip Zajac Sure, my Wordpress plugin is free to use and I welcome contributions of code and feedback. The front end of it is a customized version of @Lasse Fister's specimenTools, so if Wordpress is not your platform, starting with that might save you a lot of work on the type tester and specimen parts you mentioned in the other thread. Also someone alerted me to the existence of the Typolog Wordpress plugin for WooCommerce, which seems to solve quite a few of the common foundry shop problems, but again depends on the Wordpress platform (I have only briefly tested it, but it appears well thought out and is in use in some foundry sites from what I know).
Sign In or Register to comment.