Vertical Rhythm and Image Height Compensation

An article by David Brooks on July 24, 2008


A few months back I started working on a project that dealt directly with one of my favorite design issues, creating a vertical rhythm. Many people have written many things about the idea of creating a vertical rhythm, most of it has been amazing and very inspirational. But the one critique that I hear about it is that it’s great in theory but lacks a practical application because of the possibility of variable heights in imagery.

And it’s true, at least on some level anyway. As a photographer as well I realize that often you want a photo cropped in a certain way. If you have your fixed width dimensions figured it may leave you with a bizarre image height that is incompatible with your beautiful vertical rhythm. No matter what static number you use to define your rhythm it doesn’t matter because the next image isn’t necessarily going to match it. Every image is required to be a multiple of your rhythm or some other similarly configured idea. Nevertheless it makes life difficult, and unfortunately it’s not necessarily appropriate to assume that all images on the site are going to fit within a certain set dimension, though they possibly could.

So after a good amount of time cropping images in ways that I didn’t want to crop them and then complaining about how the ones I didn’t crop the same didn’t match the rest… I wrote this script that attempts to correct the vertical rhythm for me. What it does is this:

1. Determine the vertical rhythm of the page. (By default it’s set to base that number from the bottom margin of a paragraph, it’s just what I like to use and doesn’t mean you have to keep it.)

2. Find the actual height of all the images on the page including their top and bottom borders.

3. Go through the images one by one and try to divide that total height by the measurement of our vertical rhythm.

4. If it matches, great, consider it completed. If it doesn’t divide evenly it starts repeatedly adding one to the height until the overall height is evenly divisible by the vertical rhythm. Just in case it was only a pixel or so away from being divisible in the first place, the script repeatedly subtracts one until the overall height is evenly divisible by the vertical rhythm.

5. The script then compares the positively and negatively adjusted numbers and adds to or subtracts from the image’s bottom margin.

The result is a script that should be able to compensate no matter what size the image in question is.

If you would like to see the script in action I have setup a demo page for the project. You can also download the JavaScript file and modify it as you need to for your project. If you want to know more about the workings of that file I made comments throughout so that you can keep track of my thought process. I’m open for suggestions if anyone has any, hopefully you all find this useful.

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.