How to Manipulate Text

When it comes to text, HTML has very limited options. You can change the text color, the text type, text alignment, and not much more. With CSS, we can do a lot more, such as make the text go from right to left, instead of left to right. Let us look at all of the options we have for text when using CSS.

Color

The color attribute does exactly what it names implies, it sets the color of the font. You can set the color using RGB, hexadecimal, or one of the HTML color names.

Direction

The direction attribute will allow you to change the direction of your text. This will allow languages, like Arabic, to be displayed properly in a browser. The values for this attribute can be ltr (left to right) and rtl (right to left). Ltr is the default value if a value is not assigned.

Line-Height

Line height sets the value of the height of the line the text is written on. The only way that I can describe this is think of the lined paper you have to use in school. The distance between the lines would be set with the line height value. The values for this attribute have to be either a number which is multiplied by the font size, a CSS value like 14pt, or a percentage value.

Letter-Spacing

This attribute sets the spacing between the letters in an element. You just have to give the attribute a value with a valid CSS measurement.

Text-Align

To align the text in an element you would use this attribute. You can align the text to the left, the right, center, or justify the text. Justify makes the text look like a newspaper column where the space between the letter will auto adjust to make a column the same width no matter how many characters you have on a line.

Text-Decoration

Text-decoration allow you to do such things as underline the text. Below are some examples of this attribute.

Using the blink attribute is considered unprofessional by most people, this was because in the early days of the web, designers would use the Netscape only blink element and it became very over used and annoying. Because of this most designers consider blinking text unprofessional.

Text-Indent

As the text-indent's name suggest, it sets the indent value of the first line. This can be either a positive or negitive value, and has to use any valid CSS measurement.

Text-Shadow

Text shadow will add a shadow to the text. According to the W3schools, there is not a browser that supports this attribute. When browser do support this attribute you can set the length of the shadow, and the color of it also.

Text-Transform

This attribute will change the case of your text. You can set it to display all text in lower case with the value lowercase, or in all upper case by setting the value to uppercase. The other value that can be used is capitalize. This will make the first letter in each word capitalized.

Unicode-Bidi

Unicode-Bidi is only supported in IE at this time according to the WC3schools website. This attribute is used with direction and the unicode set in the header, determine what way the text is shown on the page. Like the direction attribute, this attribute will display text either left to right or vise versa. There are three values you can set for this attribute they are normal, embed, and bidi-override. Normal and embed will use both the direction, and Unicode values to determine what direction the text will be. Where as the bidi-override, will override the direction and Unicode values. CSS2 will use what ever the Unicode value is set to if the document is coded in HTML 4.0, thus ignoring the unicode-bidi value.

White-Space

The white-space attribute allows you to control the white space in an element. The values that can be set are normal, pre, and nowrap. Normal will display the text like HTML normally will. Pre will treat the text as if it was wrapped in the pre HTML element. Nowrap also works like the HTML nowrap attribute. If your text is longer than the allowed space, then the text will not auto return to the next line.

Word-Spacing

Word-spacing is just like letter-spacing except it sets the white space between words instead of letters.