Adjusting Text Spacings

Desktop publishing programs have always provided controls that allow you to manipulate the spacing of the text on your page. Recent versions of Word Processing programs have provided the same. Now there are stylesheet commands that allow you to manipulate the way that your text is laid out as well. The following commentary has the stylesheet commands displayed around the affected text to show you how the particular effects can be achieved. Of course if you want the effects to apply to all of the text on your page then you can apply the commands in your stylesheet header or external stylesheet rather than coding them in the individual tags.

Note that Netscape 4 only supports line-height and text-indent.

Not satisfied with the way that the letters in words are laid out? Now you can <span style="letter-spacing: 10px">stretch</span> or <span style="letter-spacing:-2px">squash</span> your text.

Want to adjust the spacing between words? <span style="word-spacing:20px">Well now you can.</span>

<p style="line-height:1.5">Want to adjust the amount of space between lines of text? This too can be done extremely easily using the appropriate stylesheet commands.</p>

<p style="text-indent:50px;margin:0px">You can use stylesheet commands to indent the first line of paragraphs the same as is normally done for printed material but which has previously been difficult in web pages where multiple spaces are ignored. Set the margin to zero if you want to remove the (now unnecessary) blank line between the paragraphs.</p>

<p style="line-height:1.5;text-indent:50px;word-spacing:12px;margin:0px">You can even <span style="letter-spacing:7px">combine</span> the various stylesheet commands all at once to really influence the way that the text on your page is laid out.</p>

Each of these measurements can be done in pixels (px) as illustrated or alternatively can be defined using any of the following alternatives:

If line-height is not qualified then multiples of the normal line height will be assumed. Line height and text indent may also be expressed as percentages of normal line height and window width respectively.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow