Auto Adjust The Line-Height Of Your Text Using Molten Leading

Category: Javascript , Text | June 26, 2014
Author:
Views Total:130 views
Official Page:Go to website
Last Update:June 26, 2014
License:MIT

Preview:

Auto Adjust The Line-Height Of Your Text Using Molten Leading

Description:

Molten Leading is a standalone Javascript library that automatically adjusts the line-height property of your text to make them more readable.

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.
  • Free to use in both commercial and non-commercial projects.
  • Doesn’t require external JavaScript libraries.
  • Weighs only 689 bytes minified and Gzip’ed.
  • Supports multiple instances.

How to use it:

Include the moltenleading.js in the document.

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

Enable the function on where you want to adjust the line height automatically.

moltenLeading("p", {
  minline: 1.2,    // Minimum line-height for the element, numbers (multiplied by the element's font-size)
  maxline: 1.8,    // Maximum line-height for the element, numbers (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
  threshold: 100   // Threshold time used on window resize, milliseconds
});

You Might Be Interested In:


Leave a Reply