Updates to Typesetter

A few weeks ago I was asked by type designer Stefan Hattenbach (@stefan_h) to collaborate on a custom font project he was doing for a client. What was needed was a work around for the lack of OpenType support in some browsers (the project itself is über-exciting and I’ll post more about it when it’s launched).

Typesetter.js was perfect as a starting solution and since Typesetter.js was started about three years ago this was the perfect time to take up development again.

If you are new to Typesetter.js please read the introduction to it here The future of web typography is in your hand – Smashingmagazine.com.

You can get the code over at GitHub.

So what’s new in Typesetter.js?

This time I have focused mostly on making a better find and replace of all-caps abbreviations, it was pretty poor in the previous version. I’ve also included a few minor typographic features as well. Here is the list of what’s been done:

Adding support for abbreviations like (itc), «itc», A–Z

Abbreviations wrapped or including ‘special’ characters was fixed in this version since it was completely absent earlier.

Fixed replacement of possessive ’s.

I’m not sure how common it is in English that abbreviated words are followed by a possessive «s» but since nasa’s New Horizons probe just passed Pluto I thought it was a nice feature to add. So now that pesky foot/minute mark gets replaced with a single curly quote-mark as it should.

Adding replacements for quotes using single quotation marks.

This was missing earlier.

Renaming variables.

More intuitive variable names in the settings section.

Added basic demo

I myself come from a design/ux background so my coding skills isn’t that good and I always like it when non-design tools/frameworks has a little demo showing what it does and doesn’t. Hence micro-demo added, even though it’s pretty lightweight.

Cleaned up the markup that is being outputted.

The big thing here is that numerals are now wrapped in the num-tag and nothing else. This is very useful when setting numerals as lowercase numerals in body text or lining numerals in tables.

Fixed a ton of typos in the comments.

Well, I’m Swedish so my English is far from flawless and spelling is even worse.

If screen typography is your thing I can surely need your help with Typesetter.js so please head over to the GitHub repo and make a pull request.

Further development

There is still a lot of stuff to improve and the main things in the future is:

• Get rid of jQuery.
• Get rid of the «trigger"-element and «typo"-classes that is used now to trigger replacements.
• Performance improvements.
• Improve the «find and wrap» numerals.
• Extend the settings section with better language handling.