How WordPress Handles Dashes and Hyphens

WordPress has always valued typography. Properly “curled” quotes, fancy dashes — like this — and more.

I want to look specifically at dashes, and talk about how WordPress handles the conversion of hyphens to dashes.

First, let’s talk about the three most common forms of horizontal strokes that exist. The first is the hyphen-minus. This is the key that is probably to the right of your “0” key on your keyboard. It is often called a “minus” or a “hyphen”. It is neither of these, and yet it is both. It is a special character that is somewhere in-between a minus sign and a hyphen. As such, it can serve either purpose. I’m just going to call that a “hyphen” for the rest of this post, just to save time.

An em-dash (—) is a wide dash — the width of the letter “m” being its guiding length. Em-dashes signify a thought break, rather like parenthesis, but with a stronger implied break.

An en-dash (–) is slightly shorter — the width of the letter “n” being its guiding length. En-dash use is probably one of the least known skills in everyday punctuation. The en-dash is used for:

  • Ranges of number values: (2–4 teaspoons, from 1:00–2:30pm, ages 7–10)
  • Relationships and connections: (a JFK–Atlanta flight, Bose–Einstein condensate, the Jackson–Murray fight, the Macy–Jaquith wedding)
  • Attributive compounds: (pre–Vietnam War weapons, the ex–Vice President non–New York style pizza)

Here’s how WordPress replaces hyphens with dashes:

Foo {3 hyphens, spaced} Bar → Foo — Bar (em-dash)
Foo{3 hyphens, no space}Bar → Foo—Bar (em-dash)
Foo {2 hyphens, spaced} Bar → Foo — Bar (em-dash)

Foo{2 hyphens, no space}Bar → Foo–Bar (en-dash)
Foo {1 hyphen, spaced} Bar → Foo – Bar (en-dash)

The last replacement seems misguided, and I wish it weren’t made (or that it were an em-dash instead).

So, three hyphens always gets you an em-dash. Two hyphens gets you an em-dash if spaced apart from surrounding words. Else, you get an en-dash. If you want more control, then I suggest you do as I do, and actually start typing the correct dashes (WordPress won’t mess with them). On OS X, en-dashes are typed with Opt-{hyphen}, and em-dashes are typed with Opt-Shift-{hyphen}. In Windows, en-dashes are typed with Alt + 0150, and em-dashes are typed with Alt + 0151.

You can also type out the HTML entities in WordPress’ HTML mode: — and –.

42 thoughts on “How WordPress Handles Dashes and Hyphens

  1. I have never thought about whether a dash was an en- or an em-dash, but I noticed that there were situation, where the dashes looked different. They just looked nice and that was good enough for me. So I guess, yes, WordPress has valued typography.

    However, when it comes to curled quotes, there is a bug that is even present in this very article: If you put a number under curly quotes, the closing sign becomes an inch-sign. Let’s try it out: “132”.

  2. I recently switched from PHP Markdown over to markdown-on-save, and in the process dropped PHP SmartyPants as well. I was wondering why there was little to no discernable change with regard to smarty pants, but I guess this explains it. Do you know if WordPress natively handles all of the typographic changes of SmartyPants?

  3. Hi Mark. I think it’s great that you’re drawing attention to this typographic issue as it relates to WordPress.

    Why do you have a problem with “The last replacement….”?

    If I remember correctly, I read in Bringhurst that [space][en][space] is interchangeable with an em dash as a signifier of a break in thought. It’s not particularly common in NA English, but I believe is more common than using an em dash in British English. I’ve worked with copy editors who have treated it as such.

    It seems a fine replacement to me, especially if (British) readers would be used to a spaced en dash.

    • You’re right. Besides, [space][en][space] is commonly used instead of em-dashes in many other languages than English.

  4. As someone who loves seeing en and em dashes used correctly on the web but also enjoys how double hyphens look as substitutes for ems when writing in a plain text editor (where I do most of my writing) this has always been one of my favorite WordPress features.

    That and the whole “we have themes” thing. I like that too.

  5. doug says:

    I’m curious you did not mention html [–] and [—] or [&8211;] and [&8212;], which I generally use.

  6. I enjoyed this article. Brought me back to a nice time when I temped in Boston as a Quark–typographer for white paper publishers at research groups. While I knew —or once knew, the reasons for em and en spaces, usage was always at the whim of the editor. For more fun, I was often the go-between for 2 editors on the same article. I miss that work, it was hysterically funny, quiet and lucrative.

    • recently switched from PHP Markdown over to markdown-on-save, and in the process dropped PHP SmartyPants as well. I was wondering why there was little to no discernable change with regard to smarty pants, but I guess this explains it. Do you know if WordPress natively handles all of the typographic changes of

  7. Foo {1 hyphen, spaced} Bar → Foo – Bar (en-dash)
    The last replacement seems misguided, and I wish it weren’t made (or that it were an em-dash instead).

    It‘s totally not misguided, but correct German hyphenation, and I‘m totally glad to learn about it! Actually it features a behavior like in any German edition of text-processors like MS Word.
    In German, we widely use en-dashes in places of where em-dashes are being used in English. So to myself and potentially all dash-savvy German WordPress users this is a great treat!

    I only wish there was a similar replacement for quotes. In German it‘s „quotes“ instead of “quotes”. Well, we can still use a plugin for that purpose. ;)

  8. Henry Bowman says:

    I wish I knew how to make WordPress stop breaking after real minus signs; I’m tired of seeing values like “-23fps” get split with the minus sign on one line and the rest on the other. :-(

    • I’m intrigued at the idea of negative frames per second!
      You could however try using the HTML entity for a minus sign instead:

      (ampersand hash 8722 semicolon)
      This shouldn’t trigger a line break (at least didn’t in my quick Firebug test)

  9. Thanks. I was having some challenges with WordPress hyphens. I created a few shortcodes, but see your shortcode solutions. We list hundreds of WordPress blogs on LatestBlogPosts.com and it seems a lot of the WordPress bloggers have this issue as well.

  10. Heya i’m for the first time here. I came across this board and I find It really useful & it helped me out a lot. I hope to give something back and help others like you helped me.

  11. Greetings! I know this is kinda off topic nevertheless I’d figured I’d ask.

    Would you be interested in trading links or maybe
    guest authoring a blog article or vice-versa? My website goes over a lot of the same topics as
    yours and I think we could greatly benefit from each other.
    If you’re interested feel free to send me an email. I look forward to hearing from you! Superb blog by the way!

  12. Greetings! Quick question that’s entirely off topic. Do you know how to make your site mobile friendly? My blog looks weird when viewing from my apple iphone. I’m trying
    to find a theme or plugin that might be able to correct this
    issue. If you have any recommendations, please share.

    Thanks!

  13. Its such as you learn my thoughts! You appear to grasp a lot approximately
    this, such as you wrote the e-book in it or something.
    I feel that you just can do with a few percent to force the message house a little bit, however other than that, that is great
    blog. An excellent read. I’ll definitely be back.

  14. When I initially commented I clicked the “Notify me when new comments are added” checkbox
    and now each time a comment is added I get several emails
    with the same comment. Is there any way you can remove me from that service?
    Thanks a lot!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s