Reuniting lonesome sIFR widows
After upgrading to sIFR 3 beta 2, I figured it was about time I fixed something that had been annoying me a lot lately: Title widows. What’s a widow? A widow is the unfortunate last word in a paragraph that drops down below and sticking out like a sore thumb. While it is a hassle to apply it to all blocks of type, my big dorky headings needed some love.
Shaun Innman’s widon’t plugin for WordPress works spectacularly. It adds a non breaking space ( ) between the last two words of a block of text, causing it to carry and couple with its predecessor; ultimately removing any widows. So after applying the plugin and testing, it turns out that Flash can’t parse a non breaking space character as html. Oh the anger! ‘Grrrr’ I said. Luckily Brian Reavis had a workaround solution to reunite my lonesome widows with a new partner:
Flash doesn’t treat non-breaking space characters ( ) like it should. To Flash, they’re just plain, normal spaces. If there’s not enough space for “Flash slaughters characters” to fit on one line, it’ll force “characters” onto its own line. What it /should/ do is place “slaughters characters” on a new line. This is where the widon’t plugin ends up failing.
With a little addition to the sIFR script though, we can get sIFR to play along with widon’t by placing a hard line break right before the two words that aren’t to be broken.
var flashText = node.innerHTML;
var afterBreakPos = flashText.lastIndexOf(’ ’);
if (afterBreakPos != -1){
var breakAt = flashText.substring(0, afterBreakPos).lastIndexOf(’ ‘);
if (breakAt != -1){
flashText = flashText.substring(0, breakAt) + ‘<br />’ + flashText.substring(breakAt + 1);
node.innerHTML = flashText.replace(/ /, ‘ ‘);
}
}
Insert this code right after the line below. You’ll find it inside the replace(…) function at about line 1132 if you have sifr3-r419.
if(!height || !width || !display || display == 'none') continue;
After this, upload sifr.js and be free of widows! If you don’t notice it working at first, make sure your internet browser’s cache is cleared.
..well, not quite! Now these widows are being selfish ladies, and sucking a partner down to the second line even if they can comfortably fit. Jerks! The solution? A modification to the replacement function of the widon’t plugin which requires a slight amount of modification. You will need to approximate the number of character glyphs that can fit across the baseline, and on line 17, replace the number appropriately:
if (strlen($strippedStr) > 18 && preg_match_all(’/[\s]+/’, $strippedStr, $spaces) > 1){
Now, if the number of characters exceeds the set value, it will break the last two words, emulating the same effect as a non breaking space! You may have to fiddle with the values to get this working properly, but it should work like a charm! (Thanks Brian!)
Download Modified sifr.js and widon’t plugin
Extra: Typogrify for WordPress post body styling
Give this some love and Digg it, add it to Del.icio.us or StumbleUpon this!
But, doesn’t this always force the last two words to be on a new line?
Also, sIFR has some method calls on the `sIFR.replace()` arguments which allow you to modify the content going in to the Flash movie, so you don’t even have to change the internal code! See `modifyContent` and `modifyContentString` under http://wiki.novemberborn.net/sifr3/Javascript+Methods
It only forces it after it hits the character count’s width. I’ll definitely have a talk to Brian about the method calls!
A little confused here…I thought Sifr wasn’t really meant for real content text replacement as that would take too many resources?
@Eric It’s to fix widowing in my sIFR headings which run on this site (though it’s definitely applicable to large body copy- and yes that would be heavy).
Lol, at first I read “No More Windows”
Thanks for sharing the information, I’ll use it at my new website using sIFR. I can also suggest using the typogrify plugin from Hamish. Good luck.