Auto line-height: a jQuery plugin for flexible layouts

Posted
3 June 2007

I’m very proud to present my first jQuery plugin: jquery.autolineheight. In a nutshell, this JavaScript adjusts the line-height of a container (such as a div) in proportion to it’s width, relative to the font size.

Demo of jquery.autolineheight.

This is a rework of a script I wrote a while ago to do the same thing. You can read more about it and its purpose in the original post.

Download

Do what you like with this script. Of course, credits and/or links to ollicle.com are always welcome and encouraging!

Requirements

That original script didn’t require a JavaScript library to work. As a jQuery plugin this version obviously does, but with significant advantages as a result. My code for determining the relative font size has been discarded it favour of another jQuery plugin jQEm. My plugin inherits the ability of Dave Cardwell’s clever code to respond to changes in font size.

Usage

The best thing about packaging a reusable piece of JavaScript as a jQuery plugin is how easy it becomes to reuse it. With jQuery, jQEm and jquery.autolineheight all linked into the HEAD of your HTML page, very little further code is required to assign the behaviour to the desired element or elements in your page.

For example:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jqem.js"></script>
<script type="text/javascript" src="jquery.autolineheight.js"></script>
<script type="text/javascript">
     $(function(){
        $('#flexme').autolineheight();
     });
</script>

Where ‘flexme’ is the id of an element in your page whose contained text is to be fine tuned.

Settings

The above code will adjust the line-height based on a few sensible, easy reading, defaults written into the plugin for convenience. You may adjust these values to your taste and circumstance when you assign the behaviour to an element, for example:

$('#flexme').autolineheight({minWidth:16,minLineHeight:1.2,ratio:.03});

Note the separating commas and the extra set of curly brackets.

minWidth and minLineHeight combine to define the ‘tightest’ end of the scale. These are the default values:

minWidth: 15
minLineHeight: 1.4

If the assigned element has a width less than or equal to the minWidth (in ems) the value of minLineHeight is assigned as the line-height. If the element has a width greater than minWidth the line-height is increased with a multiplier:

ratio: .02

The larger the value of ratio the ‘faster’ the line-height will increase as the element is widened.

Inheriting CSS

It’s worth highlighting that this script will only override the line-height of elements it is explicitly assigned to. Contained elements will only inherit their parent’s line-height if they don’t have a line-height of their own set. For example with this CSS:

body {line-height: 1.5}
p {line-height: 1}

And this HTML, where the autolineheight script has set the line-height of the div to 1

<body>
    <div id="flexme" style="line-height:2">
        <p>Some text</p>
        <p>Some more text</p>
    </div>
</body>

The paragraphs will have a line-height of 1 as set in the CSS. Overruling both the line-height of the body and its parent div. If I was remove the CSS assigning the line-height to the ps they would inherit their line-height value from the next closest parent – in this case the div.

You can apply autolineheight to the ps directly with $('p').autolineheight(); but that is less effecient than having the text elements inherit their line-heights from a containing div.

My decision to set unitless line-heights (rather than using % or px) is best explained by Eric Meyer.

Where from here

I look forward to feedback from people actually using jquery.autolineheight in real projects. In the meantime I’m incubating a few more ideas for plugins that help with the presentation of content in ‘flexible’ layouts and re-reading Functional Javascript once (or twice) more.