Introduction

The Align bookmarklet is a little diagnostic tool intended for web designers who use CSS for their layouts. Bookmarklets (also called Favelets) operate much like a bookmark on steroids, rather than taking you to a location, the offer functionality that your browser may not provide.

The bookmarklet itself

Here is the bookmarklet: align

How to use it, Step 1:

First you will want to drag the link to your favorites bar, or bookmark bar, or simply option/right click the link to add it to your bookmarks. The exact operation for doing this will vary by browser, but in Safari it looks like this:

Step 2:

Now that you've got the link in your bookmarks, you can use this functionality on any web page. Go to a page you'd like to test, and click the bookmarklet. A javascript prompt will show up like the one shown below, asking you "Which elements?". In the entry box, type in the element you would like to test, such as "div, p, h1, span" etc.

Step 3:

Next you will be prompted to type in which side you're interested in, type in one of the four following things: top, bottom, left, or right.

The Results

After making those two specifications, the web page you were looking at will be altered. Background images will be added to show how the element type you chose will be aligned. Here is an image of the Web-Graphics homepage with the element div chosen, and the side left specified.

As you can see, an alignment graphic has been added, take a closer look at how it's constructed to see how it could be a helpful diagnosis tool. The alternating white and grey stripes can be counted to see how many pixels off something is from something else. Most importantly, your layout remains undisturbed

The bookmarklet can be used cumulatively on multiple elements (although only one side per element). Below is the same screen shot as above, but with the element p and the side top selected afterwards.