Widon’t
In what feels like sacrilege by typing this post in MovableType, I’m sharing a Wordpress plugin that I created for a recent collaboration. About a year ago Mike Davidson asked me if I could solve the widow problem for an (at the time) unreleased project he was working on.
For those who don’t know, in typesetting, a widow is a single word on a line by itself at the end of a paragraph and is considered bad style.
Unfortunately, you don’t have a lot of control over that when setting type on the web (I don’t stray too far when picking topics to write about, do I?) and most people never even notice when it occurs in body copy. But when you’re dealing with a short headline, common on blogs and news sites, the errant word can be quite ugly.
The solution is to insert a non-breaking space between the last two words of your headline. Here’s a simple PHP function that does just that:
function widont($str = '')
{
$str = rtrim($str);
$space = strrpos($str, ' ');
if ($space !== false)
{
$str = substr($str, 0, $space).'�'.substr($str, $space + 1);
}
return $str;
}
I could have used an anchored regular expression but decided against it for performance reasons.
Download the Widon’t Wordpress plugin, unzip and upload si-widont.php to /wp-content/plugins/. Then activate the plugin from within Wordpress.
If you are a Wordpress user who cares about typographic nuances like widows you might also like (and maybe already use) Michel Fortin’s PHP ports of John Gruber’s Markdown and SmartyPants.
Updates
Brook Elgie has ported my Widon’t Wordpress plugin to Movable Type. A Textpattern plugin is still up for grabs.
And Eric Eggert has done the unenviable task of porting Widon’t to Textpattern (the first half of his post is in German, scroll for English). You guys both rock!
Still More Updates
A Widon’t plugin is now available for Expression Engine courtesy of Low and for jQuery courtesy of Dave Cardwell.
The Wordpress version of Widon't has been downloaded 1740 times.
029 Comments
Great stuff - Whilst it isn’t a problem which gets me all riled up, it will be nice not to worry about this any more. Cheers.
If you’re interested, you can cut down the code a bit if you use strrpos() instead of the rtrim() and strpos() combo.
Smashing! Except I don’t use WordPress. However, the solution is clever and I’ll be sure to use it in the future. Thanks for sharing Shaun.
Thanks, I never really bothered with this at all, but if you have a fix for it then I will definetly use it. Though I don’t use WordPress that much, it can easily be ported to work with other platforms.
James, it is using
strrpos(). Without thertrim()this:would become:
instead of the intended:
Widon’t
Type is old.
Typesetting less.
Widow a modern tweak.
And now widon’t.
Widon’t.
A wailing baby boomer’s lament?
Widon’t.
A term of the designer’s craft.
I hope we recognize this tiny and wonderful moment when words become terms and I hope widon’t becomes permanent!
Bravo!!
Brilliant, buddy. I’m just jealous I don’t have it on TXP. Kudos for restoring
�to its rightful place as a legitimate typographic character, no longer left for dead as a poor man’s spacing tool.Hey, nice idea! Thanks for sharing it. Hopefully this will be implemented in CSS one day so that it could be applied to hx tags by the browser automatically.
After reading this post over at least 5 times, I’m still struggling to understand what or how a widow looks like!?
An example anywhere I could muse over?
Couldn’t you achieve a similar affect with CSS? Something like:
h1, h2, h3, h4, h5, h6{ white-space: nowrap; }No, that’ll do it for the whole headline—we just want the last two words stick together. A CSS property would be really nice.
Dang, I swear I looked at your code a good 10 times. Despite that, I ‘saw’ that you were doing a strrev() and then doing strpos() to get the first space. I must have really been ready to go home from work. :-)
JBagley, I added an animated example of a widow, with and without Widon’t. That should clear things up.
Nicely done. I’m using it on my personal site right now.
Oooh just lovely. Implemented on my site as well. Thanks Shuan!
Didn’t know befor that this is called widow. But this plugin is good, I’ll use it too.
Excellent. Hopefully someone will port it over to Textpattern soon.
I was going to take a stab at it but TXP plugins look unnecessarily complicated. Compiling PHP with the command line? No way to filter existing tags? And plugins come pre-compiled so there’s no simple way to learn by example.
It took me longer to learn that I want absolutely nothing to do with TXP plugins than it took to learn, create and release the Widon’t Wordpress plugin.
I think I’ll let a seasoned pro handle this.
Thanks for this Shaun. Going to install on my site later this weekend. I came up with this very problem earlier in the week.
I’ve just created the textpattern plugin. Just replace the standard txp:title tag with the custom txp:egg_widont tag. Thats all. You can download the encoded plugin at: http://yatil.de/file_download/6
A blog entry will soon be published.
Right on. Thanks Eric! I’m updating the post right now.
Hello, Shaun. With so much content generated or at least fetched by JavaScript nowadays I have created a plugin, jQWidon’t, for the jQuery library.
Thanks for the inspiration!
This is a simple issue from my point of view, but super cool how you fixed it. Also thanks to the updates I can now add this to a good portion of the blogging software my clients use.
Despite I’m not using any animation in my website; this cutie may make me change my mind about that!
Weird. Ironically, Shaun, Widon’t doesn’t work with sIFR on my Wordpress site. The nbsp collapses and glues the last 2 words of every headline together.
I took the liberty of porting this plugin to Expression Engine.
That’s what the I in sIFR stands for Beckley, ironic. I don’t have anything to do with sIFR at this point. I’m sure it can be made to work though because it’s working in my custom version of IFR on this site.
Nice Low. I’ll update the post to include this and the jQuery versions.
Ah excellent, thank you very much for the link. Would it sound ungrateful of me to point out that there are two ‘l’s in Cardwell?
Certainly not. I blame copy/paste, sorry. :)