NOTE: Hello recent visitors! Please note that the current title images that you see here are the result of completely revamped version of the plugin that supports soft shadows among other things. Please visit this page for more information.
As you have probably noticed, I decided to waste even more of the precious Internet bandwidth on vanity by moving to auto-generated images for entry title text. I’ve always liked the look of those people who have done it — Matt is one — but never jumped on the bandwagon.
Now I find a rather easy-to-use WordPress plugin by Joel Bennett and figured “why not?” It really was just drop-in simple. However, my site is relatively narrow in design, and some of my longer titles didn’t fit. There was no word-wrap support for longer titles.
So I added it! I tell you, there’s a lot of power there with PHP. I found some examples that people had made for word-wrapping based on the bounding box of a rendered text, but none of them were “nice enough” for me. So I did it my way, with support for indenting subsequent lines and specifying the vertical space between lines.
How was this done?
Let’s see if my code handling is up for this. Here’s how I split the single text title into an array of lines that fit within the stated width:
function break_text_into_lines( $text )
{
global $font_file,$font_size,$left_padding;
global $max_width, $space_between_lines, $line_indent;
// the returned array of strings to be on separate lines.
$text_array = array();
// Figure out how big a space is. Yes, I'm being anal.
$bbox = imagettfbbox($font_size,0, $font_file, ' ');
$space_width = max($bbox[2],$bbox[4]) - min($bbox[0],
$bbox[6]);
// Split the array into word components.
$words = explode( ' ', $text );
$current_line = '';
$current_width = $left_padding;
foreach( $words as $word )
{
$bbox = imagettfbbox($font_size, 0, $font_file, $word );
$word_width = max($bbox[2],$bbox[4]) - min($bbox[0],
$bbox[6]);
// See if the current word will fit on the line.
if( $word_width + $current_width + $space_width >
$max_width )
{
// It won't. Check the border case where we have a
// friggin' huge first word. If so, it'll have to
// be rendered on the line regardless.
if( $current_line != '' )
{
$text_array[] = $current_line;
$current_width = $word_width + $left_padding +
$line_indent;
$current_line = $word;
}
else
{
$text_array[] = $word;
$current_width = $left_padding + $line_indent;
$current_line = '';
}
continue;
}
// Word fits, so append it.
if( $current_line != '' )
{
$current_line .= ' ';
}
$current_line .= $word;
$current_width += $word_width + $space_width;
}
if( $current_line != '' )
{
$text_array[] = $current_line;
}
return $text_array;
}I’m really happy with the results. The full plugin is available here. I told the author of the original plugin that he’s welcome to roll the changes into his plugin, so it may show up there in the future. For those who want my version, feel free to grab it.
ColdForged Says:November 12th, 2004 at 2:26 pm
As an aside, yay, my code handling finally works! Sorry, had to interject.
ColdForged Says:November 12th, 2004 at 12:33 pm
Point taken… I guess it would look enormous if you regularly shrink the fonts. Refresh and tell me what you think.
Old size:
New size:
It’s hard to design for people that text zoom anyway, really. And that is definitely a drawback to the creation of fixed-size headlines. But, I like the look too much to worry overly and I’m all about the fashion over content
.
Mike Says:November 12th, 2004 at 12:29 pm
It’s a little more pronounced on my system just because I have the font size reduced a little in my browsers, and because the title is an image it doesn’t reduce with the rest of the text. It’s not bad though (and in the default font size looks a little more normal). I’m just not a big fan of big titles.
Don’t get me wrong, though… the plugin and your mods to it are still kickass.
ColdForged Says:November 12th, 2004 at 10:49 am
Try this… if it looks like this:
That’s the way I intended. I wanted bigger titles to provide more separation and focus on individual posts. However, I’m all about opinions. Anyone else think they’re too big?
Cy Says:November 12th, 2004 at 10:42 am
Hmm, I’m seeing it on N7.1 for Mac and it shows up well. Look at you, gettin’ all fancy.
ColdForged Says:November 12th, 2004 at 9:09 am
Oy. If it’s not an IE or Firefox incompatability, it’s a Mac incompatability. Any way you can grab a screenshot for me?
Mike Says:November 12th, 2004 at 2:09 am
That’s a nice plugin. Not sure if I like it on your site though. Maybe it’s because I’m browsing from a Mac, but the titles now are huge compared to the rest of the text on your site unless I increase the text size significantly.
ColdForged Says:November 11th, 2004 at 9:47 pm
Excellent! Thanks for considering it.
That’s hilarious, I never thought of it that way… I’ve set up every editor I’ve ever used — starting with GNU Emacs back in ‘92, I think — with white on black text and wanted to emulate what I see every day in my CSS. The DOS connection never occurred to me
.
Joel "Jaykul" Bennett Says:November 11th, 2004 at 9:14 pm
Nice work, I think I will grab that
Hey, I like your code on black background, very DOS
ColdForged Says:November 11th, 2004 at 7:44 pm
And of course, my code handling isn’t quite up to it. Ah well, it’s getting ever so slightly closer each time.