Character Justify Plugin

Example of Character Justification plugin

Example of Character Justification plugin

I’ve updated my Character Justify Plugin. I could go into detail but to put it simply I’ve worked to improve the alignment on the right edge particularly when there are spaces between words in the same element.  Previously I was trying to deal with the extra letter spacing caused by multiple words by subtracting an arbitrary percentage from the width that I’d stretch the letters to.  Now I’m replacing the spaces with a character of fixed size (“_”) when calculating the width of the elements.
The example has been updated to show this and I’ve tweaked the animation example to so that the animations on each element don’t get out of sync.

Happy Justifying!

This entry was posted in Development and tagged , , , , , , , , , , , . Bookmark the permalink.

4 Responses to Character Justify Plugin

  1. Pingback: » Blog Archive » Character Justification using JQuery

  2. Nikola says:

    Mate thank you very much for this tutorial.. I added current.css(“line-height”, “90%”); to your js file to achieve the desired result and set some colours etc.. but now the main problem is that the alignment of right edge works only when using Courier font as in your example! WTF? :D



  3. HeyChinaski says:


    Nice design!

    Sorry about the right edge alignment man. I think that’s just the limitation of the technique I’m using, it’s always going to work better on fixed width fonts as the characters will always be the same width. I’ll take a look later tonight if I get a chance but I’m not sure there’s much that can be done.

  4. Nikola says:

    Thanks anyway! Ill be watching your blog if you post a solution :P

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">