samuel.bowles.es

Syncotype-Alt has been updated. Read more here.

I’ve always been a fan of highly rational design. I suppose it appeals to my view of design as primarily serving communication. Because of this I have followed closely the writings of Khoi Vinh, Mark Boulton, Cameron Moll, and was inspired by Wilson Miner’s article in A List Apart titled, “Setting Type on the Web to a Baseline Grid”.

So when Rob Goodlatte recently released an incredibly useful tool for checking your site’s “vertical rhythm” I was only disappointed I hadn’t had it a few weeks earlier as I was putting the finishing touches on this site’s redesign which employs a grid system of it’s own.

Despite how useful (and well implemented) the tool was it didn’t take long for me to come up with a wish-list for how it could be even better. This led me to make some modifications and I am making them available here as Syncotype-Alt a fork from the official version of Syncotype. Like Rob’s original script I am publishing all these changes directly to the public domain. Feel free to use them however you like. And, Rob, if you would like to incorporate them into the official version - feel free to do that as well.

Here are the improvements:

• Huge speed improvements (this was one of my primary complaints)*
• Everything is done in javascript/html/css with no external images*
• No effects (fading in/out) are used.*
• Fixes an issue where Syncotype’s window.onload would override an existing onload handler.*
• The overlay lines no longer disable the content.*
• The control box now stays hidden until a special #anchor is added to the URL.
• Added ability to make changes and reload without direct interaction.

Syncotype-Alt is based on a code rewrite done by Emmett Nicholas which provides all the bug fixes and features marked above with an asterisk(*). I made a couple changes to Emmett’s code to improve the look of the control cox as well as fix a css issue. Then I added the last two features.

How To Use Syncotype-Alt

Just like Rob’s official version you can use Syncotype-Alt as either a bookmarklet or as a one-line script. The primary improvements in the bookmarklet are speed related while the one-line script is a more significant departure.

The One-Line Script

I would ask that you download Syncotype-Alt and place it on your own server. Once you have it in place you can add the following line to your page:

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

On any page that includes this line you can now:

• Add “#syncotype” to the end of URL to see the control box.

• Add “#syncotype-18” to activate the grid without user-interaction using a baseline grid of 18 pixels and an offset of 0 pixels.

• Add “#syncotype-18-5” to activate the grid without user-interaction using a baseline grid of 18 pixels and an offset of 5 pixels.

This allows you to use Syncotype-Alt on a live site to line something up or make a small change without bothering your visitors. The second two options allow you to make changes and reload a page that you are working on without need to interact directly with the control box each time.

The Bookmarklet

To use Rob’s bookmarklet with Syncotype-Alt grab the bookmarklet from Rob’s Syncotype page. Then edit the address of his bookmarklet changing the part that says “http://s.robgoodlatte.com/syncotype.js” to point to your copy of Syncotype-Alt.

And you’re off with a faster, fuller featured Syncotype. I hope you find it useful and many thanks again to both Rob Goodlatte and Emmett Nicholas for all their hard work creating such a great tool.