Character Justification using JQuery

Example of Character Justification plugin

Justification using pure CSS can be achieved by setting the text-align property to “justify”.  This will tell the browser to attempt to line up the words so that left the and right edges of each line are aligned with those above and below.  This effectiveness of this property can be enhanced by inserting hyphens where necessary to maintain the alignment using Hyphenator (here’s an example).

The “text-align: justify” technique is useless when applied to a list or similar column of text where each item or line only has one or two words in it.  For example in a navigation menu.  This is because the spacing that is added to achieve the justification is only added at the word boundaries.  Justification based on characters will be available in CSS3 using the property text-justify with the value “newspaper”.

Example of character justified navigation bar

I had the requirement to build a navigation sidebar with justified text for Caragh’s still unfinished website so rather than wait for CSS3 cross browser support I decided to find a solution. One technique would be to use image replacement and insert images of the properly justified text.  The main drawback of that is it doesn’t easily allow for dynamic content so I decided to try writing a JavaScript solution.  The result is this Character Justification JQuery plugin.  All you need to do is call characterJustify() on whatever JQuery object you want to be justified.  The plugin will then insert the correct letter-spacing so that the letters are evenly spaced and the left and right edges more or less line up.

The text will be distributed to fit within the bounds of the element(s) you called the method on unless you pass an optional integer parameter to set a particular pixel width.  I also added the regular JQuery animation parameters speed, easing and callback so you can also animate the process if you need to.

Examples:

Plugin source

UPDATE: I’ve updated the plugin slightly.  Details here.  I’ve updated the above example animation code.

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

7 Responses to Character Justification using JQuery

  1. Gianni says:

    very good tomaz

  2. Joshu says:

    Is there any way to get this to work on multiple lines, ie working on body text?

  3. Bruno Tacca says:

    Very very nice.
    But is useless to me, i’m needing an image justify plugin, and this plugin dont work with images.

    In static page i can simple justify image using css: text-align:justify, but when i’m getting this content via ajax request, this property don’t work correctly. I’m so confused! hahaha =P

    Nice work.

  4. archetwist says:

    Great stuff! Very useful for some designs. Thanks.

  5. Nikola says:

    Thanx mate.. I suggest you post your update as a fresh post since I didnt find the solution anywhere on the net but here! :D

  6. till says:

    hi tom martin

    thanks for sharing you work.
    unfortunately i cant get it work in a 960 px div.
    is there a hack to get it work?

    thanks. till.


    div {
    width:960px;
    font-family:courier;
    text-transform:uppercase;
    font-weight:bold;
    margin: 0px;
    border:1px solid red;
    }

    THIS IS A TEST WITH A WIDTH OF 960px AND A DIV

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="">