Markdown and web typography

As a gen­eral rule, I swore years ago to stay as far away from web design and web devel­op­ment as at all pos­si­ble. I still believe that this is one of the fun­da­men­tal rules of hap­pi­ness, and I haven’t regret­ted it, but for once, I was actu­ally impressed (rather than depressed, which is what web devel­op­ment usu­ally makes me feel like) with a few pieces of web design, and so I decided to make an excep­tion and talk about it for a moment.

After launch­ing this blog ear­lier today, I spent a bit of time research­ing how to get a more intu­itive syn­tax for for­mat­ting my posts. I’m not really a fan of “rich text” text edi­tors like the one Word­Press uses by default (luck­ily it can be dis­abled). It offers lim­ited con­trol, is awk­ward to use, and just doesn’t lend itself to well-formatted posts.

So I decided to look for alternatives.

One source of inspi­ra­tion is obvi­ously LaTeX, which just does a ton of for­mat­ting auto­mat­i­cally — con­vert­ing quotes and adjust­ing spac­ing, hyphen­ation rules and a bunch of other fancy fea­tures. It also auto­mat­i­cally con­verts mul­ti­ple dashes to their typo­graphic equiv­a­lents — a sin­gle dash is just ren­dered as a minus, two of them (--) as an en-dash, and three (---) as an em-dash.

I’ve also been very impressed with the for­mat­ting syn­tax used on StackOverflow.com for its sim­plic­ity and ease of use, and I hap­pen to know they use Mark­down to achieve it.

So those were things I went look­ing for in the Word­Press plu­gin jun­gle, and those are pretty much what I came back with.

The wp-typography plu­gin takes care of much of the gen­eral typo­graphic for­mat­ting, includ­ing hyphen­ation, con­vert­ing sin­gle and dou­ble quotes, and even guess­ing at the cor­rect type of dashes (so a - between words is ren­dered as an em-dash, exactly as it should be).

And the PHP Mark­down Extra plu­gin did the rest, giv­ing me con­trol over the for­mat­ting. With the Mark­down plu­gin, I can for­mat text freely with­out hav­ing to mess around with but­tons above the edi­tor textbox, and with­out hav­ing to use the “Visual” view which I’ve never trusted.

Instead, *text sur­rounded by aster­isks* is auto­mat­i­cally empha­sised and **dou­ble aster­isks** becomes bolded.

Block quotes are writ­ten the way email replies typ­i­cally did it: Start­ing each line with a >, so this:

> Lorem ipsum dolor sit amet, con­sectetuer adip­isc­ing elit, sed diam non­ummy nibh euis­mod tin­cidunt ut laoreet dolore magna
> ali­quam erat volut­pat. Ut wisi enim ad minim veniam, quis nos­trud exerci tation ullam­cor­per sus­cipit lobor­tis nisl ut aliquip ex
> ea com­modo consequat

ends up look­ing like this:

Lorem ipsum dolor sit amet, con­sectetuer adip­isc­ing elit, sed diam non­ummy nibh euis­mod tin­cidunt ut laoreet dolore magna ali­quam erat volut­pat. Ut wisi enim ad minim veniam, quis nos­trud exerci tation ullam­cor­per sus­cipit lobor­tis nisl ut aliquip ex ea com­modo consequat

Since I’m likely to end up post­ing quite a bit of code snip­pets here, it’s worth men­tion­ing the lovely sim­ple syn­tax for that as well. Inline code is sim­ply sur­rounded by back­ticks (‘), so ‘sqrt(42.0f);‘ ends up look­ing like this: sqrt(42.0f);.

Block code can be done either by start­ing and end­ing the block with a line with three tilde characters:

~~~  
int foo() {  
  return 42;  
}  
~~~  

Or by start­ing each line with 4 or more spaces:

    int foo() {  
      return 42;  
    }  

and ends up look­ing like this:

int foo() {
  return 42;
}

Lists can be cre­ated just by start­ing each line with a dash:

- a
 – b
 – c

Will look like:

• a
• b
• c

And links can be cre­ated like this:

[this is a link](http://google.com)

and the result: this is a link

Hor­i­zon­tal rules can be placed just by writ­ing three aster­isks on a line by themselves:

***

ends up look­ing like

---

The over­all effect is quite sim­ply that the raw unfor­mat­ted text still looks per­fectly read­able. It looks much like what you’d see in ASCII-only emails. And that I can for­mat my posts eas­ily and the end result actu­ally looks nice!

If you see any badly for­mat­ted text on this site, you can now rest safe in the knowl­edge that it’s just me being bad at typog­ra­phy and lay­out. It’s my fault, and mine alone. The Word­Press WYSIWYG edi­tor is no longer an issue.

So a big thank you to the devel­op­ers of those two plu­g­ins for mak­ing my blog posts look a hell of a lot nicer than they would if it’d been left to Word­Press alone.

Tags: formatting, typography, web-design

Meta, Programming | RSS 2.0 | Respond | Trackback |