Widon’t

Widon’t 2 is now available

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.

An example of a typesetting widow

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.

Previous
Making a Wordpress Plugin Video Tutorial
Next
An Ode to Widon’t
Author
Shaun Inman
Posted
August 22nd, 2006 at 4:25 pm
Categories
Design
PHP
Web
Wordpress
Widon't
Comments
029 (Now closed)

029 Comments

001

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.

Author
David Appleyard
Posted
Aug 22nd, 2006 12:33 pm
002

If you’re interested, you can cut down the code a bit if you use strrpos() instead of the rtrim() and strpos() combo.

Author
James Asher
Posted
Aug 22nd, 2006 1:16 pm
003

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.

Author
Sam Brown
Posted
Aug 22nd, 2006 1:19 pm
004

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.

Author
Mat
Posted
Aug 22nd, 2006 1:19 pm
005

James, it is using strrpos(). Without the rtrim() this:

"Headline with Potential for Widows "

would become:

"Headline with Potential for Widows "

instead of the intended:

"Headline with Potential for Widows"
Author
Shaun Inman
Posted
Aug 22nd, 2006 1:46 pm
006

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

Author
Brian Hayes
Posted
Aug 22nd, 2006 7:41 pm
007

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.

Author
Matt Thomas
Posted
Aug 22nd, 2006 8:57 pm
008

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.

Author
adriand
Posted
Aug 22nd, 2006 10:45 pm
009

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?

Author
JBagley
Posted
Aug 22nd, 2006 11:57 pm
010

Couldn’t you achieve a similar affect with CSS? Something like: h1, h2, h3, h4, h5, h6{ white-space: nowrap; }

Author
Chris Garrett
Posted
Aug 23rd, 2006 12:07 am
011

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.

Author
Julian Stahnke
Posted
Aug 23rd, 2006 12:36 am
012

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

Author
James Asher
Posted
Aug 23rd, 2006 4:35 am
013

JBagley, I added an animated example of a widow, with and without Widon’t. That should clear things up.

Author
Shaun Inman
Posted
Aug 23rd, 2006 7:46 am
014

Nicely done. I’m using it on my personal site right now.

Author
Colin D. Devroe
Posted
Aug 23rd, 2006 8:14 am
015

Oooh just lovely. Implemented on my site as well. Thanks Shuan!

Author
Alex Moyler
Posted
Aug 24th, 2006 7:52 am
016

Didn’t know befor that this is called widow. But this plugin is good, I’ll use it too.

Author
Sascha
Posted
Aug 24th, 2006 7:55 am
017

Excellent. Hopefully someone will port it over to Textpattern soon.

Author
Egor
Posted
Aug 25th, 2006 9:28 am
018

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.

Author
Shaun Inman
Posted
Aug 25th, 2006 10:08 am
019

Thanks for this Shaun. Going to install on my site later this weekend. I came up with this very problem earlier in the week.

Author
Scott
Posted
Aug 25th, 2006 5:04 pm
020

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.

Author
Eric Eggert
Posted
Aug 26th, 2006 9:07 am
021

Right on. Thanks Eric! I’m updating the post right now.

Author
Shaun Inman
Posted
Aug 26th, 2006 10:57 am
022

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!

Author
Dave Cardwell
Posted
Aug 26th, 2006 3:31 pm
023

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.

Author
Matthew
Posted
Aug 27th, 2006 8:47 am
024

Despite I’m not using any animation in my website; this cutie may make me change my mind about that!

Author
Mag
Posted
Aug 29th, 2006 3:06 am
025

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.

Author
Beckley Roberts
Posted
Aug 29th, 2006 6:49 am
026

I took the liberty of porting this plugin to Expression Engine.

Author
Low
Posted
Aug 29th, 2006 6:58 am
027

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.

Author
Shaun Inman
Posted
Aug 29th, 2006 7:55 am
028

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?

Author
Dave Cardwell
Posted
Aug 29th, 2006 12:02 pm
029

Certainly not. I blame copy/paste, sorry. :)

Author
Shaun Inman
Posted
Aug 29th, 2006 12:16 pm