A Proper Em Dash

Being a fan of good typography and proper text styling isn’t the easiest thing in the world on Hive.

Raw HTML has had basic typography and style support for a while. It has actually been losing support for this since the advent of CSS. Unfortunately Hive doesn’t support CSS so we can’t use it in our posts. Even so, what HTML supports is usually still enough.

Problem is... it can be ugly. Case in point, the em dash (—). In American English, we use the em dash primarily when there is some kind of break in the sentence. This may be where we would use a semicolon or colon in more formal writing, where we are setting off a side statement with two em dashes, or it could be for effect — to give a bit more pause than a simple comma might.

In the two most common style guides for US English — AP and Chicago — it is suggested to include a hair space on either side of an em dash. This is primarily for visual appeal, so we don’t get what otherwise might look like a compound word with a longer than usual hyphen.

In HTML, we can write an em dash with one of the following

 —
 —

We can then write a hair space with one of the following

  
  

In both of those, the named version of the code might be slightly easier to read, but both are an eyesore. So if I want to write a proper em dash with a hair space on either side, I have to write:

  — 

So my writing turns into:

 I went to the store and guess who I saw — Bob and his wife, with a new kid. 

That would produce “I went to the store and guess who I saw — Bob and his wife, with a new kid.”

I guess that’s kind of okay. We could write out our entry in a text app and then do a mass find-and-replace to get the proper style code in there. But then if we ever went back to edit the post, we’d have to deal with the code directly.

Luckily, Unicode support is pretty good across the board these days — amazingly, at Hive too! Well, kind of^[1] — and so we can use it directly without fear of it being stripped out or altered in some way.

Inserting an em dash directly as we write is easy enough. On Mac, it is the simple keyboard combination Option-Shift-Hyphen. On Windows, it’s a bit harder, but still not bad. Hold Alt and type 0151. Microsoft Word makes it even easier by automatically replacing -- with an em dash.

But what about the hair spaces on either side? There is no easy keyboard combination to place them.

I created a text expansion using Keyboard Maestro. I’ve talked about text expansions before — they are small bits of text that are automatically replaced by other bits of text. Microsoft Word replacing -- with — is a perfect example.

My text expansion replaces an em dash with an em dash surrounded by hair spaces. Depending on your system font, it may be hard to see, but compare:

A simple  typographical element—an em dash.
A simple  typographical element — an em dash.

Was that too much work for something 99% of the people on Hive won’t even notice? Maybe. But writing this post took longer than making that text expansion — and now, every time I hit publish, I’ll know my posts look just a little bit better.

[Oh, this isn’t the only finicky styling I do of my posts. The well-trained eye might notice more.]

1. Peakd maintains the Unicode hair spaces, but some of the various portals for second layer tokens and communities strip them out. Le sigh... ↩