WordPress Typography, Hyphens and Dashes

While try­ing to give examples of code in the last couple of posts I found out an inter­est­ing typo­graph­ical fea­ture of Word­Press. 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 try­ing to show examples with con­di­tional com­ments, when ever I typed <!– it rendered as < !– and the dif­fer­ence as you can see if dif­fi­cult to pick between <!- and < !–. So after a little frus­tra­tion, a lot of search­ing an finally find­ing this topic in the Word­Press sup­port. 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 typo­graph­ic­ally inclined) not to be auto­mat­ic­ally trans­lated in a single en dash, you need to com­ment out the fol­low­ing line $curl = str_replace('--', '–', $curl); in functions-formatting.php. See­ing I prefer to use &#8211; for – and &#8212; for — I also com­men­ted out &#8212;$curl = str_replace('---', '—', $curl); $curl = str_replace(' -- ', ' — ', $curl);.

If you want to know the cor­rect use of hyphens, en dashes and em dashes I sug­gest you read The Trouble With EM ‛n EN (and Other Shady Char­ac­ters).

Updated 7th Feb­ru­ary: Mark Boulton’s series Five Simple Steps to Type­set­ting on the web has a great art­icle on dashes. Expla­ing the dif­fer­ences between hyphens, en dashes and em dashes and when and how to use them on the web.

This entry was posted on Sunday, December 11th, 2005 at 9:35 pm and is filed under wordpress . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.