Balancing Long Lines in Headings

Image for Balancing Long Lines in Headings

Here we see a page from a new edition of 'eBook Typography' - yet to be released.

InDesign has a feature for paragraph styles; Balance Ragged Lines.

This is a very useful style attribute, because text in headings can look very uncomfortable if left to break naturally.

Unfortunatately there is nothing currently in CSS that gives us the power to balance our lines of text. I was always dissapointed to find that my eBooks did not mirror the settings in InDesign, and I was always resigned to the fact that text would break in a heading and then leave, possibly just one word on the following line.

But then I came across a post on the Adobe Web Platform blog.


What the Adobe team are proposing is a new value to the existing CSS rule: text-wrap. We should be able to set a style like this:

h1 {
text-wrap: balanced;

Currently this is not available to us, howver the Adobe Web Platform team have kindly provided a plugin for jquery that will simulate this, and I have tried this in my eBook on eBook Typography, and it works.

I have also included the jquery plugin on this web site, so you can see it working here.

Here is a Very Long Heading that would normally Wrap in such a way as to be quite Unpleasant.

This time we use the style rule:

h2.balance-text {
text-wrap: balanced;

Here is a Very Long Heading that would normally Wrap in such a way as to be quite Unpleasant.

And the marvellous thing is: we can use this in an ePub for Apple iBooks. Just download the appropriate jquery files and incorporate them into the ePub package. Here are some things you need to be sure not to forget.

How to use Javascript inside your ePub

Download the latest jquery from here. You cannot link to jquery from a web site (this is common practice on websites).

Ditto the file needed for the balance plugin - see link above.

Put these files into a folder in your ePub package and then add these to the manefest file probably called content.opf. Here is an example:

<item id="jquery" href="javascript/jquery-1.6.2.min.js" media-type="text/plain"/> <item id="lettering" href="javascript/jquery.lettering-0.6.1.min.js" media-type="text/plain"/> <item id="fittext" href="javascript/jquery.fittext.js" media-type="text/plain"/> <item id="balancetext" href="javascript/jquery.balancetext.min.js" media-type="text/plain"/>

Also in the .opf file you will need to set the properties of the XHTML files to be scripted like this:

<item id="ebooktype-1" href="ebooktype-1.xhtml" media-type="application/xhtml+xml" properties="scripted"/>

For each of the XHTML files that will use the javascript you need the following in the head of the page:

<script src="javascript/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="javascript/jquery.balancetext.min.js"></script>
<style type="text/css">
/* Apply (proposed) CSS style. Plugin looks for elements with class named "balance-text" */
.balance-text {
text-wrap: balanced;

Posted on 30 Dec around 11am


Commenting is not available in this channel entry.