Treading the fine line between typesetting and copywriting here. Which I think is a good thing. As a designer/typesetter/jack-of-all-trades, I have found the time spent learning proper grammar and style has been invaluable.

Punctuation and other typographic marks are often neglected in web design but they are there to create landmarks and give direction to the reader.

When you consider how bad most copy provided to web designers is?from a viewpoint of on-screen use?it is a real strength if web designers are able to edit, repunctuate and if need be rewritecopy for our medium.

Hopefully these articles will encourage people to look at the words a little more closely.

Mark refers to The Oxford Guide to Style, if you’re based in the UK this is a must have, if you’re in the US look at the Chicago Manual. Alongside these it is well worth looking at ?The Elements of Style? by Strunck & White and ?The Elements of Typographic Style? by Robert Bringhurst. All excellent, all eye-opening, all essential reading.

There’s a good article on A List Apart on this subject that I’d recommend alongside what’s already been written here: The Trouble With EM ‘n EN (and Other Shady Characters)

Soft hyphens could be useful if you’re writing long words in narrow places, but sadly browser support isn’t quite there yet.

"Treading the fine line between typesetting and copywriting here.”

That’s the trick, isn’t it? To be a good online writer, you also have to be a good editor and typographer. Magazine and book writers rely on others to know such details, so self-publishing online requires quite a bit more knowledge.

For those that want a punctuation geek’s laugh at these matters while still managing to learn and remember all these rules I can’t recommend Lynne Truss’ book, Eats, Shoots & Leaves highly enough.

Handily, she’s a Brit so the book is good for those folk but the US edition covers both styles.

Lastly, while I do my level best to remember and properly implement all of these rules—and many more—when I writeit’s good to remember that the English language is one of the most malleable of the world’s languages and that, more than likely, with the passage of time and dying away of sticklers many of our favorite grammar and typographic conventions will go the way of the dodo.

Of course, knowing that anyone reading this is of a stickler nature I’m potentially embarrased by the number of mistakes I made above.  Such is life.

How those entities appear on various browers using different ISO codings is very problematic.  Ditto for transfering such characters from PDF documents to other applications.

Appendix F, Character Entities, contains a complete table of other obscure HTML codes [in J. Niederst, WEB DESIGN in a NUTSHELL, second edition, see esp. p. 583].

Also, using a double hypen, instead of em, in some wikis, may cause the “strike out” of words.

Helpful places are newspaper Style Guides too:

Guardian Style Guide

Times Style Guide

Good to see some thought going into printing off the web. Interesting stuff.

I think you forgot an en dash, Phil. :)

Where? I know I missed putting commas around a clause. Typing too fast.  :)

"In British and North American typesetting there are a few simple rules: [...] 2. It can also be used either side of an interruption?like this one?and is set closed up.”

I think it’s false to call the closing-up a rule since, as you say later on, it varies enormously across British and US house styles. Last night I put it to the test by looking at around a dozen books from mainstream publishers (Penguin, Virago, Faber, Random House) taken randomly from my bookshelves. The vast majority put spaces ? like this ? around the interruption dashes.

In my straw poll, the only two books I found which followed the Oxford style guide’s rule on closing up were Ellmann’s biography of James Joyce and Virginia Woolf’s Mrs Dalloway. Both were, unsurprisingly, published by Oxford University Press.

All the others I looked at put spaces around the dashes, apart from Sterne’s Tristram Shandy (Penguin) and Pynchon’s Gravity’s Rainbow (Virago), which have their own rather crazy idiosyncrasies. These were post/modernist works which took, shall we say, a relaxed view towards literary rules. The Sterne book???notably???used what looked to me like ememem dashes!

While consistent style is clearly valuable within a publication or publishing house, I’d be wary of aligning oneself too closely to the dogma of another ? even a well-respected source such as the Oxford rules ? particularly when it’s rejected by the vast majority of other book and newspaper publishers (including the Guardian and Times, mentioned above). The fact that one authority uses a mode doesn’t make it a rule.

The problem is that many of the style guides out there are press specific and, as such, have their own industry quirks. The OUP style guide is, at the very least, far-reaching and applicable to many situations. Penguin do a series of style guides and writers manuals but none to the same degree of depth.

Internal consistency is key, which is why these things are called house styles. You should be dogmatic, just be consistent with your dogma.  :)

just be consistent with your dogma.  :)

Else, it will just piss all over the place.

You seem to have omitted the following: A throwback to the days of typewriters, two hyphens--like these--were used to make a dash because true dash characters are not available on a typewriter. But this is a major no-no in typesetting and desktop publishing, where em dashes?like these?should be used instead. An em is a unit of measure equal to the point size you are using. For example, using 10-point type, an em dash would be approximately 10 points (approx. 0.14 inches) wide, but this is dependent on the individual typeface. Actually, this is probably the widest it would be. Many typefaces have em dashes that are slightly narrower than a full em, but still considerably wider than a hyphen.

Hyphens are used to hyphenate words and separate phone numbers. They should never be used as dashes. A dash, more specifically, an em dash, is a form of punctuation used to offset clauses in a sentence.
An en dash is typically half the length of an em dash (sometimes slightly wider than half, depending on the typeface) but still longer than a hyphen. En dashes are primarily used to denote duration, as in 8:00?5:00, or August 12?14, or Aardvark?Adelaide. Some people use them to separate phone numbers, but I think they are too large and look awkward for this.

The period is preferable to the space, but this is purely a matter of personal taste. Phone numbers separated by spaces are quite common in Europe, less so in the U.S.
When creating em and en dashes, you can add space before and after the dash, or not. I prefer to add either a small amount of space (usually via the application?s kerning commands), or no space at all. Page layout programs such as Adobe PageMaker and QuarkXPress let you adjust space between characters at a micro level (i.e., kerning), as do illustration programs such as Illustrator and FreeHand, but many word processors are limited in this regard and only allow you to add space via the Space Bar. The normal space created with the Space Bar seems a bit too wide for my tastes, but you may find it acceptable. Generally speaking, the wider the column of text, the more space you can insert before and after dashes (up to a full space). In a typical word processed documentsuch as a memo or letter, for example, where your column width might be as great as 5 or 6 inches, inserting a normal space before and after a dash looks just fine. But in a documentwith narrower columns, say a newsletter with three columns of text, this much space will stand out, and your dashes will resemble diving boards. In this case, I would suggest adding no space at all, and simply use the program?s kerning commands (if available) to tweak the space as necessary.
In PageMaker, press the Cmd key in conjunction with the Left and Right Arrow keys to decrease and increase kerning (the amount of space between characters) respectively. Hold down the Shift and Cmd keys if you want to increase or decrease kerning in smaller units. In QuarkXPress, press Cmd-Shift in conjunction with the Left and Right Bracket keys to kern text. Hold down the Cmd, Shift, and Option keys if you want to kern in smaller units. In PageMaker, a value of about 0.1 should suffice; in QuarkXPress, consider a value of about 20 before and after a dash.
If you do add a full space by pressing the Space Bar, it is important to add it before and after the dash. Sometimes people will add a space after a dash to break a line. Then, if they edit the text or change the layout, the dash with a space after it but no space before will appear rather awkward looking.
To create an em dash in most Mac applications, press Shift-Option-hyphen. To create an en dash, press Option-hyphen.
To create an em dash in most Windows applications, press Alt-0151. To create an en dash, press Alt-0150.
Some expert font sets contain a three-quarter em dash, but in reality, most em dashes are about this wide anyway. That is, most em dashes are not one em in width, and depend on the individual typeface. The three-quarter em dash can be substituted for the em dash. The two are interchangeable. But it is too wide to be used when you would normally use an en dash.
It is also acceptable to use an en dash instead of an em dash to set off clauses in text. I don?t like the practice, but it?s not incorrect to do so. If you do substitute en dashes, consider adding space before and after them.

Keep up the good work ----

I became far more aware of the en dash and em dash, and their proper use, when I began using LaTeX, which parses two dashes (--) as an en dash and three (---) as as em dash. 

I agree with Paul Haine that the article on A List Apart is another fine resource. Your article is nice and easy to digest, I think in large part due to the rulemark gifs that quickly and clearly identify the content of each section. Great use of visuals.

Two gripes I have regarding the way web browsers handle these dandy punctuation marks: first, it’s a shame firefox still doesn’t recognize the soft hyphen (­)?really, it’s a shame that no browsers have the ability to break words between syllables the way a decent text processor can; second, in a number of browser fonts, including the ones this page displays in on both firefox and ie, one can barely distinguish between the hyphen and the en dash?if anything, the hyphen is actually wider.

There should be a ‘­’ between the parentheses above following ‘soft hyphen.’ Sorry, the preview doesn’t seem to be working for me and I didn’t know that the ‘­’ would be translated.

Thank you so much for posting some typesetting tips– so hard to find on the web!

I like to pull my favourite Bringhurst quote when this discussion comes up:

5.2.1 Use spaced en dashes – rather than em dashes or hyphens - to set off phrases.

The em dash is the nineteenth-century standard, still prescribed by many editorial style books, but the em dash is too long for use with the best text faces. Like the oversized space between sentences, it belongs to the padded and corseted aesthetic of Victorian typography.

The web being my native design medium, I did some experimenting with browser support for various dashes and spaces. I hope this is useful to someone.

This is all well and good but the problem is that many people are to lazy to fix up their grammer on their sentances, like this one way to long!

Also their are some content managment systems which convert these automatically but I honestly couldn’t remember all the html code for them, and I simply am to lazy to bother.

Thanks Mark! I learned a lot from your original post and from the comments here — and I kind of thought I knew everything already. Two comments:

First, it’s perhaps wrong to say that there’s little use for the soft hyphen. I’d be very keen to use a soft-hyphen along with smart, automated hyphenation in a Web browser to achieve aesthetically pleasing right-rag effects with bodies of type. That’s something that has been lost entirely online.

Second, I think Hugh really outlines the use of the em dash very well; my personal taste is that an em dash deserves a space before and after, especially in browsers, in order to avoid effectively joining two long words together with an extra long dash and causing egregiously awkward right-rag effects. That said, I wish I could specify a shorter distance than a full space, as that amount does look odd. But it’s an acceptable compromise, at least for now.

You can use a thin space on both sides of an em-dash to avoid linking the words and so you can allow them to wrap better. This could also be a solution to open em or en dashes that cause wide open spaces in narrow columns.
The character entity is shown on the HTML 4 reference at W3C site: <blockquote title="W3C"><!ENTITY thinsp CDATA “ ”—thin space, U+2009 ISOpub --></blockquote>http://www.w3.org/TR/1999/REC-html401-19991224/sgml/entities.html#h-24.4.1
This is right under the entry for em and en spaces.

It worked on FireFox 1.5.0.1 but I’ve not tried any other browser.

erm blockquote errors not sure if that was me or the software - the “live preview” is not working and there’s no backup!

quoted:

<!-- General Punctuation -->
<!ENTITY ensp CDATA “ ”—en space, U+2002 ISOpub -->
<!ENTITY emsp CDATA “ ”—em space, U+2003 ISOpub -->
<!ENTITY thinsp CDATA “ ”—thin space, U+2009 ISOpub -->
...
<!ENTITY ndash CDATA “–”—en dash, U+2013 ISOpub -->
<!ENTITY mdash CDATA “—”—em dash, U+2014 ISOpub -->

ok looks like I need to remove encode it as some characters that seem to slip though the commenting sytem’s net!

quoted:

-- General Punctuation --
ENTITY ensp CDATA “ ”—en space, U+2002 ISOpub --
ENTITY emsp CDATA “ ”—em space, U+2003 ISOpub --
ENTITY thinsp CDATA “ ”—thin space, U+2009 ISOpub --
...
ENTITY ndash CDATA “–”—en dash, U+2013 ISOpub --
ENTITY mdash CDATA “—”—em dash, U+2014 ISOpub --