Text Properties

1. Text Properties CSS The Definitive Guide Chapter 6

3. The Difference between text and font~ • Textis the content, and fonts are used to display that content. By using text properties you can affect the position of text in relation to the rest of the line, superscript it, underline it and change the capitalization!

4. Fonts • 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.

5. Text • 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.

6. Indenting Text Indenting the first line of a paragraph on a web page is one of the most sought-after text formatting effects. P {text-indent: 3em;}

7. Negative indents The opposite effect. The first line hangs out from the paragraph. Depends on the negative value as to how much. Indents apply only to the first line of an element.

8. Horizontal Alignment Text-align Effects how the lines of text in an element are Aligned with respect to one another. Values = left, center, right, justify, inherit

9. Vertical Alignment Line-height A way to increase (or decrease) the vertical space between lines of text. Line-height controls the leading, which is the extra space between lines of text above and beyond the font’s size.

10. Constructing a line Every element in a line of text generates a content area, which is determined by the size of the font.

13. Vertically aligning text Vertical-align Applies only to inline elements and replaced elements such as images and form inputs. Not an inherited property Values: baseline, sub, super, top, text-top, middle, bottom, text-bottom, <percentage>, <length>

17. Word-spacing property • 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.

18. Letter-spacing • 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.

19. Letter-spacing • Can increase the emphasis and effect of text you want to emphasize.

20. Spacing and alignment • The value of word-spacing may be influenced by the value of the property text-align.

21. Text Transformation • 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.

22. Text Decoration • None | underline | overline | line-through | blink | inherit • The value of none turns off any decoration • You can combine decorations in a single rule

23. Weird Decorations • 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.

24. Text Shadows • 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”

25. http://www.w3.org/Style/Examples/007/text-shadow Let’s look at some examples.

26. Handling Whitespace 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.

27. Whitespaces… • By being explicit you can set the default behavior with the following declaration: P {white-space: normal;}

28. Setting white-space to pre • 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.

29. White-spaces ~ nowrap • 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;”>

30. White-space nowrap + tables • 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>

31. pre-wrap and pre-line • 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.

32. Text direction • 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.

33. Tonight’s Lab • 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.