WordPress Typography, Hyphens and Dashes

While trying to give examples of code in the last couple of posts I found out an interesting typographical feature of WordPress. A single hyphen is rendered as a hyphen, two hyphens are rendered as an en dash and three hyphens are rendered as an em dash. In visual terms:

  • – = –
  • — = –
  • — = —

Which means trying to show examples with conditional comments, when ever I typed <!– it rendered as < !– and the difference as you can see if difficult to pick between <!- and < !–. So after a little frustration, a lot of searching an finally finding this topic in the WordPress support. It is the file functions-formatting.php in the wp-includes folder that is the culprit.

So if you need to give code examples and want two hyphens (or two dashes for the non typographically inclined) not to be automatically translated in a single en dash, you need to comment out the following line $curl = str_replace('--', '–', $curl); in functions-formatting.php. Seeing I prefer to use – for – and — for — I also commented out —$curl = str_replace('---', '—', $curl); $curl = str_replace(' -- ', ' — ', $curl);.

If you want to know the correct use of hyphens, en dashes and em dashes I suggest you read The Trouble With EM ‛n EN (and Other Shady Characters).

Updated 7th February: Mark Boulton’s series Five Simple Steps to Typesetting on the web has a great article on dashes. Explaing the differences between hyphens, en dashes and em dashes and when and how to use them on the web.

One Response to “WordPress Typography, Hyphens and Dashes”

  1. Myles Eftos Says:

    WordPress really needs to support the code or pre tag…

    Might have to hack my version…

Google