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.

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.

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.
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.







42 comments * comment * trackback
Alec
Cool! I always wondered how you managed the smart-quotes and em-dashes.
Nov 13, 2007
johno (iLT)
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 :)
Nov 13, 2007
Hamish M
Ah, yes. Still perfecting the algorithms on that one.
Shouldn’t be much longer. :)
Thanks for the glowing review, John!
Nov 13, 2007
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?!
Nov 13, 2007
Squawk
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…
Nov 13, 2007
Manuel Martensen
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!
Nov 13, 2007
johno (iLT)
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,
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.
Nov 13, 2007
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.
Nov 13, 2007
Hamish M
@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.
Nov 13, 2007
Michael Montgomery
Typogrify has been ported for Textpattern:
Typogrify for Textpattern
Nov 13, 2007
Ricky Irvine
Yes! Thanks for sharing this!
Nov 13, 2007
johno (iLT)
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.
Nov 13, 2007
Chris Coyier
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.
Nov 13, 2007
Robert
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.
Nov 14, 2007
Stephen Tiano
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.
Nov 14, 2007
Jens Meiert
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 ;)
Nov 14, 2007
David Airey
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.
Nov 14, 2007
LaurenMarie - Creative Curio
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.
Nov 14, 2007
Karly
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.
Nov 14, 2007
inspirationbit
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.
Nov 16, 2007
Matt
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 : )
Nov 17, 2007
Joe Clark
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.
Nov 24, 2007
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.
Nov 25, 2007
Manuel Martensen
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.
Nov 25, 2007
Manuel Martensen
Editing the comments too often fucks them up :)
- minus via keyboard
– en-dash via keyboard
— em-dash via keyboard
Nov 25, 2007
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.
Nov 25, 2007
Manuel Martensen
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.
Nov 25, 2007
Dan
How does this plug-in handle using ” for inches or other similar cases of punctuation which do not need to be corrected?
Nov 26, 2007
Red Ketchup
@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 :)
Nov 26, 2007
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!
Jan 11, 2008
kız oyunları
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.
Apr 8, 2008
minikperi
How does this plug-in handle using ” for inches or other similar cases of punctuation which do not need to be corrected?
May 7, 2008