wp-typogrify

Just a couple days ago, Jeff Croft announced ‘typogrify’ on his blog. ‘typogrify’ is a python script, designed by Christian Metts for use in the Django framework.

I think Christian describes it best himself:

Typogrify is a collection of Django template filters that help prettify your web typography by preventing ugly quotes and widows and providing CSS hooks to style some special cases.

Of course, I won’t bore you with the details. You can read more about it on Jeff’s announcement post (and be sure to check out the tasty example page)

Typogrify for PHP (and WordPress)

So when I heard about typogrify, I immediately thought what a great addition it would be to WordPress. And so I went ahead and ported the code to PHP, creating a WordPress plugin at the same time. And without further ado, here it is:

wp-typogrify

Download wp-typogrify (Now hosted on wp-extend)

Note: This plugin is compatible with WordPress 2.04 and up.

Stay Updated

Be sure to subscribe to my RSS feed to stay updated on this plugin.

56 Comments

  1. Posted June 4, 2007 at 4:18 pm | Permalink

    Many thanks for the conversion of this plugin to the Wordpress platform. I heard about the phython script a few days back and was wondering when someone is going to port it.

  2. Posted June 6, 2007 at 11:54 am | Permalink

    Thanks for this. I was about to write this port myself.

    I’m looking forward to testing it out on some of my Wordpress installs.

  3. Posted June 6, 2007 at 12:02 pm | Permalink

    Thanks everyone.

    @Sergei: Let me know how it goes :)

  4. Posted June 7, 2007 at 6:42 am | Permalink

    Will do.

  5. Posted June 10, 2007 at 5:32 am | Permalink

    Great work, Hamish. I’ll see how this goes.

  6. Posted June 12, 2007 at 12:24 am | Permalink

    Great work first of all.

    Secondly, I believe I found a bug. When the plugin adds spans for all-caps and other characters, it does so to all of the title, including the title attribute of the post’s link.

    To explain that better, on my blog I have the title surrounded by a link (a). On that link I have a title attribute that repeats the title of the post ; for instance, my title attribute might generate “Permalink for This Post” in which This Post is the name of the post.

    The bug comes when a span is inserted into the title attribute. Understand?

  7. Posted June 16, 2007 at 12:15 am | Permalink

    Ah, thanks for pointing that out Mark.

    I think a possible fix would be to use PHP’s strip_tags(); function on the title for those cases. But I would certainly like to come up with something more elegant.

  8. James
    Posted August 22, 2007 at 5:59 am | Permalink

    This looks good, one question though - does it deal with blogs that already have the PHP smartypants module installed? Thanks!

  9. Posted September 6, 2007 at 10:12 am | Permalink

    Hey James.

    At this point, no, since it needs a special modified version of smartypants (which is included). So you should disable smartypants if you have it installed.

    Sorry for the late reply.

  10. Posted September 10, 2007 at 10:08 am | Permalink

    great that you’ve ported it to php. Great job. I’m now off to try it out. Would be interesting to see if we could get some “ligature” support in there!

  11. Posted September 10, 2007 at 5:42 pm | Permalink

    Thanks johno!
    And that’s actually a really cool idea, I’m going to consider it for sure. :)

  12. Posted October 7, 2007 at 8:03 am | Permalink

    I could cry. Thanks so much for this.

  13. Posted October 7, 2007 at 10:04 am | Permalink

    I’ve installed it and it appears to be working perfectly. All those widows have magically disappeared. Thank you.
    Just one thing: the plugin is having no effect in my comments (on iLT). Any ideas?

  14. Posted October 7, 2007 at 2:54 pm | Permalink

    Please ignore my previous comment. It’s working perfectly (unlike my eyes).

  15. Posted October 9, 2007 at 2:36 pm | Permalink

    I’m glad it’s working for you, johno!

  16. Posted October 9, 2007 at 2:46 pm | Permalink

    I’m so impressed with it, that I’ll be writing about it on iLT. Thanks again for porting this to PHP.

  17. Posted October 14, 2007 at 6:18 pm | Permalink

    Just put the new version out! This should fix your problems with widows Johno. Let me know.

  18. Posted October 14, 2007 at 7:33 pm | Permalink

    Thanks, Hamish.
    It doesn’t fix the example I showed you. IS it possible to “typogify” within a link?

  19. Posted October 14, 2007 at 7:43 pm | Permalink

    Yes, it is possible to typogrify a link, and it seemed to be working in my tests. My only guess is that the page in question has been cached. (wp-cache maybe?) — and so the change hasn’t been reflected. What if you try editing it somehow, and refreshing the page?

  20. Posted October 14, 2007 at 8:43 pm | Permalink

    Hamish
    Yes, I use wp-cache, but had cleared it before checking. I edited the post and saved, but I’m still seeing that widow. I’ve found another too — in the Chocolate post, where it says, “Clever isn’t it”. Strange.

  21. Posted October 14, 2007 at 9:34 pm | Permalink

    Alright, I think I’ve fixed it this time. If not, well, I’ll eat my hat. Let me know how it goes :)

  22. Posted October 14, 2007 at 9:46 pm | Permalink

    You are a star. Works perfectly. Really appreciate you taking a look and fixing. Great plugin. I can now review it on iLT.

    I’m really looking forward to seeing your version of the Fontometer. I can’t wait!

  23. Posted October 14, 2007 at 10:16 pm | Permalink

    No problem, John. Thanks for using it!

  24. Posted October 15, 2007 at 9:45 am | Permalink

    Another update, v1.3.
    Hopefully this will be the last bugfix update.
    (See the readme for more changelog)

  25. Vladimir
    Posted October 19, 2007 at 3:59 pm | Permalink

    Thank you very much for this!
    I’m using drupal Typogrify module.
    I would like to ask about hanging marks, is it possible to wrap also other symbols, such as ‘«’ (in Russia we use those). I’m adding to initial_quotes function this string: (("|“|&\#8220;|«|«|&\#0171;)|(‘|‘|&\#8216;))
    However it has no effect (nothing changes). I don’t use caching, and I’m not a programmer :)

  26. Posted October 20, 2007 at 9:49 pm | Permalink

    Updated to v1.4
    See the updated post for more info.

  27. Posted October 20, 2007 at 10:06 pm | Permalink

    I’m hoping that I’m the first person in the world to install 1.4.

    So far looks great. Love the em-dash thinspace option; in fact, I like the options. You’re going to start getting users from non-Latin alphabets asking for features too. That would be interesting.

    Thanks for a great plugin!

  28. Posted October 21, 2007 at 7:20 am | Permalink

    Great work. Thanks. I was searching for such information.

  29. Posted October 21, 2007 at 12:38 pm | Permalink

    I’ve spent some time trying to break it, but it’s holding up.

  30. Posted October 21, 2007 at 1:11 pm | Permalink

    John
    Glad to hear it! I really appreciate your testing a lot.

    Sally
    Thanks! I’m glad you like it.

  31. Vladimir
    Posted October 23, 2007 at 3:56 pm | Permalink

    I would like to say its awesome!
    But I didn’t manage to make it work for me in drupal (hanging marks), even though I set guillemet = true.
    I guess its drupal problem.
    So, thank you very much!

  32. Posted November 13, 2007 at 4:53 pm | Permalink

    Red hot and totally awesome! Thanks!

  33. Posted November 13, 2007 at 6:08 pm | Permalink

    A great idea. Thanks. I just installed it on my WordPress blog and under options had the following message:

    Fatal error: Call to undefined function wp_nonce_field() in davosnewbies.com/wp-content/plugins/php-typogrify/wp-typogrify.php on line 58

    Have you encountered this before?

  34. Posted November 14, 2007 at 4:20 pm | Permalink

    I found one issue: if the span class=caps option is enabled, there’s one situation I’ve found so far that’s broken:

    If a post has an acronym in the title of it (such as my Leopard GM post: http://blog.christopherbowns.com/2007/10/25/leopard-gm-released-early-to-journalists-not-developers/), wp-typogrify inserts the span in the Permalink’s title attribute, and since you can’t “nest” double-quotes, this does quite a number on the page’s content, shifting the remainder of the title attribute into the link’s text. I’ll leave span caps enabled so you can see what the HTML looks like.

    In addition, I have Markdown with SmartyPants installed on the blog, but upon enabling, I had no SmartyPants-styled quotes until I enabled it in the options panel.

  35. Posted November 14, 2007 at 5:20 pm | Permalink

    @Lance
    I’m going to look into this ASAP.

    @Christopher
    I’ve got a fairly simple fix for this. I’ll update very soon.

    Thanks, both of you :)

  36. Posted November 17, 2007 at 12:00 am | Permalink

    @Lance,
    You’ll have to upgrade Wordpress to get rid of the error you’re seeing. I’ll upgrade the requirements to state that.

  37. Posted November 17, 2007 at 12:48 am | Permalink

    @Christopher Bowns
    Hey, I’ve updated the ZIP. Checkout the updated README for a fix for your problem.

  38. Posted November 17, 2007 at 7:35 am | Permalink

    Thanks for the plugin. One question though: How would/could I port this for Expression Engine?

  39. Posted November 17, 2007 at 10:51 am | Permalink

    Hey Dominik,
    I don’t have any experience with Expression Engine, but if you want to port it over, it shouldn’t be too hard, you’ll need the php-typogrify.php included in the ZIP.

    I would suggest reading the EE dev documentation. And looking at other plugins in the Text Formatting category, to give you a head start.

    Let me know if you have any problems. I’ll help with what I can.

  40. johnbillion
    Posted November 26, 2007 at 6:47 pm | Permalink

    Small bug: In the widont() function, the regex pattern includes ‘accronym’ bu this should be ‘acronym’.

  41. Posted November 27, 2007 at 12:52 am | Permalink

    Thanks for the tip off, johnbillion. I’ll fix that little typo up.

  42. Posted November 27, 2007 at 7:19 pm | Permalink

    Typo fixed!

  43. Posted December 3, 2007 at 4:48 am | Permalink

    I love this plugin; thanks very much.

    Couple of things:

    1. I’ve just downloaded v1.5.1 and overwritten the existing files, but the version still shows up as 1.4; is this a numbering oversight?

    2. Can you submit to the WP extend site, so that we can receive version update notifications?

  44. Posted December 3, 2007 at 2:29 pm | Permalink

    @Peter Gasston
    #1. Yes, definitely an oversight on my part. I’ll fix that up.

    #2. Will do, that’s a great idea.

    Thanks for your support Peter!

  45. Esben Thomsen
    Posted December 6, 2007 at 6:08 pm | Permalink

    Hey Hamish,

    I heard about this plugin from Johno over at iLoveTypograpy and guess what! We are currently building a typo wiki (mediawiki) and it seems that the plugin cant go hand in hand with mediawiki. Any ideas how to activate this php script, because I do think its very nessary bundle this into mediawiki.

    thank for your lovely work so far. E.T

  46. Andrew
    Posted December 9, 2007 at 8:43 pm | Permalink

    I think this should be just a little bit smarter. It assumes that you write your blog entry within the admin area. I’m probably not alone in that I write my entries in OpenOffice so I can spell-check, save half-written entries, etc.

    Usually when you copy/paste from a word processor you will get characters that already appear as desired but are not represented by HTML entities. Checking for them and converting them into the proper HTML entities seems like it would be safer and more consistent.

    For example, if the word processor screws up somewhere and curls the quotes in the wrong direction, they get copied over and wp-typogrify just trusts that they’re correct, making the user wonder why these quotes should be any different from quotes they type in.

    You get a similar problem with em/en dashes. If they’re already proper dashes when they’re copied over, thin spaces won’t be applied around them.

    I love that this plugin exists at all… I was just surprised to find that it corrected almost nothing when I wrote postings my usual way. Just thought you’d like another use case.

  47. Idetrorce
    Posted December 15, 2007 at 6:36 pm | Permalink

    very interesting, but I don’t agree with you Idetrorce

  48. Posted December 19, 2007 at 1:40 pm | Permalink

    Oh, and did not know about it. Thanks for the information …

  49. Posted January 1, 2008 at 11:53 pm | Permalink

    For everyone following this post. I’ve added wp-typogrify to wp-extend. I’ll post a link as soon as it’s online.
    Edit: It’s online. See post.

  50. Posted February 1, 2008 at 10:40 pm | Permalink

    Thanks for this terrific plugin. I definitely started using it right after it was plugged on the iLT blog.

    Sadly I’m one of those guys that doesn’t get around to saying “thanks” until he has an issue to go with it. I ran into a problem with widow protection that is likely very rare, but a problem nonetheless. I have a poem which has a last line of one word (see it), which gets an nbsp entity prepended to it. This causes it to indent, which is not desirable behavior.

    It doesn’t bother me that much, but maybe a switch could be added on a post-by-post basis (like <!--no-typogrify-->) to revert to texturize rather than typogrify behavior?

  51. Posted February 6, 2008 at 10:28 pm | Permalink

    Nice site keep it up!

  52. Posted March 20, 2008 at 12:04 am | Permalink

    In reference to Christopher Bowns issue, I’m continuing to experience this issue, even though all of the blog’s “the_title()” bits say “echo wp_specialchars(get_the_title(), 1)” (which they always have been, by the by.) Anyway, I still experience the issue; you can see it in action at http://www.marcusrezak.com/

  53. Posted April 12, 2008 at 4:45 pm | Permalink

    About the ligatures, why don’t you create an option to search and replace some common ligatures like “Æ”, “æ”, “Œ” and “œ”?

    You could even create an separate option for Unicode ligatures (“IJ”, “ij”, “ff”, “fi”, “fl”, “ffi”, “ffl”, “ſt” and “st”), even if they’re barely supported. Well, we must start from somewhere.

    You could give the option to exchange the “ ” entity to the actual non-breaking space character (Alt+0160 on Windows). Every character with an Alt code on Windows have a large degree of support.

    And, finnaly, you could make suggestions to use with the CSS options. I really want to know what I could do with these classes but I’m not too creative.

    Sorry for bothering you with so many suggestions. I really apreciate your plugin for WordPress.

  54. Posted April 12, 2008 at 5:10 pm | Permalink

    @Alenônimo
    The ligatures thing is interesting. However, it wouldn’t look good for all typefaces. For example, if your tesxt is set in Georgia, Georgia doesn’t have an st ligature, so you’d get the standard ‘unicode’ one.

    Re the CSS options you could change the ampersand (&) for a pretty one (e.g. Hoefler Text). so, where you have:

    &

    just use the following CSS rule:

    .amp {
    font-family: ‘Hoefler Text’;
    font-style: italic;
    }

    The italic ampersand in Hoefler Text is gorgeous!

  55. Posted April 12, 2008 at 7:13 pm | Permalink

    Thanks John for your response.

    Alenônimo
    Thanks for your comment! It’s really appreciated.

    John gave a good example for the ampersand. I would also add that you might want to use some alternatives as well. I.e.,

    .amp { font-family: 'Hoefler Text', 'Palatino Linotype', 'Adobe Caslon Pro', serif; }

    Since the user might not have the exact font you specify.

    Another thing I do is lower the font size of anything wrapped in <span class='caps'>.

    .caps { font-size: 85%; }

    It’s purely aesthetic. But I like the change.

    The original typogrify demo page shows some of this in action.

  56. Posted April 22, 2008 at 3:00 pm | Permalink

    Hello there,

    Thanks for the amazing plugin, it really saves me a lot of time and worry and I install it on every site I have running and those that are in progress.

    I did however, notice that if you install it on a site that you have previously manually inserted non-breaking spaces at the end of paragraphs, that it adds yet another one prior to them. This results in three words wrapping to a new line rather than two. Is there anything I can do to remedy the problem without manually removing all of the existing non-breaking spaces?

26 Trackbacks

  1. By - Adam Howell dot org on June 3, 2007 at 8:48 pm

    […] Typogrify for PHP (and WordPress) makes boring type look like this. […]

  2. By Flatline Web Design » Typogrify on June 5, 2007 at 3:57 pm

    […] with this tool. Prevents widows, ugly quotes and other unsightly elements. Available as a WordPress Plugin. I may have to look into this […]

  3. […] Visit […]

  4. […] Typography for WordPress - someone built a plugin that is similar to Typogrify for Django […]

  5. By Typogrify ¶ 迦藍洞 on August 19, 2007 at 4:52 am

    […] 然後我剛才發現早就有人寫好了 orz ↩ This entry was written by Joel Lee and posted on August 19, 2007 at 5:07 pm and filed under System. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « セレノキュ-ブ […]

  6. By Stinkbug.net » Blog Archive » Web Master Jam Session on September 27, 2007 at 11:48 am

    […] attempting to improve on that over the years. If you’re a Wordpress user, here’s a Wordpress plugin that can help. It’s a php version of Googles […]

  7. By WordPress Plugins for Writers » Siolon on November 9, 2007 at 9:52 pm

    […] a difference. This is a port from the original Python script for WordPress, and it carries the name WP-Typogrify. This does things such as inserting inline styles to adjust the CSS around all-caps, ampersands, […]

  8. […] at times be difficult. However, things have just gotten a whole lot easier with the release of the Typogrify plugin. Originally released by Jeff Croft for Django, it uses among other things John Gruber’s […]

  9. […] is how there’s almost no way to easily control the typography of each post. In comes Typogrify, a plug-in originally created by Christian Metts for Django and ported to WP by Hamish. It’s […]

  10. By gdesdesk blog » Blog Archive » Widows and Orphans on November 13, 2007 at 11:02 pm

    […] short. An orphan is a word stranded all by itself at the top or bottom of a paragraph.  Typogriphy is the program we need to talk about here. Among other things, it fixes widows and orphans. I […]

  11. […] Wordpress Typogrify […]

  12. By links for 2007-11-15 on November 14, 2007 at 8:24 pm

    […] the hamstu » wp-typogrify Typogrify is a wordpress plugin that helps prettify your web typography by preventing ugly quotes and widows and providing CSS hooks to style some special cases. (tags: wordpress plugin typography web design) […]

  13. By the hamstu » Updated wp-typogrify on November 17, 2007 at 12:50 am

    […] some small adjustments to the wp-typogrify README file (mainly bug fix info). Head on over, to check it out. This entry was written by Hamish and posted on November 17, 2007 at 12:50 […]

  14. By Being Kind to Widows and Orphans « Damascity on November 19, 2007 at 11:10 am

    […] November 19, 2007 No, this is not one of those charity posts. It’s all about my favourite plugin. Imagine a plugin that could improve the typography of your page with no complicated setup. Controlling type online can at times be difficult. However, things have just gotten a whole lot easier with the release of the Typogrify plugin. […]

  15. […] I Love Typographyn teksti Being Kind to Widows and Orphansei varsinaisesti anna websuunnitteluyhteisölle mitään omaa, mutta esittelee yhtäkaikki erinomaisen WP-pluginin, Typogrifyn. […]

  16. By Improve Your Blog Typography with Typogrify on January 4, 2008 at 3:00 pm

    […] crafted by Christian Metts to improve web typography. It was the ported over to WordPress by Hamish Macpherson. As Jeff Croft puts it: Typogrify: almost certainly the best thing to happen to web typography […]

  17. By RUDEWORKS on January 8, 2008 at 6:36 am

    […] Artículo (RSS) Me he encontrado con un plugin genial para WordPress, se trata de WP-Typogriphy, adaptación de una solución de Jeff Croft a varios temas relacionados con la tipografía en […]

  18. By GDESDesk » Blog Archive » Widows and Orphans on February 14, 2008 at 4:43 pm

    […] if it’s short. An orphan is a word stranded all by itself at the top or bottom of a paragraph.Typogriphy is the program we need to talk about here. Among other things, it fixes widows and orphans. I […]

  19. […] WP-Typogrify I don’t use all of the typography-enhancing features of this plugin, but I use a couple. For one, I let it put a &nbsp; character before the last two words of my post titles. That prevents “widows” in my post titles, or a single word wrapping down onto the next line. With big fonts, window look especially horrendous. I really love this feature, but it does cause some problems. Namely, some social bookmarking sites trip up on that non-breaking space and replace it with an even-weirder character. I haven’t decided whether that or windows are more annoying. This plugin can also do other cool things like wrap your ampersands in spans allowing you to use the best ampersand available. […]

  20. […] WP-Typogrify I don’t use all of the typography-enhancing features of this plugin, but I use a couple. For one, I let it put a &nbsp; character before the last two words of my post titles. That prevents “widows” in my post titles, or a single word wrapping down onto the next line. With big fonts, window look especially horrendous. I really love this feature, but it does cause some problems. Namely, some social bookmarking sites trip up on that non-breaking space and replace it with an even-weirder character. I haven’t decided whether that or windows are more annoying. This plugin can also do other cool things like wrap your ampersands in spans allowing you to use the best ampersand available. […]

  21. […] Hamish Macpherson’s wp-typogrify […]

  22. […] WP-Typogrify I don’t use all of the typography-enhancing features of this plugin, but I use a couple. For one, I let it put a &nbsp; character before the last two words of my post titles. That prevents “widows” in my post titles, or a single word wrapping down onto the next line. With big fonts, window look especially horrendous. I really love this feature, but it does cause some problems. Namely, some social bookmarking sites trip up on that non-breaking space and replace it with an even-weirder character. I haven’t decided whether that or windows are more annoying. This plugin can also do other cool things like wrap your ampersands in spans allowing you to use the best ampersand available. […]

  23. By Upgrades and design tweaks at deanjrobinson.com on March 21, 2008 at 6:08 am

    […] also added a new plugin called wp-typogrify which as the name implies helps with the typography of blog entries and titles. The changes is make […]

  24. […] Hamish Macpherson’s wp-typogrify […]

  25. By the hamstu » Wordpress 2.5 and wp-typogrify on March 29, 2008 at 9:55 pm

    […] for wp-typogrify; there’s a bug that I’ve noticed (and been told about before) that I haven’t […]

  26. […] wondered how some sites set ampersands (&) in a different typeface? Well, with the typogrify plugin it’s easy. In the typogrify admin, just check the “style ampersands” box, […]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*