Add Non-Breaking Space on Title to Prevent Widows
$("h2").each(function() {
var wordArray = $(this).text().split(" ");
var finalTitle = "";
for (i=0;i<=wordArray.length-1;i++) {
finalTitle += wordArray[i];
if (i == (wordArray.length-2)) {
finalTitle += " ";
} else {
finalTitle += " ";
}
}
$(this).html(finalTitle);
});Turns this:
New Screencast: First Ten Minutes with TypeKit
Into this:
New Screencast: First Ten Minutes with TypeKit
You can actually do that without the inner loop like this:
$("*").each(function(){
var content,widow;
content = $(this).text().split(" ");
widow = " "+content.pop();
$(this).html(content.join(" ")+widow);
});
whats the point??
James, in print typography (magazines, books, etc) it’s considered bad style to have a single word by itself on the last line of a paragraph, especially across columns, and single lines across pages. On the web it’s only started to be addressed with css.
http://reference.sitepoint.com/css/orphans
if you have an <a> inside of an <h2> you should change the .text() function with the .html() funtion for take the right wordarray.
var wordArray = $(this).html().split(” “);
It’s not really stable but works!
white-space:nowrap
this topic is very interesting especially if applied to the new fluid layout trend
I made a jQuery plugin to simplify this. Plus it gives you the ability to only fix words of a certain number of letters (i.e. not fixing long words that look OK on their own) & a few other options.
http://matthewlein.com/widowfix/
I agree with Milovan the {white-space:nowrap} do that job
That makes it so the title doesn’t wrap at all though. It’s not that the title shouldn’t wrap, but we want to make sure the wrap doesn’t happen between the last two words.
I just use a & nbsp; (non-breaking space) in titles. That way I can control where it’s going to break.
No, {white-space:nowrap} doesn’t do this job.
If you have 3 full lines of text plus an orphan word, the nowrap property move all the text in one very loooong line.
Another approach:
No, {white-space:nowrap} doesn’t do this job.
If you have 3 full lines of text plus an orphan word, the nowrap property move all the text in one very loooong line.