CSS Text
Eric A. Meyer
Language: English
Pages: 55
ISBN: 9351102661
Format: PDF / Kindle (mobi) / ePub
As a web designer, you probably spend more time working with text than any other element. With this concise guide, you’ll learn CSS3 properties for changing the appearance of text without altering the font face—including horizontal and vertical alignment, text transformation, word and letter spacing, text wrapping, and the direction of text flow.
This book is an excerpt from the upcoming fourth edition of CSS: The Definitive Guide. When you purchase either the print or the ebook edition of CSS Text, you’ll receive a discount on the entire Definitive Guide once it’s released. Why wait, when you can start manipulating text on your pages right away?
• Use properties for indenting and aligning lines of text
• Control the leading between lines of text beyond the font’s size
• Change the amount of space between words and individual characters
• Add underlines, overlines, strike-throughs, shadows, and other effects
• Instruct browsers to prioritize speed, legibility, or geometric precision when rendering text
• Learn how and when to suppress automatic hyphenation
• Determine the direction that text flows, including left-to-right and top-to-bottom
Dreamweaver CC Digital Classroom
Fundamentals of ActionScript 3.0: Develop and Design
underline of its parent.
In Figure 34, the strong element is set to be gray and to have an underline. The gray underline visually “overwrites” the parent’s black underline, so the decoration’s color matches the color of the strong element. Figure 34. Overcoming the default behavior of underlines 30 | Text Properties Text Rendering A recent addition to CSS is text-rendering, which is actually an SVG property that is nevertheless treated as CSS by supporting user agents. It lets authors
a much nicer city than you’ve been led to believe. A historian by training and inclination, he enjoys a good meal whenever he can and considers almost every form of music to be worthwhile. Colophon The animal on the cover of CSS Text is a salmon (Salmonidae family). The cover image is from Dover Pictorial Archive. The cover font is Adobe ITC Gara‐ mond. The text font is Adobe Minion Pro; the heading font is Adobe Myriad Condensed; and the code font is Dalton Maag’s Ubuntu Mono.
in the line, how tall they are, and the size of the parent element’s font. In the middle There’s the value middle, which is usually (but not always) applied to images. It does not have the exact effect you might assume given its name. middle aligns the middle of an inline element’s box with a point that is 0.5ex above the baseline of the parent ele‐ ment, where 1ex is defined relative to the font-size for the parent element. Fig‐ ure 20 shows this in more detail. 18 | Text Properties Figure
to justify the text. CSS does not specify how the spacing should be calculated, so user agents simply fill it in. As usual, the child of an element inherits the computed value of that element. You cannot define a scaling factor for word-spacing or letter-spacing to be inherited in place of Word Spacing and Letter Spacing | 23 the computed value (as is the case with line-height). As a result, you may run into problems such as those shown in Figure 27: p {letter-spacing: 0.25em; font-size:
the blinking effect. (Internet Explorer never had it.) The value none turns off any decoration that might otherwise have been applied to an element. Usually, undecorated text is the default appearance, but not always. For ex‐ ample, links are usually underlined by default. If you want to suppress the underlining of hyperlinks, you can use the following CSS rule to do so: a {text-decoration: none;} If you explicitly turn off link underlining with this sort of rule, the only visual difference