CSS Hyphenation

After reading this Fontdeck Blog post a few of weeks ago, I dropped an exciting new CSS property into the stylesheet for this blog. Wanting to test hyphenation on all my posts and pages, I applied CSS hyphenation to all paragraphs:

p {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

During a day or so of road testing I noticed some pretty funky widows, so I fine-tuned my stylesheet to only target narrow columns, like the ones on my info page, which is a scenario where CSS hyphenation really comes in handy. Overall, I’m not sure what to think about fluid columns and widows—they’re bound to show up at varying widths. I try to avoid them at my defined max-width, but have plans to test the wp-Typography plugin in a responsive setting once we perform some server upgrades for the blog (taking our old Media Temple DV from php 4 to 5). I’ll be sure to report back when we get there.

Update (9/21/11): I’m happily using the wp-Typography plugin to prevent widows now that our servers have been upgraded. Things seem to be reflowing smoothly in my responsive layout. This plugin has loads of features, hyphenation, spacing control, character replacement, etc., that I’ll be experimenting with further soon.

10 Responses

Leave a comment or contact me via Twitter @TrentWalton

  • Melle

    Hyphenation with CSS? That’s very interesting. Too bad about the widows.

  • Gordon McLachlan

    I never knew about the hyphens property - will definitely need to check it out. As for widows, perhaps it’s because I’m not a designer but they never really bothered me. In fact, I had never even considered it until recently when our designer asked me to look into installing that WP plugin on our blog!

  • Jim

    Thanks for the tip Trent.

    I think it will be interesting to see how this rule meshes with established typographic standards.

    I think hyphenation can be like the font-family rule in respects. It has it’s benefits and it has it’s drawbacks (though, to most people, it’s drawbacks won’t be as far reaching, noticeable, or controversial as font-family). An interesting example was brought to my attention by this very post of yours. When I view this post on my iPad (portrait), I see the following line “...avoid them at my defined max-width, but have plans...” but when I view the post in on my iPad in landscape, the term “max-” appears on one line with “width” going to the next line.

    Established typographic standards dictate that one should add (or preserve)  punctuation when it is necessary to retain meaning. In Bringhurst’s famous work “The Elements of Typographic Style”, he uses the example phrase “twenty one night stands”.  Vocal inflection would make this phrase easy to understand when spoken. However, since you don’t hear the words when reading, typography solves the problem through usage of the hyphen: “twenty one-night stands” is very different from “twenty-one night stands”. 

    To apply this to the example used in your page, using “max-width” with or without a hyphen can most certainly change its meaning.  For example, if you are not very familiar with CSS, will you know that “max-width” is written with a hyphen? Or will you supose, as in the example above, that the hyphen is simply a result of hyphenation and should be written “maxwidth”

    Maybe I am way off base here. I’m sure these issues will be addressed by people much smarter than I.  In the end, as Bringhurst says, “if [hyphenation]  decisions are left to software, they should be checked by a trained eye.”

  • Oliver Edwards

    Good point on hyphenation.

    Yes, fluid columns are tricky beasts, the trouble is that most sites where they’re used won’t additionally scale the point size of the text to match the varied column widths; ultimately the design will totally loose its balance at certain widths.

    Fluid width designs should include fluid vertical rythem.

  • Trent

    @Jim: Great points. Fluid width typography is definitely a tricky beast. At the moment, I’m pretty satisfied with restricting hyphenation to narrow columns though.

  • CIPPO Design

    MAN! Thank you very much for this solution.
    I have combined what you did with word-wrap:break-word to be sure that it will work and it works great :)

    Thanks a lot!

  • Isaac Gray

    Sadly it does not yet appear to be supported in Chrome. But viewing your site in Firefox yields a pleasing result.

    I’m very much enjoying digging through the ‘back-issues’ of your blog.

  • tinny

    For other browsers:

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;

  • tinny

    You also need to specify the language into the HTML tag, example:

  • tinny

    [html lang=“en”]

Leave a Reply