Hypergurl Controlling Text Spacing and Alignment.
Word Spacing. Letter Spacing.
Overlapping Text using CSS.





Handy Tip: Following online tutorials is often one of the best ways for you to learn how to create a website. In this tutorial you will learn how to contol text spacing and alignment using CSS.

CSS Tutorial #7

Controlling text spacing and text alignment using CSS.

Cascading Stylesheets allows you to control the spacing between words and the spacing between individual characters.

Word-spacing

Example code ...
<STYLE TYPE="text/css">
<!--
H2 { word-spacing: 3pt }
-->
</STYLE>

you can add additional space between words with the word-spacing property. The value you specify will be added to whatever default value the browser already uses.

Word spacing is not supported by most browsers.

Letter-spacing.
Example code...
<STYLE TYPE="text/css">
<!--
H2 { letter-spacing: 8px }
-->
</STYLE>


Look at this example


Letter-spacing affects the kerning between charactersand is similar to word-spacing. Values are added to the default browser spacing. Not supported by all browsers. If you can see the example you must be using IE4+.

Spacing Between Lines

Example code...
<STYLE TYPE="text/css">
<!--
B { line-height: 18pt }
-->
</STYLE>

The term for the spacing between lines is leading. Using line-height you can achieve control over the vertical spacing between lines of text. You can make them further apart than normal or closer together.

You can overlap text if the spacing you use is small enough.


Overlapping

My Text as an example!


Netscape and IE will see the line height differently and variations may occur.

Whatever value you use is the amount of space between the baselines of two adjacent lines of text (the baseline is what characters without descenders - "x" but not "y," for example - sit on).
I just used 18pt in this paragraph for example. You may have noticed the line spacing is slightly larger than normal.

The value that you use will replace the default browser value. Netscape and IE add the line-height value before the line. If you specify a value of 18px, then the browsers will display the first line of text 18 pixels down.

There are three different ways to give a value to line-height: ..
number
, length unit and percentage.

Leading or line-spacing by Number

Example code ....
<STYLE TYPE="text/css">
<!--
B { font-size: 12pt; line-height: 2 }
-->
</STYLE>

Specifying line-height with a number will cause the browser to use font-size to obtain the leading: The browser will multiply the font-size by the number. So in the above example, the font size is 12 which makes the line-height 24 points.

Leading by Length Unit

Example code ...
<STYLE TYPE="text/css">
<!--
B { font-size: 12pt; line-height: 11pt }
-->
</STYLE>

You can define line-height by using any of the length units. (em and pt are most commonly used).

Leading by Percentage

Example code .....
<STYLE TYPE="text/css">
<!--
B { font-size: 10pt; line-height: 180% }
-->
</STYLE>

Percentage values can be used to control line height.
In the above example, the leading is 180% of 10 points = 18 points.

Next CSS tutorial ... Aligning and Indenting Text.

 

 
Search Site
Custom Search





Site design copyright 2000 - 2013 Tanya Puntti Hypergurl.com