Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthordigikev
    • CommentTimeMar 24th 2010 edited

    I got really excited about vertical rhythm, and then insued annoyance when in order to keep the rhythm, headings had to be set on multiples of the base fonts line height. The leading would just be all wrong.

    To overcome this I have worked with a developer friend to produce a script which allows sensible line heights for headings and yet allows the paragraphs to step to a beat.

    All this and more in my demo at

    I would like to hear your thoughts, suggestions, improvements.

    • CommentAuthorDaveG
    • CommentTimeMar 27th 2010 edited

    I love the idea. I'm a big fan of vertical rhythm and am often annoyed at how difficult it is to perfect in CSS.

    A couple of things occur to me about the implementation:

    • Doesn't the script technically require you to be using a monospace font in your headings? You precompute the line length for an H1, H2 and so on, but that'll be different if heading has lots of "i"s in it (very short) or "w"s in it (very long).

    • Also, you can probably get away without precomputing all of the heights in the CSS. Presumably you always want a fixed margin above/below your heading, plus whatever it takes to restore visual flow. You should be able to do this in pure JS using '$.offset' and '$.offsetParent'. Of course, there are probably reasons to keep the CSS tweakability as well.

    Those are the only oddities I can think of.

    • CommentAuthordigikev
    • CommentTimeMar 27th 2010
    Thanks for your comments Dave. Technically computing monospace would be a lot easier. The script does work without, but requires fettling with for each width of container a line of text is in. Ideally, I would like the script to work out the algorithm (or average, if this is not possible) so that this can be applied to any width without calculating the number of characters each time and adding these to the variable.

    Your input on the $.offset is intriguing, but how would you add the addition to the margin without an external CSS doc? I will pass your comments on to my dev friend and see what can be done.
    • CommentAuthorDaveG
    • CommentTimeMar 28th 2010 edited

    I had a hack around with this last night. I think you can just traverse from top to bottom on the page and move each paragraph down a bit so its aligns with the grid.

    You already know the heights of the headings, so you shouldn't have to worry about working out how many lines they're split across. The algorithm ought to work with text of all sizes and line heights (similar sizes/heights will match up, different ones will not).

    Various problems arise when you throw nested boxes into the mix - nothing show-stopping, but it imposes further constraints on the order you need to tweak the blocks. It'll take more than an evening's fiddling to get it right.

    My code so far is far from perfect but I've put it on GitHub so you can grab it and mess around with it. The main parts of note are rhythm.js and the inline script block that I added to index.html.

    Hope this helps. Comments and suggestions welcome :)

    PS - I hope you don't mind me reposting your code. I can move it or take it down if required.

    • CommentAuthordigikev
    • CommentTimeMar 28th 2010
    Nice one, I am going to download and have a play around with it later when I get a moment. I have no problem with you reposting the code, you have worked within the terms of the MIT and created a derivative which is really exciting.
    • CommentAuthordigikev
    • CommentTimeApr 3rd 2010
    I like what you have done Dave, much more self contained. I would like to see a version which keeps the margin in em units and adds to the bottom margin rather than the top. Nice work.