Vertical Rhythm + Images
An article by July 24, 2008on
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.
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.