Related Articles

1. The Principles of Beautiful Typography
   Rated: 9.5/10
2. The Definitive Guide to Web Character Encoding
   Rated: 9/10

About the Author

Daniel Aleksandersen

Daniel is a Norwegian web entrepreneur with a taste for open source and web standards. He shares his views on these topics and more at OpenSourceNotebook.com.

View all articles by Daniel Aleksandersen...

Rich Punctuation: How To Do It And Why You Should Bother

Today’s web publishing technology has come a long way from its US ASCII origins—these days, the typographic punctuation enjoyed for over four centuries by its venerable print publishing cousin is fully supported for use in our web documents.

Beautiful typography does require some additional configuration on the server side and a bit more attention by the document author—but in this article, I hope to convince you that it’s time well spent. Rich punctuation is a tool that, when used properly, will make your web site’s text come alive!

Considering “Proper” Punctuation

Looking around the Web, it’s clear that using and delivering proper punctuation is a basic problem for many authors of otherwise slick, professional web sites, including SitePoint until only recently (Ahem, better late than never —Ed.) Although the QWERTY keyboard has much the same limitations as it ever did, the advent of Unicode, and browsers offering widespread support mean that there’s really no excuse these days for online content bristling with unattractive straight quotes and hyphens used as textual dashes. Most web browsers and many publishing tools already support rich punctuation. It’s just a matter of getting started!

There are myriad style guides and local variations for punctuation. A good-quality style guide, or even one found on the Web, will provide a good starting point when expanding your punctuation repertoire. Reading a print magazine or book can also provide a lot of inspiration and exemplify the uses of rich punctuation marks.

Here are some typographic characters that when used properly will raise the quality of an article.

As an example, compare the two following excerpts, courtesy of Lewis Carroll—see the difference between straight and gracefully curly quotes, and two hyphens versus an elegant em dash.

See what I’m talking about? Now imagine this in an attractive font on your thoughtfully produced classic children’s fiction web site!

Producing Non-keyboard Characters

The common problem of many punctuation marks is that they are simply not present on regular QWERTY keyboards. These keyboards were designed by and for computer programmers, and not even when typographers started working with computers did the keyboards get a real overhaul.

The most common misapprehension, though, surrounds several heavily used characters that are present on the keyboard. These are straight or dumb quotes, known as glyphs ("), the straight apostrophe ('), and the hyphen or minus (-). Although these characters look like punctuation marks on QWERTY keyboards, they were originally intended only for use in computer programming, not in text documents. And though some text editor software, like WordPress Rich Text and OpenOffice.Org, tries to convert computer programming glyphs to punctuation marks on the fly, this usually creates more wrongs than rights.

To produce the proper “curly” quotation marks, the apostrophe, the ellipsis, the hyphen, as well as the en and em dashes absent from the keyboard, some work is required on behalf of the author. I’ve listed a few options below:

Utilize Keyboard Shortcuts

On many operating systems, keyboard shortcuts for producing many Unicode characters are built in.

On a Mac running OS X, for example, these shortcuts take the form Option + <key> and Shift + Option + <key>. The 68kMLA wiki contains a list of all of these keyboard shortcuts; here’s a sampling:

In many distributions of Linux, the keyboard shortcuts listed above are also valid; just substitute the Option key for ALT.

Windows users can also input Unicode by using a keyboard shortcut, but there are a few caveats. For one, it requires that you know the Unicode number for the character you wish to enter (not quite as intuitive to remember as the approach taken on the Mac, and more time-consuming). Secondly, it depends on the application you have open and your language settings as to the characters that this will produce.

Entering Unicode characters in Windows can be done with the following key sequence:

1. Hold down the ALT key.


2. Type 0 on the number pad.


3. Type the Unicode number of the character, again on the number pad.


4. Release the ALT key.

Here are the key sequences for entering the commonly used characters on which we’ve focused for this article. I’ve marked the ALT button in parentheses to indicate that it should be held down while typing the characters that follow it:

There are a few alternatives to this approach—many Microsoft applications, for example, also support the ALT-X keyboard shortcut for converting numbers to Unicode characters. However, as this approach requires the author to know the hexadecimal number for the character, and is specific to Microsoft applications, I consider it to be less universally useful, but it may suit your workflow. (In fact, this is technique also works in OS X, by holding down the Option key, but unless you speak fluent hexadecimal, I’d recommend sticking with the regular shortcut keys).

Read more about entering Unicode characters on Windows at FileFormat.info.

Create Your Own Keyboard Shortcuts

Another great method is to manually assign characters to keys on your keyboard. For example, you may want to create a keyboard shortcut that produces an ellipsis when you hold down the right side Alt/Option and press the . key.

Depending on the operating system, it’s generally easy to modify keyboard layouts to assign keys different meanings. Refer to your particular operating system’s documentation or search for tutorials on the Web for full details on how to achieve this.

At first, you may find using dedicated keys slow when you have to stop and think through the necessary key combinations, but over time it will become second nature to rattle off these keystrokes.

Use a Third-party Application

Outside the browser, numerous shareware and freeware applications also exist for assisting in the entry of Unicode characters. One lightweight (and free) utility that I’ve tried on Windows is simply called UnicodeInput. It allows for entry of Unicode characters using a customizable keystroke.

Use a Cheat Sheet

If your data entry is restricted to a web browser, and are reluctant (or unable) to install an application such as UnicdeInput, you might consider using a cheat sheet—a plugin reference that contains the desired characters, delivering an easy copy-and-paste workflow.

This is obviously a more time-consuming approach compared with having dedicated keys. A more convenient version of the cheat sheet approach involves web authors taking advantage of their browser’s sidepanel. There are already many browser panels for Opera, Firefox, and Internet Explorer: Edicode offers quick access to rich punctuation via the Latin blocks and the General Punctuation block.

On the Mac, this type of cheat sheet is built in to the operating system—but only if your application is a native Cocoa app. You can determine whether this is the case by clicking the Edit menu. If you have a Special Characters menu option (keyboard shortcut: Option + Command + T) then you’re in business!

Of course, for the one-off lookup, there are plenty of online references including this one that lists the first 65,536 Unicode characters and the numbers that represent them.