Is It Possibly to Keep Vertical Rhythm Using Only CSS

Maintaining Vertical Rhythm on arbitrary images

It occurred to me that it is better to use CSS variables and then read those values from javascript as documented here.

This has the advantages of

1. using the cascade to allow multiple regions of the page to each have their own vertical rhythm.
2. not requiring parsing the content of the ::after psuedo-element as JSON.
   The browsers are apparently inconsistent regarding how the escape embedding quotes in the content attribute.

One downside is that custom attributes are not as widely supported as pseudo elements. This way will break on more browsers. Because it's only cosmetic, I find that acceptable.

const foo = document.getElementsByClassName('foo')[0];const bar = document.getElementsByClassName('bar')[0];const fooStyles = window.getComputedStyle(foo);const barStyles = window.getComputedStyle(bar);const fooVR = fooStyles.getPropertyValue('--vertical-rhythm');const barVR = barStyles.getPropertyValue('--vertical-rhythm');
foo.innerHTML = '--vertical-rhythm: ' + fooVR;bar.innerHTML = '--vertical-rhythm: ' + barVR;

:root {  line-height: 1.5rem;  /* $line-height */  --vertical-rhythm: 3rem;  /* 2 * $line-height */}
.foo {  --vertical-rhythm: 6rem;  /* 4 * $line-height */}

<div class="foo"></div><div class="bar"></div>

vertical rhythm using less

This seems to work. I have checked it against different values using this site Vertical rhythm

Vertical Rhythm Mixin

.font-size(@target-px-size, @context-px-size: @base-font-size-px) {
    .rem(@target-px-size, @context-px-size);
    font-size: @toPx;
    font-size: @toRem;    
}

.rhythm(@target-px-size) {
    .font-size(@target-px-size);
    @result: unit((@base-line-height-px / @target-px-size));
    line-height: @result;
    margin-top: unit(@result, px);
    margin-top: unit(@result, rem);
    margin-bottom: unit(@result, px);
    margin-bottom: unit(@result, rem);
}

.rem(@target-px-size; @context-px-size: @base-font-size-px){
    @ratio: 1 / @context-px-size;
    @result: unit(@target-px-size * @ratio);
    @toPx: unit(@target-px-size, px);
    @toRem: unit(@result, rem);
}

// Usage
@base-font-size-px: 12px;
@base-line-height-px: 24px;

.bacon {    
    .rhythm(24);
}

Vertical rhythm for Twitter's Bootstrap

Since no one has linked to an actual vertical rhythm boilerplate as you suggested, I took the one I use, commented it, and created a github repo for it here https://github.com/jonschlinkert/vertical-rhythm

As it says in the readme, this is a starting point for your own project.

How to make Compass Vertical Rhythm output Rems instead of Ems with px fallback?

For the moment, these updates to Compass remain in the pre-release gem, and the matching documentation isn’t yet available on compass-style.org (not even beta.compass-style.org). To use the new features, install the latest gem (0.13.alpha.4):

gem install compass --pre

With the new gem, the vertical rhythm API is slightly different, mostly in its configurable variables, as per https://github.com/chriseppstein/compass/pull/896. In short, set your base font size and line height, and set the new $rhythm-unit variable to rem:

$base-font-size: 16px;
$base-line-height: 24px;
$rhythm-unit: 'rem';

The $rhythm-unit variable replaces $font-unit, and $relative-font-sizing is now a private, internal thing you don’t need to worry about.

After this, all the normal vertical rhythm mixins will output rems with fallbacks (unless you explicitly set $rem-with-px-fallback to false). Note that the rest of the API remains nearly identical, with the exception of the rhythm mixin, which now has more sensible default arguments. There are a few additions which are detailed in the original pull request.

One thing to keep in mind that the rhythm functions can’t provide pixel fallbacks, since they simply return a value.

Traditional leading and CSS line-height

Alright, this seems to work better than my other solution. It still employs additional <span>s inside block elements. The trick is to set the block element's line-height to 1, and adjust the span's line-height, while also cancelling it out with top and bottom margins. Note that this requires display to be set to inline-block.

However, actually setting margins (so as to make a line-high break between <h1> and <p>) becomes quite difficult and requires some math. So, I guess, trying to use traditional typographic approach to leading is far too time consuming in CSS to be actually employed in developer's work.

Anyway, here's the final code:

<!DOCTYPE html>
<html>
    <head>

        <style type="text/css">

        span.p
            {
            display:inline-block;
            line-height: 32px;
            }

        span.h
            {
            display:inline-block;
            line-height: 64px;
            margin-top: -32px;
            margin-bottom: -32px;
            }

        p
            {
            margin:0;
            font-size: 26px;
            line-height: 1;
            }
        h1
            {
            margin:0;
            font-size: 42px; 
            line-height: 1;
            }
        </style>

    </head>
    <body>

    <h1><span class="h">Molloy</span></h1>
    <p><span class="p">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</span></p>
    <p><span class="p">Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</span></p>
    <h1><span class="h">Lorem Ipsum is simply</span></h1>
    </body>
</html>

---

Related Topics