Text PropertiesCSS The Definitive Guide

Chapter 6

Text is the content, and fonts are used to display that content.

By using text properties you can affectthe position of text in relation to therest of the line, superscript it, underlineit and change the capitalization!

The Difference between text and font~

Fonts are the different kinds of typefaces. Each font is a set of letters, numbers, and symbols with a unique visual appearance. All fonts belong to large collections, which describe their general look, such as serif, sans-serif, or monospace. Font collections are made up of families, such as Times and Helvetica. A font family in turn can be broken down into font faces, which are variations on the basic family, such as Times Roman, Times Bold, Helvetica Condensed, Bodoni Italic, and so on.

Fonts

Text simply describes a block of type, like this sentence or the heading of a chapter, regardless of the font in which it is set.

Text

Indenting the first line of a paragraph on a web

page is one of the most sought-after textformatting effects.

P {text-indent: 3em;}

Indenting Text

The opposite effect. The first line hangs outfrom the paragraph. Depends on the negativevalue as to how much.

Indents apply only to the first line of anelement.

Negative indents

Text-alignEffects how the lines of text in an element areAligned with respect to one another.

Values = left, center, right, justify, inherit

Horizontal Alignment

Line-height

A way to increase (or decrease) thevertical space between lines oftext.Line-height controls the leading, whichis the extra space between lines of textabove and beyond the font’s size.

Vertical Alignment

Every element in a line of text generates acontent area, which is determined by the sizeof the font.

Constructing a line

Vertical-alignApplies only to inline elements and replacedelements such as images and form inputs.

Not an inherited property

Values: baseline, sub, super, top, text-top, middle, bottom, text-bottom, <percentage>, <length>

Vertically aligning text

Accepts a positive or negative length Used to modify inter-word spacing The default value of normal is the same as

setting a value to zero (0)

This length is added to the standard space between words.

Word-spacing property

Modifies the space between characters or letters.

Default value is 0

Any length value you enter will increase or decrease the space between letters by that amount.

Letter-spacing

Can increase the emphasis and effect of text you want to emphasize.

Letter-spacing

The value of word-spacing may be influenced by the value of the property text-align.

Spacing and alignment

uppercase |lowercase ~ just as their name in implies and to all characters.

capitalization ~ Capitalizes on the first letter to each word.

none ~ default and leaves text alone

Different user agents have different ways of deciding where words begin and which letters are capitalized.

Text Transformation

None | underline | overline | line-through | blink | inherit

The value of none turns off any decoration

You can combine decorations in a single rule

Text Decoration

Text-decoration is not inherited There is no way to turn off no way to turn

off underlining, overlining or line-through generated by a parent element.

Weird Decorations

At this time not all web browsers support text-shadows.

Obvious default is not to have a drop shadow for the text.

First two lengths determine offset distance of the shadow from the text and the third length defines the “blur radius”

Text Shadows

http://www.w3.org/Style/Examples/007/text-shadow

Let’s look at some examples.

Do you remember that XHTML ignored whitespace between words and lines of text when writing code? It collapses any white space down to a single line.

Affects the user agent’s handling of space, newline, and tab characters within the document source.

Using this property you can affect how a browser treats the whitespace between words and lines of text.

Handling Whitespace

By being explicit you can set the default behavior with the following declaration:

P {white-space: normal;}

Whitespaces…

Setting the white-space to pre ~ whitespace is not ignored.

p {white-space: pre;}The browser will pay attention to extra spaces and even carriage returns.

Setting white-space to pre

Nowrap is the opposite value of the pre value

Prevents text from wrapping within an element except wherever you use a br element.

<p style=“white-space: nowrap;”>

White-spaces ~ nowrap

You can use the whitespace to replace nowrap attribute on tables cells.

td {white-space: nowrap;}<table><tr><td>The contents of this cell are not wrapped. </td><td>neither are the contents for this cell. <</td></tr></table>

White-space nowrap + tables

The effect of these values is to allow authors to better control whitespace handling.

Pre-wrap and pre-line are opposites

Pre-wrap has whites spaces preserved where as pre-line whites spaces collapse and honors new lines.

pre-wrap and pre-line

English reads from left to right, many languages read from right to left.

Values: ltr | rtl | inherit The direction property affects the writing

directions of text in block level elements.

Text direction

Create a Resource Page

A resource page should have links with definitions of resources you have used thus far on your individual web sites.

Please use text properties that were discussed in tonight.

Tonight’s Lab