blog.gkaindl.com

Mac Tip: Checking alignment everywhere

Like once in a while, I had a pretty good idea today. While I was doing some adjustments to this blog’s css file, I was looking for a quick way to check wether two elements are aligned horizontally or vertically on the screen. I needed some sort of ruler.

However, on MacOS X, you can actually abuse the screenshot function to achieve just that very easily and flexibly: Just press Shift+Command+4, and the mouse cursor will change into a cross-hairs. When you click somewhere on the screen now and hold the mouse button down, you can move a selection rectangle around the screen (if you let the button go, MacOS X will snap a screenshot of the area inside the rectangle and save it to the Desktop).

This feature can be abused to check elements for proper alignment, too, and it works in every application, be it a web browser, Interface Builder or whatever else. Just invoke the screenshot function by hitting Shift+Command+4, use the selection rectangle’s borders as a ruler to check your elements for alignment, then hit Esc to make the selection rectangle disappear without taking a screenshot.

Maybe this is already an old hat, but I just discovered it today and find it pretty useful for web design and other layout-involved tasks.

Disclaimer: I’ve tested this on MacOS X 10.4 (Tiger) only, I remember that the screenshot feature worked differently in Panther, but my memory fails me on the details.