Vertical Rhythm + Images

An article by David Brooks on July 24, 2008


I’m a big fan of vertical rhythm in web design. But I will admit that in the past images have been a big problem because of the potential variation in heights. And it’s not even because of those people who don’t know what they’re doing, sometimes photos need to be cropped in a particular way. If they do have to be a particular height or width it’s possible that they will match either the horizontal or vertical grid but probably not both at the same time.

In CSS all bottom margins are all essentially created equal. You can meticulously set your margining and line-heights but If you have differing image heights nothing is going to save you from your own imagery.

So I wrote a script that looks through your content for images, adds the value of any borders and calculates their heights. It then finds the nearest multiple of the vertical rhythm by continually adding one to the height and dividing by the vertical rhythm (which is set by the bottom margin of a standard paragraph) until it comes out with a clean result. Once the script has the clean number it adjusts the bottom margin of the images as necessary. It’s worth noting that it checks in both the negative and positive directions in order to keep the image as close to the originally specified grid as possible.

If you’d like to see this in action, take a look at the example page. On that page all the images are sized to offset themselves from the vertical rhythm. Because I wanted to use the images as visual dividers I separated them from other elements like paragraphs and lists. However, I have also had success in adjusting images within other elements as long as the elements themselves have a respectable placement in the rhythm themselves. You may, however, want to write some advanced conditions that would only allow the script to align certain imagery. It all depends on your setup, CSS and structure.

Additional Notes

To make the script fully function in Safari I needed to follow Nathan Smith’s example and force the browser to reconsider how and when it loads the images.

I also wrote this script with a reliance on jQuery. In order for this to work you’ll need to include it on your page as well.

So that about wraps it up. Hopefully you will all find this as useful. If you have any suggestions feel free to let me know.

Get articles from me, right in your inbox.

(I promise, no spam.)

Categorised in: ,

When My Daughter Met The Queen

A Photo of David Brooks
About David Brooks

David Brooks is the owner of the small creative studio, Northward Compass, based out of Orlando, Florida. He writes electronic and ambient music as Light The Deep, and fantasy stories about a place called Elerien.

© Copyright 2005 - 2018 David N Brooks. All rights reserved.