Category Archives: Web Development

Fixing Cufón Problems

Missing Punctuation

I recently posted an article on extending functionality to the WordPress plugin ListYoFiles. I don’t usually post much about web design, but working on a website for a church unfortunately consumed my life for a while.

I should be more specific; the website specifically didn’t consume my life – my perfectionism did.

You see, for this website, I’m using a handy tool called cufón, which essentially replaces header text with a graphic of your text with the font of your choosing. Essentially, it allows you to use custom fonts for your headings, even if your users doesn’t have the font installed on their computers.

It’s really pretty nifty – it’s fast, it’s incredibly easy to set up, and you can upload and generate your own fonts. There are a number of other alternatives to cufón; I even used Google’s version of this throughout my site before I moved everything over to WordPress. But it was slower, and the text would load first and then change to the font, which resulted in a goofy text flicker. And, as reliable as Google is, I’d much prefer everything to be hosted on my own server. Admittedly, I’m probably going to change the appearance of my site long before Google decides to stop hosting the font I’m using. But if I can host everything myself, I tend to sleep better at night. (Same goes with site templates, images, …you name it).

Another advantage of cufón is the generated font files themselves. Try opening a standard OpenType or TrueType font file in a basic text editor and all you’ll see is gibberish. Cufón generated fonts are pretty readable. While I don’t recommend changing them, it’s pretty straightforward to do if you must (and I did – read below).

However, I noticed a major problem with one particular character: the apostrophe. For whatever reason, it seemed that none of the apostrophes in my headers were actually appearing at all.

Here’s where my aforementioned perfectionism becomes a problem: I’m simply not going to accept that my headings refuse to display apostrophes.

Even Google searches proved to be pretty worthless in my predicament. Oh sure, I found plenty of other people with similar problems, even with the apostrophe specifically. But the widely accepted solution was to re-generate the font file on the cufón website, making sure that punctuation and WordPress punctuation were included.

But that didn’t work with this font.

To make my problem even more confusing, I noticed that the apostrophe was working in the heading on the search results page, but not in the headings for the search results.

After hours of trial and error, I finally figured out what the problems were and was able to fix them. Here’s what I did.

First, by default, WordPress changes “straight” quotes into “smart” quotes. In case you’re unfamiliar with this feature, here’s a picture showing the difference:

What contributed to my confusion is the fact that WordPress is inconsistent in dealing with smart quotes; it applies them in most titles, but not in all titles, such as the “search results” title, for example (see image above). Unfortunately, the font I’m using for the titles is “Bebas” and doesn’t include any of the smart quote characters, so nothing would appear when WordPress tried to change them into smart quotes.

To fix this, open up a font editing program. I suggest Font Forge, as it is fairly easy to use, cross platform, and best of all, is free. It’s admittedly pretty finicky on the Mac, but it gets the job done, and I can’t complain much with the pricetag.

The characters we need to change are the unicode characters U+2018, U+2019, U+201C, and U+201D. How do I know this? I looked it up on Wikipedia.

A font can potentially contain thousands of characters. To get to a character quickly in Font Forge, click “Goto” from the View menu and type in “U+2018″ (without quotes). Font Forge will happily take you to the correct character. Pretty dandy, huh.

Here are the characters we need to adjust:

I’m not going to bother creating new glyphs for the “smart” quotes and apostrophes. Instead, I’m going to just copy the existing characters for the regular quotes and apostrophes, and paste them into these slots.

And this is easy. Scroll up to the top and select U+0027 (the single apostrophe). Click “Copy” from the Edit menu. Now, go back to U+2018 using the “Goto” feature in the View menu. To replace the character, it’s as easy as clicking “Paste” from the Edit menu. To replace all of these, make sure you replace U+2018 and U+2019 with U+0027, and U+201C and U+201D with U+0022.

Save the font using the “Generate Fonts” tool in the File menu and you’re done! (Almost.)

The last step is to go back to the cufón website and generate a cufón font with the edited font that you’ve just saved (and make sure punctuation and WordPress punctuation is included). The final step is to the cufón font on the website with the one we just generated. After that, the apostrophe should display properly!

Tweaking Cufón Fonts

Now that the arpostrophes are displaying as they should, I need to make a small tweak to the font. As I mentioned earlier, an advantage of cufón fonts is that the fonts are saved in a fairly readable format. I strongly suggest that you avoid editing these files unless you absolutely have to, but it’s pretty easy to do if you must.

In this case, I’m not happy with how words are spaced. Specifically, the space character between words is simply not wide enough.

The basic format for cufón fonts starts with basic header information, followed by information on each character. The basic format for each character is:

"[character]":{[data]},

Since it’s the space character I’m not happy with, I need to find the data for the space character. In this case, the code is:

" ":{"w":33},

In this case, all the data for the space character is setting a width of 33. I’m going to change 33 to 125 and save the file. With the increased space, the words look like this:

Much better, and much more readable!

Every aspect of each character can be edited this way. If you want all ampersand symbols to display as “E”, just search for the data specified for the “E” character, copy it, and replace the data for the “&” symbol with it.

I need to reiterate: I do not recommend editing the cufón font file unless you really need to. These are not complicated files per se, but it’s incredibly easy to accidentally make mistakes when editing. For more significant modifications, I strongly recommend using a font editor and regenerating the font.

Getting Rid of Flicker

Finally, I noticed that there was a “flicker” with the cufón headlines. That is, the text would load, and then the cufón would replace the text, creating a “flicker” effect. To get rid of this, simply add the following line to your CSS file:

.cufon-loading body { visibility: hidden }

This will hide all of the text to be converted by cufón until it’s ready, removing the “flickering”.

Conclusion

I have found cufón to be an fantastic script to add to a site. It’s fast, you can use any font, and it’s free. And, I should be totally fair: the script itself works incredibly well. Most of my problems have been with the fonts themselves. With just a little tweaking, it’s possible for your headings to look really nice with custom fonts using cufón.

As always, if you have any questions or comments, please feel free to contact me!

Extending Functionality to ListYoFiles

By and large, I’ve been incredibly impressed with WordPress. Ever since switching my site over from Blogger, I’ve consistently been amazed with the power of WordPress, and have really advocated its use as a content management system.

One of the great things about WordPress is its extensive (and growing) list of Plugins, and the open source nature of these Plugins. Most plugins are pretty easy to install and use, but with a little knowledge of PHP, it’s easy to dramatically customize a plugin to do specifically what you need it to do.

Lately, I’ve been busy working on a site for a church. The church needs an easy way to upload and list newsletter PDF files and sermon MP3 files. It’d be pretty easy to write a PHP script to list and create links to the files in a directory on the server, but I wanted to avoid that, and decided to look for something easier — something that the church users could do themselves through the WordPress interface.

The solution that I found was a plugin called ListYoFiles. It has great reviews and appeared to do exactly what I needed. In fact, I can even specify exactly what user level can upload files, what file types would be allowed, and the size of the file types.

Thanks to the open source of WordPress plugins, I decided to rebrand the plugin as “ListYourFiles” and make a few small changes to the interface that would make it a little more clear to the church users as to how to use the tool.

One of the things that I was disappointed with, however, was the limited amount of customization there was with the appearance of the listed files. The plugin, by default, inherits any CSS for tables you have in the site, but I wanted the list of files to have a different appearance than the other tables on the site. ListYoFiles does come with a feature to use a specific CSS file for the table, but it’s pretty limited. I was going to have to find another way to be more specific in my customization.

Even after searching around on the internet, I didn’t find much help, which is why I’m writing this post. I hope this will help someone else who wants to change how their ListYoFiles tables look. To do this, we’re going to change a couple of files, specifically the theme’s style.css and 88-files.php.

First, in the left sidebar in WordPress, under “Plugins”, click “Editor”. In the top right corner, select “List Yo Files” from the dropdown box and click the “Select”. This will list all of the files in the ListYoFiles plugin and allow you to edit them as necessary. Now, click on  88-files.php in the right sidebar if it isn’t already selected, to open the file for editing.

Before you make any changes, select and copy all of the text and paste it into a text file. Save the file on your computer as a backup, in case anything goes wrong and you need to restore the plugin!

Do a search to find the line:

$retVal .= '<table width="100%" border="0" cellpadding="7">'.PHP_EOL;

Essentially, the way this plugin works is it generates an HTML table, adding rows for each of the files in a given directory. This line adds the table header info to the return string. For us to use a CSS class, we’re going to change the line to read:

$retVal .= '<table class="listyofiles">'.PHP_EOL;

We’re going to get rid of the width, border, and cellpadding specifications, because we want to be able to customize this in our CSS file.

Now, save the file by clicking “Update File” at the bottom of the page, and let’s head to our CSS file to make more changes. On the left sidebar in WordPress, click “Editor” under the “Appearance” tab. Make sure “style.css” is selected from our list of files in the right sidebar. Backup the file by selecting and copying all the text and saving it to a file on your computer.

Add the following to your CSS file:

table.listyofiles
{
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 12px;
margin: 45px;
width: 480px;
text-align: left;
border-collapse: collapse;
}
table.listyofiles td
{
padding: 8px;
background: #e8edff;
border-bottom: 1px solid #fff;
color: #669;
border-top: 1px solid transparent;
}
table.listyofiles tr:hover td
{
background: #d0dafd;
color: #339;
}

This will give you a pretty generic table, complete with a highlighted effect when the mouse is over one of the items.

Change any of the options to customize your new table, and voila!

Getting Rid of the Time

I wanted the ListYoFiles table to show the date, but not the time. In order to do this, I changed the line in 88-files.php from:

$date = date( "n/j/Y g:i a", $item['date'] );

to

$date = date( "n/j/Y", $item['date'] );

Customizing The ListYoFiles Table Even More

Now, the other thing I wanted in my table was a header row. This is pretty easy to add. To do this, go back to your 88-files.php file in the WordPress plugin editor. Again, back it up, just in case!

Directly underneath the line we changed earlier, and above the “foreach” statement, add the following code:

$retVal .= '<thead><tr>'.PHP_EOL;
if ( $isIcon || $isFilesize || $isDate )
{
if ( $isIcon )
{
$retVal .= '<th scope="col">Type</th>'.PHP_EOL;
}
$retVal .= '<th scope="col">Name</th>'.PHP_EOL;
if ( $isFilesize )
{
$retVal .= '<th scope="col">Size</th>'.PHP_EOL;
}
if ( $isDate )
{
$retVal .= '<th scope="col">Date</th>'.PHP_EOL;
}
}
else
{
$retVal .= '<th scope="col">Name</th>'.PHP_EOL;
}
$retVal .= '</tr></thead>'.PHP_EOL;

This code should be pretty self explanatory, but I’ll explain it anyways. It starts out by adding the table header code. The If statement looks to determine whether or not the table should show the file icon, the file size, or the file date. (These things are specified in your post with the “options” code). If all of those things are not to be shown, a header is simply added with “Name” to show the file name.

Since the columns are added in the order: icon, name, size, date, and I know that the only one of those four that will always be there is the filename, the rest of the code above simply adds those column headers if those items are to be shown.

Now that we’ve added the table header, we can also add some CSS to customize what it looks like. Going back to our Style.css file, under the Appearance Editor in WordPress, add:

table.listyofiles th
{
font-size: 13px;
font-weight: normal;
padding: 8px;
background: #b9c9fe;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid #fff;
color: #039;
}

Conclusion

The ListYoFiles plugin is a powerful, but simple, way to allow your WordPress users to upload and list files, without needing to add or change code. The plugin itself is pretty limited in terms of visual customization, but can easily be expanded thanks to the plugin editor in WordPress. If you have questions, don’t hesitate to contact me!

Happy WordPress-ing!