Software, your way.
burger menu icon
WillMaster

WillMaster > LibraryWeb Content Preparation

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

Text Justification Tricks

To justify a block of text (line up both the left edge and the right edge), use the CSS text-align:justify; declaration. Example:

I picked a wonderful-smelling ripe peach from the bowl and meandered outside to the pool. Sitting on the edge, feet dangling in the water, I thoroughly enjoyed that tasty fruit.

Here is the format for the above example:

<p style="text-align:justify;">(your text)</p>

That is the usual way text is justified. Yet, there are a couple tricks I will reveal here.

Notice how the last line of the above example paragraph is not justified to the right edge of the block of text? Well, that can be fixed with the CSS text-align-last:justify; declaration. Here is the example with the last line also justified:

I picked a wonderful-smelling ripe peach from the bowl and meandered outside to the pool. Sitting on the edge, feet dangling in the water, I thoroughly enjoyed that tasty fruit.

Here is the format for that second example:

<p style="text-align:justify; text-align-last:justify;">(your text)</p>

Generally, for the English language at least, line justification is accomplished by adjusting the space between words.

For some situations, justifying lines by adjusting the space between letters instead of between words may be preferred. Yes, that can be done. Use the CSS text-justify:inter-character; declaration. Here is an example of inter-character justification:

I picked a wonderful-smelling ripe peach from the bowl and meandered outside to the pool. Sitting on the edge, feet dangling in the water, I thoroughly enjoyed that tasty fruit.

Here is the format for the inter-character justification example:

<p style="text-align:justify; text-justify:inter-character;">(your text)</p>

And, if you wish to also justify the last line, include the earlier-mentioned CSS text-align-last:justify; property:

I picked a wonderful-smelling ripe peach from the bowl and meandered outside to the pool. Sitting on the edge, feet dangling in the water, I thoroughly enjoyed that tasty fruit.

Here is the format for the second inter-character justification example:

<p style="text-align:justify; text-justify:inter-character; text-align-last:justify;">(your text)</p>

Notice that in every example, the CSS text-align:justify; declaration is present. The text-align-last property and the text-justify property modify, not replace, what the text-align:justify; declaration does.

You now have tools to justify text content in ways a simple text-align:justify; won't accomplish all by itself.

(This content first appeared in Possibilities newsletter.)

Will Bontrager

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC