A Proper Em Dash

in Scholar and Scribe8 days ago (edited)

492319E5-16CC-4759-B75C-E6CC76747C3D.png

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...

Sort:  

I usually put a "non-breaking space" before the mdash. Otherwise, you might get something that looks a bit like this:

There are some good people on Hive
— such as dbooster and enginewitty.

But with a "non-breaking space" ( ) before the mdash code ( —), the mdash will never appear at the beginning of a line after a line-break:

There are some good people on Hive —
such as dbooster and enginewitty.

I love the mdash and the ndash, too. I also wrote about them in my blog maybe seven years ago. So, "Kudos!" to you for doing the same! 😃


Your reply is upvoted by @topcomment; a manual curation service that rewards meaningful and engaging comments.

More Info - Support us! - Reports - Discord Channel

image.png
Curated by friendlymoose

I hadn't even thought of that case. Hmm... is there a non-breaking hairspace in html code? I'll have to check on that!

I always called it a hyphen.

There are several similar but distinct marks: hyphen, dash, en-dash, and em-dash. The last two are so named because they are about the lengths of the letters 'n' and 'm,' respectively. Most word processors nowadays use the same key for each, and automatically correct the length contextually.

Interesting. I didn't know that. I think I know what you are talking about the autocorrect feature.

Most people probably do 😃 I think I called it "a long hyphen" before I got more into typography and learned its real name and function.

Interesting!

I saw your comment on @Riverflows' post, and had to see if this post had actually been published by now. I see it has. Yes, an emdash is sometimes used as a parenthetical tool that is visually less disruptive, but also as a way to splice sentences and clauses without a comma. I mainly use it was a tool for attributing quotes, and I've trained myself to use the alt+0151 method on a WIndows machine with a full number pad keyboard. Like this:

I've trained myself to use the alt+0151 method on a WIndows machine with a full number pad keyboard.
—me, just above this bit

Ah yes, I didn't mention using it for quotes. A really useful punctuation mark!

You received an upvote of 90% from Precious the Silver Mermaid!

Please remember to contribute great content to the #SilverGoldStackers tag to create another Precious Gem.