Grundlinje fixer

by Kenneth Luplau-Brøgger

HTML

<div class="columns">
    <div>
        <h1>hejsa hejsa hejsahejsa hejsa hejsajsa hejsa</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar sem lorem, sed vulputate odio ornare et. Quisque eleifend neque vitae diam molestie blandit. Nam lacus enim, suscipit ut sapien nec, feugiat gravida nulla. Morbi id nisi neque. Fusce aliquam nibh vitae velit porttitor dapibus. Nullam quis pellentesque velit, id rutrum diam. </p>
        <h1>davs</h1>
        <p>Morbi ullamcorper, ante quis imperdiet pulvinar, diam libero ornare eros, eget pulvinar lorem elit sed neque. Ut vestibulum est vel nulla venenatis, sit amet ullamcorper nisi tristique. Cras viverra purus sit amet mattis ultricies. Donec dapibus odio vitae sagittis dapibus. Nunc nec tristique est. Donec nec fringilla odio. Etiam luctus justo id congue posuere. Morbi eros ligula, euismod sit amet nisi non, tincidunt laoreet purus. Morbi ullamcorper odio quis libero aliquet, eget facilisis ipsum commodo.</p>
        <h1>hejsa hejsa hejsahejsa hejsa hejsajsa hejsa</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar sem lorem, sed vulputate odio ornare et. Quisque eleifend neque vitae diam molestie blandit. Nam lacus enim, suscipit ut sapien nec, feugiat gravida nulla. Morbi id nisi neque. Fusce aliquam nibh vitae velit porttitor dapibus. Nullam quis pellentesque velit, id rutrum diam. </p>
        <h1>davs</h1>
        <p>Morbi ullamcorper, ante quis imperdiet pulvinar, diam libero ornare eros, eget pulvinar lorem elit sed neque. Ut vestibulum est vel nulla venenatis, sit amet ullamcorper nisi tristique. Cras viverra purus sit amet mattis ultricies. Donec dapibus odio vitae sagittis dapibus. Nunc nec tristique est. Donec nec fringilla odio. Etiam luctus justo id congue posuere. Morbi eros ligula, euismod sit amet nisi non, tincidunt laoreet purus. Morbi ullamcorper odio quis libero aliquet, eget facilisis ipsum commodo.</p>
    </div>
    
   ...

SCSS

body {
    line-height: 22px;   
}

p {
    margin: 0;
    
    & + p {
        margin-top: 22px;
    }
}

h1 {
    margin: 0;
    font-size: 30px;
    line-height: 40px;
}

.columns {
    overflow: hidden;

    > div {
        float: left;
        width: 50%;
    }
}

JavaScript

var grundlinjeFixer = function() {
    
    
    function headlineCalculate(bodyLineHeight, headlineLineHeight, lineCount) {
        var totalMargin = (bodyLineHeight * (lineCount + 1)) - (headlineLineHeight * lineCount);
        
        if (totalMargin < 0) {
            totalMargin += bodyLineHeight;
        }
        
        //alert(bodyLineHeight + " " + headlineLineHeight + " " + lineCount);
        
        var topMargin = parseInt(totalMargin * 0.66, 10);
        var bottomMargin = totalMargin-topMargin;
        
        return {
            marginTop: topMargin,
            marginBottom: bottomMargin
        }
    }
    
    $("h1").each(function() {
        var $headline = $(this);
        var lineCount = parseInt($headline.height()/40, 10);
        
        $headline.css(headlineCalculate(22, 40, lineCount));
    
    });
    
}

grundlinjeFixer();