Cascading Style Sheets Text Control Chapter 4 Tracking

Cascading Style Sheets Text Control Chapter 4

Tracking • Amount of space between words and letters (kerning = space between letters, usually pair-wise). CSS doesn't use these terms. • Helps to improve readability

letter-spacing • length value • such as. 2 em; 8 px; • normal • letter-spacing : . 3 em; this adds. 3 em to normal spacing (so approx = 1. 3 em) • Positive values add more space; negative values close up the space

word-spacing • • • Changes the spacing between words length value normal word-spacing: 8 px; Like letter-spacing, a positive value increases white space and a negative value lessens space.

line-height • Used to adjust the spacing between lines • Use percent or ems: line-height: 100%; line-height: 1. 5 em; • a number which is then multiplied by the font size to get the spacing • A length value (such as line-height: 24 px; ) • normal • line-height : 2. 0; or line-height: 200% will double space. • Often combine with font-size: font: 12 px/14 px serif;

Setting Text Case • text-transform: – – small-caps (uppercase, the first letter is larger) uppercase lowercase none • text-shadow (in CSS 3)

Text Alignment-Horizontal • text-align: • left • right • center • justify

Text Alignment - Vertical • vertical-align: • super (used for superscripting) • sub (used for subscripting) • baseline (natural state) • relative value – sets the alignment relative to the parent –top, middle, bottom, text-top and text-bottom • percentage – raises or lowers the baseline proportional to the parent

Paragraph Indentation • text-indent – length value e. g. text-indent: 2 em; – percentage (proportionate to the paragraph’s width)

Controlling White Space • white-space: • pre – which preserves the multiple line settings • nowrap – Prevents line wrapping without a break tag <br/> • normal

Text Decoration • Used for emphasis • text-decoration: – underline – overline – line-through – none (no link for <a href=>

Text direction • For non-Western languages direction: