jQuery Plugin To Make Your Headlines Have The Same Width - blocktext.js

blocktext.js is a dead simple jQuery script that calculates and sets the letter-spacing of the second headline based on the width of the first one. Useful for creating neat headlines for your website.

How to use it:

1. Include the latest version of jQuery Javascript library in your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Wrap your headings into a container with CSS class of 'blocktext'.

<div id="blocktext">
  <h1>jQuery Script Net</h1>
  <h2>Free jQuery Plugins</h2>
</div>

3. Calculate and set the letter-spacing of h2 to match the width of h1

function blockText() {
    var h2, w;
    w = $('#blocktext').find('h1').width();
    h2 = $('#blocktext').find('h2');

    // calc the desired spacing
    var len = h2.text().length;
    var diff = w - h2.width();
    h2.css("letter-spacing", (diff/(len - 1)) + "px");
}
blockText();

About Author:

Author: David Condrey

Website: https://github.com/dcondrey/blocktext.js

---

This awesome jQuery plugin is developed by dcondrey. For more Advanced Usages, please check the demo page or visit the official website.