I often have trouble aligning text and graphics horizontally on the Web. To help horizontally-challenged designers like myself, Wilson Miner wrote a fantastic guide for building pages on a baseline grid. If you do the math right it works beautifully — but I often find myself tweaking and nudging to get every last element snapped in place. To aid that process, I wrote a simple bookmarklet script that overlays a baseline grid atop everything on the page you’re viewing.

I’m calling it Syncotype. Either install the Safari/Firefox bookmarklet or add one script tag to your page, and the Syncotype box appears in the upper right. Enter your line height and offset from the top of the page in pixels and Syncotype overlays your baseline in red.

Update: Now as a bookmarklet!

You can try it out here.

Installing the Bookmarklet

Install Syncotype as a bookmarklet and you can summon it on any page, any time. Note: Because Syncotype is an external script, it may time-out occassionally. Just click the bookmarklet until it works.

Safari/Firefox
Just drag the below bookmarklet link into your bookmark bar, or right click it and add it to your bookmarks in Firefox:

Syncotype

The One-Line Script

Syncotype isn’t for live sites, it’s for spot-checking your horizontal alignment on a pre-production page. To use it, just add the following script tag to your page:

<script type="text/javascript" src="http://s.robgoodlatte.com/syncotype.js"></script>

To iron out all the bugs and to keep things simple, I’m going to keep it as a hosted external script for now. I will provide a download link for those interested when I am more confident in the script. Feel free to do whatever you’d like with it, I’m putting it into the public domain. I’m not certain if anyone else will find it useful — I’m just throwing it out there.

Browser Support

• Safari 2, 3
• IE 7
• Firefox 1.5+
• Opera 8+

Known Issues

• When Syncotype is active, text and form fields are not selectable on the page. An overlay div is placed over the entire page rather than being set in the background where it could be painted over. Suggestions are welcome on other ways to accomplish this.

Special thanks to Emmett Nicholas for a ton of great code suggestions.
Thanks to Ben Spaulding for suggesting I make a bookmarklet.
Photo by brainsluice under Creative Commons.