Download - Text Properties
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