I Love Typography

Being Kind to Widows and Orphans

Typogrify Plugin

No, this is not one of those charity posts. It’s all about my favourite plugin. Imagine a plugin that could improve the typography of your page with no complicated setup. Controlling type online can at times be difficult. However, things have just gotten a whole lot easier with the release of the Typogrify plugin. Originally released by Christian Metts for Django, it uses among other things John Gruber’s Smartypants engine (that converts straight quotes to curly quotes, double hyphens to em dashes [—], etc.).

Shaun Inman developed the widont plugin for WordPress. Hamish of hamstu.com, decided to go the whole hog and port Typogrify to PHP, making a WordPress plugin out of it. I would have reviewed it sooner, but I wanted to be sure that it did what it says on the “box”. I’m pleased to say that it works like a charm, and I would recommend it anyone and everyone.

Typogrify WordPress Plugin by Hamish

I won’t go into the details of how it works, but basically this is what it does:

  • Fixes widow: basically puts a non-breaking space [ ] between the last two words of a paragraph, thus in effect gluing them together and forcing them onto the next line;
  • Sorts out quotes, so that you’re never left with curly quotes that point the wrong way;
  • Turns ellipses into entities. So those three dots (…) become a real ellipsis […];
  • Wraps ampersands (&) in class = ‘amp’. Why? So that you can easily style them;
  • Wrap multiple adjacent capital letters (all cap’s) in class = ‘caps’;
  • Make those who use it more attractive to the opposite sex; Hamish is still working on this beta feature request.

orphan example

And if you don’t think typographic orphans are serious enough to worry about, then think about the kids! The child on the left is looking at a paragraph with no orphans; the child on the right has just seen a widow.

effects-of-widows.jpg

Something I’d really like to see for the future of this plugin, is more multilingual support. Every language has some of its own unique typographic conventions; and what’s considered “correct” in German or French, isn’t so in English.

I like the features panel and, in particular, the ability to surround em dashes with a thin space. It’s a great idea to have as an option, as this is a subjective stylistic choice.

And finally, you don’t even need WordPress to use it. Download the plugin and check the readme file for instructions on how to use outside of WordPress.

Let me know how you get on with it. A big thank you to Hamish for all the work he’s put into this. Porting a plugin is about more than simply re-writing code in another language. He’s done a great job.

If you can think of additional features you’d like to see, why not leave a comment here or on the original post.


Tags:           

  1. Cool! I always wondered how you managed the smart-quotes and em-dashes.

  2. Alec
    Yes, it’s a great plugin. And for all the work it does, I haven’t noticed any slowdown whatsoever. And, of course, if you’re using caching, then the plugin is only having to run through the text once. The plugin also does its magic on comments, so even commentators benefit :)

  3. “Make those who use it more attractive to the opposite sex; Hamish is still working on this beta feature request.”

    Ah, yes. Still perfecting the algorithms on that one.
    Shouldn’t be much longer. :)

    Thanks for the glowing review, John!

  4. dk

    Very nice plug-in! Thanks for pointing this out, Johno! Thanks for your work, Hamish! I’m completing a website based on WordPress and hope that my problem could be solved by that one. Otherwise I must take a deeper look into that plug-in stuff (or shower your blogs in more ruthless criticism.)

    Of course, I agree about the support of other languages. Furthermore I’m not sure about the thin spaces. As far as I’m informed on the em-dash subject: no spaces or hair spaces. And an en-dash should be surrounded by two standard spaces, right?!

  5. There goes one to illustrate;-) It is good that you just posted the article because I probably wouldn’t have come round to doing it anyway, knowing my inner procrastinator. Sorry about that!

    One thing that I would like to know is whether the difference between widows and orphans is pure style only. As far as I know widows are at the end of a paragraph while orphans are at the beginning (e.g.: At the beginning of a page when a paragraph flows over the break.)
    I used to remember this by the fact that widows have a past but no future, while orphans have a future but no past.
    However, you declared my widow an orphan, which slightly messes up my definitions…

    I will have a look whether I can port the Typogrify plugin for Expression Engine if someone hasn’t already done so…

  6. Being the wordpress fanboy as i am, i should have introduced this plugin to you, but i never stumbled over it (kinda like killing widows and adding ldquo’s & rdquo’s by hand).

    Thanks John!

  7. dk
    Different style guides give different rules about whether or not one should pad em dashes. In print, my preference is a nice long em dash padded with thin spaces.

    However, Mr Bringhurst doesn’t agree, suggesting instead,

    The em dash is the nineteenth-century standard, still prescribed in many editorial style books, but the em dash is too long for use with the best text faces. Like the oversized space between sentences, it belongs to the padded and corseted aesthetic of Victorian typography.
    The Elements of Typographic Style. 3rd ed., page 80.

    Squawk
    You’re right when you talk about future and past as a way of remembering which is which; I’m off to bed now, but I’ll try to post some more examples—much easier with an image.

    And, although widow is used to describe the final line of a paragraph that falls at the top the following page, it can also be used to describe a short (often single-) word that is stranded on the final line of any paragraph—so that widow has a past—within her paragraph—but no future.

  8. Emil Björklund

    Just to clear things up: Jeff Croft didn’t create/release Typogrify, he wrote a nice blog entry about it (the one linked to from the article) in which he clearly states that Christian Metts created the Typogrify library.

    The project home for the initial python library is located at Google Code by the way.

  9. @dk
    Thanks! I hope it works out for you.

    As for the spaces around en/em dashes, it was a special request, and I guess it’s really a matter of personal preference. (I don’t know of any official rules, but I’m no typography guru)

    If you’re interested, there’s a note about it on this page. It’s farther down, just after the second phone numbers image.

  10. Typogrify has been ported for Textpattern:
    Typogrify for Textpattern

  11. Yes! Thanks for sharing this!

  12. Ruby port here: http://code.google.com/p/typography-helper/

    Manuel
    You mean “manuely fixing them”? ;)

    Emil
    Thanks for the clarification!

    Michael
    Thanks for the Textpattern link.

    Ricky
    You’re most welcome. Loveyy looking web site you have.

    Hamish
    There are rules, but numerous conflicting rules. In that case, it’s best to go with the style that suits your personal aesthetic. That’s why it’s great that you have it as an option.

  13. Wow, I JUST posted about that trick of adding a   to the end of paragraphs to avoid widows. But this plugin is friggin’ brilliant! It does that and way more.

  14. Good stuff! I’m gonna have to check this one out. Its pretty amazing how far web typography has come. :) I remember cringing at horrible yahoo geocities websites that was just all bad.

  15. Hamish: Excellent! Thanks for doing the work. Working in print, I always make an effort to use curly quotes in blog entries and comments. The typesetter in me doesn’t go for any added space around em- or en-dashes, however.

    One other thing. While it’s easy enough to figure out, the ReadMe file said to put the file named “php-typogrify.php” into the plugins folder within the wp-content folder, when—of course—it’s the “wp-typogrify.php” file needs copying.

    And, John, thanks for the heads-up. As always, you’ve a fount of info here.

  16. I like the approach even though I think that adding extra markup – as opposed to extra characters like the no-break-spaces – might be a little bit much. When it comes to abbreviations, for example, there is the possibility to just style “abbr” elements (requiring an alternative, rather generic class for abbreviations without capitals), while in other cases there might just be no elegant solution.

    Anyways, will check out Typogrify since I currently accept some unhappy orphans and widows but don’t really like them ;)

  17. Hi Johno,

    I noticed you mention this plugin before (not sure where, perhaps on another blog), and I knew I had to give it a shot.

    There was some reason why I deactivated it though. I can’t remember why off the top of my head, but it messed something up with my posts. I’ll have to give it another shot so I can report on it.

    The plugin’s a fantastic idea, no doubt.

  18. Ah! Wonderful!! I’ve heard of the SmartyPants plugin but for some reason I thought it was only for the Moveable Type platform. So Typogrify is from Hamish? Thank you Hamish!! How cool! I’m going to install this when I get home.

    So I won’t have curly quotes pointing the wrong way, but what about apostrophes? I wouldn’t want to offend those crazy apostrophe nazis!

    John, that little discussion you had with dk about the spaces around em and en dashes, that’s what I’m talking about for the wiki. I simply can’t remember those things and I think it would be great to have that info in the iLT wiki, presenting all the different arguments, noting which are most common in certain scenarios and languages, etc.

  19. Wow! That could save me a lot of time. I’ve been manually coding my quotes and em dashes and I often don’t catch them all or remember to go through and change them. Thanks for mentioning it.

  20. This is a great plugin indeed. I’m off to setting it up on my blog as well. You always find some useful and interesting tools for us, John. Thank you.

  21. Oh this is just glorious! I’m not a WP user, but if it’s possible to port this to use in other scenarios as is stated - wow. Can’t wait to do a little digging into the code to figure this out.

    (love the blog by the way : )

  22. I really don’t understand why people continue to insist that proper quotation marks, dashes, and pretty much any character outside the repertoire of old US-ASCII needs magic treatment or some kind of plugin or a huge effort in looking up some kind of character code. Are all these people Windows users? Because I just type the characters.

    Additionally, the idea of a widow-preventing plug-in is a non-starter online given that type size and layout are up to the reader and are merely suggested by the author’s CSS.

  23. Emil Björklund

    Joe Clark: What part of automatically fixing the markup to be able to control it via css interferes with the fact that the stylesheet can be overridden by the user? And how does the size of the text change the fact that a non-breaking space between the last two words in a paragraph helps with widows?

    And how do you “just type” these characters (proper quotes, em-dashes etc) into, for example, a textarea in a web form (regardless of OS)?

    Either I’m not getting you at all, or you’re way off on this one.

  24. Trying–what Joe Clark semi-suggested–now …
    ——
    ––––

    … … …
    … … …

    – is Alt 2
    … is Alt period

    Edit: Looks ok in Safari 3.0.4/Mac & Firefox 2.0.0.8/Win.

  25. Editing the comments too often fucks them up :)

    - minus via keyboard
    – en-dash via keyboard
    — em-dash via keyboard

  26. Emil Björklund

    Manuel Martensen: Yeah, I know that you are able to produce these characters on a keyboard (at least on a Mac, don’t know about Windows) but I’m one of those lazy bastards who don’t utilize that when I type something on the web. :-) I suppose I could have been clearer on that – I meant that depending on OS or input device, these characters may be easier or harder (if not impossible) to produce.

    Regardless of that, even if a few people do use these keyboard shortcuts my guess is that the majority of people don’t, and don’t know that they can, so they just type like they would do in Word or whatever. (Not to mention user generated content where the user doesn’t care about typography.) So I still think that a filter that corrects that is a pretty sweet idea.

  27. Well, i think that the majority just doesn’t care, or have no idea that it could be done better. Most of them have no idea that “this” looks wrong, or that this—who learned about different dashes in school, me not—is how you “do it”.

    I tend to edit guest comments on my site as well (if i stuble over such “skidmarks”) but should i really care? Should we really care how people write their comments? I don’t know.

    My english is not perfect either, i have no idea if my comment is really proper english.

  28. How does this plug-in handle using ” for inches or other similar cases of punctuation which do not need to be corrected?

  29. @Dan : I was wondering the same thing. InDesign does something similar, and it drives me crazy when I have to go into my preferences and un-check “typographer’s quotes”.

    My guess is you just live with curly inch marks. The benefits probably outweigh the downfalls…unless you are creating a site for a math league of course :)

  30. Hotmetal

    In response to Dan & Red Ketchup, I also wonder how you get foot and inch marks when you want them with this plug-in. As an old school typesetter from the early days of Quark, I have become so used to manually inserting ‘curly quotes’ that I always leave the ‘typographer’s quotes’ option off, preferring to type the keystroke to be sure, in case the printer’s Mac has typographer’s quotes turned off. That way, if I type a foot or inch mark, I actually get it and no smartarse bit of software ‘autocorrects’ me. Obviously I’m talking about print-based type not web though. I think it’s awesome that you can now even control the spaces either side of em dashes on the web! Poor typographic control was one of my biggest frustrations with web design—so I went back to ink and paper!

    For anyone who doesn’t know the curly quote keys: (Mac)
    “ = alt [
    ” = alt shift [
    ‘ = alt ]
    ’ alt shift ]

    In Windows it’s probably something like alt-8109 with all your fingers and toes on modifier keys!

  31. Wow, I JUST posted about that trick of adding a   to the end of paragraphs to avoid widows. But this plugin is friggin’ brilliant! It does that and way more.

  32. How does this plug-in handle using ” for inches or other similar cases of punctuation which do not need to be corrected?

previous post: Sunday type: shush, I’m kerning!

next post: At last! FF Meta Serif

November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts January Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts december Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts May Fonts April Fonts March 2011 Fonts February 2011 Fonts January 2011 Fonts December 2010 Fonts November 2010 Fonts October 2010 Fonts September 2010 Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February 2010 featured fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts