jQuery plugin that allows for fluid line-height for web pages with fluid layouts.
Latest commit 94fcbee Feb 6, 2012 Jim Jeffers Updated demo file to be a bit more dramatic so the example would be c…



Created in response to Tim Brown's article Molten Leading: http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/


Select applicable elements with jQuery and pass an amount:

$("#content p").minLineHeight(1.3)

The minimum line height can be supplied in the following ways -

A float: $("#content p").minLineHeight(1.3)

As ems: $("#content p").minLineHeight("1.3rem")

As px: $("#content p").minLineHeight("13px")

If the amount is passed as a float or any units other than px, the script will default to ems. In order for min-line-height to take effect an element must have a min-width, max-width, and default line-height (serves as the max-line-height) specified in CSS. Any element without one of the three properties will simply not get processed.

Why you can't use custom CSS properties to handle this:

Ideally, specifying them min-line-height in a CSS file would be the more manageable, but research found that per the CSS 2.1 mandates browsers to ignore any unrecognized properties:


This means the only way to access a property defined as...

-js-min-line-height: 1.3

...would be by re-requesting the CSS file with an AJAX request and parsing the CSS file in javascript. This wouldn't be effective for a number of performance reasons.