Automatically adjust line-height based on element width for optimal readability.
Switch branches/tags
Clone or download
#4 Compare This branch is 41 commits ahead of Wilto:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
ie6.html
index.html
moltenleading.js
moltenleading.min.js
readme.md

readme.md

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.
  • Supports "px", "em" and "rem" CSS units.
  • Weighs only 1.17Kb minified and Gzip’ed.
  • Supports multiple instances.

Demo

  • There’s a demo here, try resizing your browser window.

Usage instructions

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

  1. Link files:
<script src="moltenleading.js"></script>
  1. Hook up the plugin:
<!-- Put this right before the </body> closing tag -->
<script>
  moltenLeading("h1");
</script>
  1. Customizable options:
moltenLeading("h1", {
  minline: 1.2,    // Integer: Minimum line-height for the element (multiplied by the element's font-size)
  maxline: 1.8,    // Integer: Maximum line-height for the element (multiplied by the element's font-size)
  minwidth: 320,   // Integer: Minimum element width where the adjustment starts
  maxwidth: 768,   // Integer: Maximum element width where the adjustment stops
  units: "px"      // String: CSS units used for the min & max widths, can be "px", "em" or "rem"
});

Public methods

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

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

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

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).
  • When using em units, keep in mind that ems are relative to the currently specified font-size of the parent element, so the width might not always be what you think it is.
  • The rem units are relative to the <html> element’s font-size instead, so they are a bit easier to grasp.
  • Full credits go to both Wilto who wrote the orinal plugin and to Tim Brown for the original idea.

Possible performance bottlenecks

  • Don’t use CSS transition: all inside Molten Leading enabled containers, will make window.resize performance slower.

Running on localhost

  1. Clone this repo by running git clone git@github.com:viljamis/Molten-Leading.git
  2. If you’re using Mac OS X, open the "Molten-Leading" folder and run python -m SimpleHTTPServer 8000
  3. 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.20 (2014-07-09) - Adds support for px, em and rem units in addition to performance optimization.

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.