demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter.

featured articles

popular favourites

Rich Web Typography With Mac OS X Keyboard Shortcuts

In previous articles on writing for the web I’ve talked about workflow for body copy, emphasizing the use of Microsoft Word (or any other intelligent word processor) for both basic proofing and the automatic creation of “smart” typography in text: the generation of curly quotes and apostrophes, em and en dashes, etc.

While this would continue to be my suggested best practice, there are times when you will only need to insert a small amount of text into a web page – correcting a paragraph in an editing tool, for example, or making a few content changes in a CMS – during which using a word processor is unrealistic. If you still want to retain rich typography in what you type, what’s the solution?

Character Description Keyboard Shortcut
(ellipsis) Option + ;
(em dash) Option + Shift + -
(curly left single quote) Option + ]
(curly right single quote) Option + Shift + ]
(curly left double quote) Option + [
(curly right double quote) Option + Shift + [

On the Mac side, the answer is easy: use keyboard shortcuts. A few of the most common, and useful, are shown in the first table.

As you can see, there are some odd keyboard inconsistencies for single and double smart quotes. Rather than sticking with the default (and often typing the wrong form of quotation by mistake), I prefer to remap the keyboard bindings, using a tiny file first suggested by Don Reese:

Place the following text, saved as DefaultKeyBinding.dict, in /Users/<name>/Library/KeyBindings/ on your Mac:

  1. {    
  2.       "~[" = ("insertText:", "‘");   
  3.       "~]" = ("insertText:", "’");
  4.       "~{" = ("insertText:", "“");
  5.       "~}" = ("insertText:", "”");
  6. }

You will need to quit and restart any applications before using the new mappings, which now become:

Character Keyboard Shortcut
Option + [
Option + ]
Option + Shift + [
Option + Shift + ]

You must be signed up in order to leave comments.

web developer guide

featured comment

by Aisling Brock in New Business Card Design

what i'm reading

A Feast for Crows: A Song of Ice and Fire: Book Four
A Feast for Crows: A Song of Ice and Fire: Book Four

what i'm watching

Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]
Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]

what i'm playing

Borderlands
Borderlands

what i'm hearing

Planets
Planets

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.