Quick fix: Using em dashes online

The em dash vs the hyphen and what to do when WordPress automatically changes it, whether you like it or not.

First, a little background:

img-01

Every program treats these two typographical symbols differently. In MS Word, you can type two hyphens and it may change it to an em dash for you, depending on your preferences, or you can specify a keystroke. Adobe InDesign also automatically makes the conversion, when you import that same text. But when you take that same text and import it into WordPress for a blog post, WordPress makes some changes that you may not want.

We use the Chicago Manual of Style, which says there should be no spaces before and after your em dash. But when importing into WordPress, the program arbitrarily decides that you must have spaces—if you do have spaces, you get an em dash. If you remove the spaces, it changes them to a single hyphen. So…. how to tweak WordPress into doing the right thing?

Option 1: Select the right character (short and sweet version)

emdashfig1

Depending on whether you’re using Wordpress, Blogger, some other CMS or editor, be sure to use the panel that allows you to edit the code directly. In our first example, we’re on the Visual tab (also known as WYSIWYG, pronounced wizēwig, and meaning “What You See Is What You Get”). Note that all of your options here look like you’re about to write an email or a letter in Word.

Highlight the text and spaces, and choose Insert Custom Character from the menu.

emdashfig1a

Locate the em dash option from the popup. Note how it also tells you clearly at the right what you’re looking at, as well as coding options.

emdashfig1b

And it’s updated!

emdashfig1c

Option 2: Go with the code (adventurous version)

Instead of the Visual tab, choose the Text tab next to it, which brings up HTML-editing mode. You can tell that this is a different setup because your options have changed, as well as your typestyle.

Go to Text view, and highlight the text you want to change. Don’t forget to highlight the spaces too, because all of it must be replaced.

emdashfig2

Instead of two hyphens, change the text to emdashcode and yes, that includes the semicolon and no spaces.

emdashfig3

The outcome for either option:

emdashfig4

This is the way the text appears onscreen in the blog post. Sweet!

Why Should You Care?

Completely glossing over the whole issue of integrity and beauty in proper grammar and punctuation usage, the need to pay attention to detail, and the benefits of using a style guide, you need to fix things like this because if you don’t, you can wind up with this:

Here is a line of text -
- it needs a proper em dash.

And a sloppy line like that will make your fifth-grade English teacher weep.

teacher

Posted by Elena Nazzaro | Best Practices, Tutorial | Comments 0 |
Connect with us on LinkedIn Follow us on Twitter Add us on Facebook Subscribe to our RSS feed
the_works

Subscribe to email updates