Molten Leading (plain JS version)

Manually adjusting line-height for optimum readability across a bunch of media queries is kind of a pain. With Molten Leading you can set a minimum width at which the adjustment starts, a maximum element width where it stops, and a minimum and maximum line height to adjust through.

All the work here is based on @Wilto’s Molten-Leading jQuery version of the plugin.

Features:

Automatically adjust line-height based on element width for optimal readability.
Works in all major desktop and mobile browsers, including IE 6 and up.
Uses requestAnimationFrame for the best possible performance.
Free to use in both commercial and non-commercial projects.
Doesn’t require external JavaScript libraries.
Weighs only 837 bytes minified and Gzip’ed.
Supports multiple instances.

Usage instructions

Following the steps below you should be able to get everything up and running.

Link files:

<script src="moltenleading.js"></script>

Hook up the plugin:

<!-- Put this right before the </body> closing tag -->
<script>
  moltenLeading("h1");
</script>

Customizable options:

moltenLeading("h1", {
  minline: 1.2,    // Minimum line-height for the element, number (multiplied by the element's font-size)
  maxline: 1.8,    // Maximum line-height for the element, number (multiplied by the element's font-size)
  minwidth: 320,   // Minimum element width where the adjustment starts, pixels
  maxwidth: 1024   // Maximum element width where the adjustment stops, pixels
});

Public methods

There’s currently one public method, update(). This allows you to manually call Molten Leading’s update method that calculates and updates the line-height of the specified element. Example of the usage:

var myLeading = moltenLeading("h1", {
  minline: 1.2,
  maxline: 1.8
});

// Then somewhere later on:
myLeading.update();

Notes

Tested to be working all the way down to IE6. side note: if you need to support IE6 & 7 you’re gonna have to use simple "tag selectors," since the plugin uses getElementsByTagName as a fallback if querySelector isn’t supported.
Built progressive enhancement in mind, so the plugin will silently fail when a browser doesn’t support certain selector (only IE6 & 7).
There’s a demo here.
Full credits go to both Wilto who wrote the orinal plugin and to Tim Brown for the original idea.

Running on localhost

Clone this repo by running git clone git@github.com:viljamis/Molten-Leading.git
If you’re using Mac OS X, open the "Molten-Leading" folder and run python -m SimpleHTTPServer 8000
Done! Now view the project at http://localhost:8000

Tested on the following platforms

iOS 4.2.1+
Android 2.3+
Windows Phone 7.5+
Blackberry 7.0+
Blackberry Tablet 2.0+
Jolla
Firefox Phone
Kindle 3.3+
Symbian Belle
Symbian S40 Asha
webOS 2.0+
Windows XP
Windows 7
Mac OS X

Changelog

1.10 (2014-06-26) - Performance improvements. Handles debouncing of events now via requestAnimationFrame, which removes the need for the previous threshold setting. Adds also public methods.

1.03 (2014-06-24) - Fixes debouncing of events and optimizes performance (adds also an option to control the debounce timing).

1.02 (2014-06-21) - Adds minified version.

1.01 (2014-06-21) - Removes unnecessary code.

1.00 (2014-06-19) - First release.

zethussuen / Molten-Leading