On practicality

As I was writing the first few posts for Breaking Things, I was pain­ful­ly aware that I was doing a frankly ter­rible job of pre­senting certain typo­graph­ical ele­ments. Spe­cifi­cal­ly, I was using com­mon ambi­dex­trous quo­ta­tion marks (type­wri­ter quo­tes) instead of proper Eng­lish cur­ved quotation marks (book quo­tes). Any blogging engine worth its salt will have a so‐called smart quotes feature to pre‐process posts and auto­matic­ally con­vert typewriter quotes to book quotes. Blog­ging engines also bring with them a ple­tho­ra of other features, however, so I made a conscious decision not to use one for Breaking Things precisely because I wanted to start from scratch with a blank canvas and evolve the blog iteratively in step with the progression of my personal reboot. And it was the best decision ever. You have no idea how liberating and empowering it is not to be confined by the restrictions of generic frameworks and libraries or burdened by their layers upon layers of abstractions and their kitchen‐sink approach to features. The downside, of course, is that my fledgling little blog is left without a smart quotes feature. In fact, if you think about it, Breaking Things doesn’t really have any features at all, just content that I’ve lovingly hand‐crafted in HTML and CSS.

Pragmatism and crafts­man­ship are not mutually exclusive.

So, given the ty­po­graph­ically un­sight­ly and un­accept­able status quo and my stub­born re­luct­ance to use an existing blog­ging engine, I had to come up with a dif­ferent so­lu­tion to my typewriter quote in­fest­ation problem.

Since I know how to code, my first ins­tinct was to cook up a little script to convert ambidextrous quotes to curvy quo­tes. Or, perhaps, I could find and use an existing script. Maybe, I could even gut just that one feature out from one of the other blogging engines. After all, there is really no reason to reinvent the wheel unless you absolutely have to. But that would have involved introducing a build stage to my blogging process and I’m very cau­tious about adding any new layers of abstraction to my workflow at this point.

Each layer of abstraction you add to a product or workflow brings with it promises of functionality and pro­duct­iv­ity enhancements but comes at the cost of an add­itional layer of complexity that separates you from whatever it is that you’re build­ing. The key is in knowing when the value of that additional layer of abstraction outweighs the costs. You must be brutal in evaluating this. Make each layer of abstraction justify its raison d'être to you before you commit to it. Don’t reinvent the wheel, but also don’t add unnecessary layers of complexity to your workflow and products either. Through the years, I've realised that while monolithic frame­works and templates can give me a tremendous leg up in getting something rough and ready out of the door as quickly as possible, I usually end up finding it much harder work in the long run to learn their various idio­syn­cra­sies to customise what I’m building precisely and remove spurious features that I don't need and which detract from the simplicity of the result that I covet. Sometimes, it’s more eco­no­mical in the long run to start with a blank slate.

Automation isn’t always the right answer

So, in the spirit of practicality, I decided not to introduce a build step at this stage in the evolution of the blog. Instead, I decided to bake the curly quotes into the text of my articles. When you think about it, that’s what we should be doing any­way. The only reason we don’t use proper quotes when writing on computers is because computer keyboards are relics from the era of the typewriter and haven’t really evol­ved much in the intervening decades.

Ambi­dext­rous quotes were intro­du­ced on type­writers as a space‐sa­ving mea­sure. That they have somehow sur­vived un­chang­ed into the era of digi­tal com­puters is actually rather shocking. We’ve raised several gen­erat­ions of people who have no app­re­cia­tion for proper typographical punc­tua­tion. We should be writing using proper punct­uation as we go and the only reason we are not is a lack of edu­cation combined with the lack of proper tools. The keyboards we have on our com­puters today are stuck in the typographical stone age. So, to fix the problem, I realised that I had to fix the keyboard.

Towards a typographically‐aware keyboard

I’ve been a TextExpander user for a while so my first thought was to use it to map practical keystroke combinations to pro­per punctuation marks. Unfortunately, I could not get it to work reliably enough^*. Un­det­erred, I decided to give a new app called Typinator a shot. And it worked like a charm.

Typinator, like Text Expander, is a macro expansion tool. It automatically replaces abbreviations with their long‐form coun­ter­parts as you type. For my purposes, I mapped easy‐to‐remember key sequences to proper curly quotes.

All the gory details

If you have Typinator, you may download my Typography abbreviation set (.zip, 4KB) and use it freely. Below, you will find details of how it all works.

I decided to use two‐character combinations to stand for single and double curly quotes. Spe­ci­fi­cally, ; + . creates an opening single quote and ' + / creates a closing single quote (also known as an apostrophe). Similarly, ⇧ + ; + . creates an opening double quote and ⇧ + ' + / creates a closing double quote. I chose those particular key combinations because they’re both not likely to occur in everyday writing (to minimize false positives) and since they’re ergonomically placed in relation to each other and lo­ca­ted near the existing ambidextrous quote key on the keyboard to help me take ad­van­tage of existing muscle memory. It’s taken me about a day to get used to using proper curly quotes in my writing. By keeping the process manual, instead of auto­ma­ting a solution to the wrong prob­lem, I’ve also empowered myself to write cor­rect­ly in any app, not just on my blog or in apps that have a smart quotes fea­ture.

Other typographical niceties

In addition to curly quotes, a lot of online writing is littered with typographical faux pas. One of the most common, and a personal pet peeve of mine, is the use of three dots (...) instead of an ellipsis (…). Beyond the cruel inefficiency of using three glyphs where just one will suffice, ellipses are also set differently (notice the wider kerning between the dots in the ellipsis from the previous sentence). So, abandon the three dots, stave off RSI for a little while longer, and use ⌥ + ; to create proper ellipses on Mac.

Another common typo­graph­ical trans­gress­ion guaranteed to leave the more typo­graph­ically‐sensitive among us froth­ing at the mouth is confusing a hyphen‐minus with a hyphen, an en dash, an em dash, a minus sign, or with the figure dash. A hy­phen‐minus (the - key on your keyboard) is the Frankenstein’s mons­ter of the dash‐hyphen world. It is, like ambidextrous quotes, a relic from the days when effi­cien­cy con­cerns governed the design of early typewriter keyboards and the gamut of dash‐like symbols was amalgamated into one glyph to save space. And, like most things that try to do (or be) too many things at once, it is es­sen­tial­ly useless outside of coding and should be avoided.

The proper hyphen, which I’ve mapped to the character sequence - + - in Typinator, is used to create compound‐words‐like‐this. The en dash is used to spe­cify ranges (e.g., 24–36 year olds) and is entered with the ⌥ + - key com­bi­na­tion on Mac. Its better‐endowed cousin, the em dash — which is the length of an uppercase ‘M’, hence the name — is used to denote parenthetical statements — like the one just demonstrated — and is entered by using the ⌥ + ⇧ + - key com­bi­na­tion on Mac. Additionally, the emdash abbreviation in my Typinator set creates an em dash surrounded by hairline spaces for use in HTML. Whatever you do, never, ever, use two hyphen‐minuses (--) to denote an em dash or the flying typography mons­ter will douse you in spaghetti sauce when you least expect it (he’s apparently good friends with the flying spaghetti monster). A minus sign is used for arith­metic (e.g., 46 − 4 = 42) and is mapped to the abbreviation minussign in Typ­ina­tor. Finally, the figure dash is the exact length of a digit in fonts with monospaced numerals and is used when you need a dash in a number. It is not used to specify a range of numbers (use an en dash instead) or to signify subtraction (use a minus sign) but can be used, for example, when writing phone numbers (e.g., 555‒1278). All this isn’t just aesthetic pedantry, the different marks have different semantics. Why should being semantic in your content be any less important than being semantic in your mark‐up?

Yet another boo‐boo is using the letter x when you mean to use the multiplication symbol, ×. I mapped that one to the multiplicationsign abbreviation in Typinator. Notice how much better 2 × 4 = 8 looks, compared to 2 x 4 = 8. There are too many examples to list all of them here but I’ll end with one last pet peeve: please don't use (c) when you mean to use the copyright symbol, ©. You can enter a proper copyright symbol using the ⌥ + g key combination on Mac (notice that the word is ‘copyright’, not ‘copywrite’). And, if you want to enter a trademark sign, the key combination for that is ⌥ + ⇧ + 2, not (tm).

Pragmatic craftsmanship

While I’m being pragmatic about my blogging, this does not mean that I do not care about the quality of the final pro­duct. Quite the contrary, my approach is that of a craftsman, cons­tant­ly tweak­ing and continuously iterating over my work. I’ve made dozens of tiny improve­ments to this blog since launch­ing it just a few days ago. And you probably will not notice most of them, which is as it should be. The best design is invisible.

Pragmatism and craftsmanship are not mutually exclusive. In fact, I would go so far as to argue that the craftsperson, given the demands of her chosen under­taking, must be pragmatic if she is to actually ship the fruits of her labour. Craftsmanship isn’t perfectionism. Care about the quality of your work and labour over the details and yet remain pragmatic in your approach. And before you throw yourself into solving a problem, make sure that the problem you’re solving is the right one.

Design is as much about identifying the correct problems to solve as it is about solving problems. The smart quotes fea­tures in apps are pragmatic and useful hacks that nonetheless solve the wrong problem. The core problem is not ‘how do we convert ambidextrous quotes to book quotes?’ but ‘how do we get people to write using proper punctuation in the first place?’ Solving the wrong problem — or solving the problem at the wrong place — only helps to make us lazy and per­pe­tua­tes the actual problem along with our bad writing habits. The correct place to solve this particular problem is at the keyboard. We must redesign the physical layout of modern keyboards to expose proper punctuation symbols. Barring that, in the short‐term, we can at least evolve current keyboards by using various key‐combination shortcuts to make it easier to write content with proper punctuation from the outset. Evolving a typographical keyboard is a pragmatic solution and one that I hope will help to make me a better craftsperson.

Addendum

Since writing this post, I’ve noticed that the ' + / can be problematic when coding. For example, when entering a path (e.g., '/images/some-image.jpg'), the single‐opening‐quote‐forward‐slash combination will be replaced with a single cur­ly opening quote. Also, some code editors automatically add a clo­sing quotation mark when either a single or double quote is entered and this may interfere with the macro expansion also. To work around this issue, I’ve updated my abbreviations for single and double quotes to the following: ; + ; + . to create an opening single quote, ' + ' + / to create a closing single quote, and shifted versions of the above for opening and closing double quotes. If you don’t code, chances are that this will not affect you. If you do, you can download my updated Typinator abbreviations set for coders (.zip, 4KB).

Return to the table of contents.