Baseline Grid Script

As I’ve been working on the comatose theme, I’ve been doing my homework and some research into typesetting and vertical rhythm (http://24ways.org/2006/compose-to-a-vertical-rhythm and http://www.alistapart.com/articles/settingtypeontheweb/). Similar to how a lined piece of paper works, I want to get the styling of my content to line up as closely as I can to those lines, in most cases. To do that, I went looking for something that would overlay a simple, custom spaced ‘lined piece of paper’ if you will over my site.

For once, I wasn’t able to find something suitable for what I wanted. Annoyingly, almost all the solutions I could find were some variation of ‘make a grid image in photoshop and tile it on an overlay’. While quaint, I wanted something I could easily tweak the baselines on without making several different images. So, my quest resulted in a little script that uses HTML5 canvas drawing and jQuery to build up a baseline grid, a little magic to figure out the baseline and font size, and a button easily switch it on or off for whatever site its put into. I’m considering turning it into a chrome plug in at some point to allow me to use it on any site, but for now you can use it as is.

For your perusal and tweaking pleasure:

http://gist.github.com/1270673#file_type_setter.js

To use, include the following lines in the header of your html, make sure jQuery is imported somewhere before this:

<script src=”typesetter.js” type=”text/javascript”></script>