Is it possibly to keep vertical rhythm using only css?

Question

I\'m developing a typography oriented wordpress theme[1], and I\'m getting troubles with the in-line images.

I can control every element and adjust it\'s line height

Answer 1

In my opinion a pure css soluition is impossible. Take for instance a table. A table cell has by default a little bit of padding so it's content is readable. You could try and make each table cell exactly the right height, but that will be hard. Also, adding for instance a bottom border somewere will also add to the height of the element, which means you have to reckon with it. I love the way that Compass's vertical rhythm tools help maintain a vertical rhythm, but for inline images and for instance tables I found that pure CSS is lacking. For that reason I wrote a simple jquery plugin that could help with this, find it here: https://github.com/dagomar/rhythm.js

Only drawback is that for inline elements to work, it will need an offset, I haven't figured out yet if that can be automated. The offset you can only find by testing it out, I found that an offset of 6 (default) works the best for baselines from 21-24 pixels, but it may be that font-size has an influence. For now, as a proof of concept I found that it works extremely well. It works also for responsive images (window.resize). Hope this helps.