CSS Text

Notes from "CSS Text" Eric A. Meyer

Indenting element

text-indent
Values:
<length> | <percentage> | inherit

you can indent the first line of any block-level element by a given length —but mostly is used to intend the first line of paragraph (you can use px, em or % - % refers to the parent element or even give length negative value)
text-indent is inherited !important in case of using % - computed values and not declared values are inherited

text-align
CSS 2.1 values: left | center | right | justify | inherit
CSS3 values: [ [ start | end | left | right | center ] || <string> ] | justify | match-parent | start end | inherit

start - means that the text is aligned to the start edge of its line box (left edge in left-to-right languages, right edge in right-to-left languages, top or bottom in vertical languages) - similar with end {text-align: start end;} is not supported yet
Justified text - It's the browser and not CSS that decides how justified text is stretched to fill the space - so text might look different in different browsers with i.e. extra space between words.

String alignment

problem with supporting by browsers
By using {text-align: ",";} all prices below will be align with a ",":

12,99
5,20
134,56

Parent matching

not supported by browsers
similar to inherit

It enables you to align last line of text regardless to the alignment of other lines. It will also work with the last line before a line break <br>
If the first line is also the last line text-align will be overide with text-align-last.
If {text-align: start end;} text-align-last will be ignored

Vertical Alignment

line-height

Values:
<length> | <percentage> | <number> | normal | inherit

distance between the baselines of lines of text
line-height: normal Even though values can be different depending on browser they are mostly 1.2 times the size of the font.
Instead of px you can use em, ex, and percentage - they are calculated with respect to the font-size of the element.
!important line-height values inherit from the parent element as computed not from the child but from the parent - SO - If you use a number i.e. {line-height: 1;} scaling factor will be an inherited value and not a computed one

leading: difference between the value of line-height and the size of the font

If your font is 12px and line-height is 16px the 4px of difference is divided into 2 and each 2px are added on the top and bottom of the font line (content area) creating an inline box. Line box is a box which top and bottom line is equal to top and bottom lines of the biggest inline box from all existing in the line.

Vertically Aligning Text

Applies to inline elements only and it's not inherited (you can use to for element within table cells).
Browsers automatically align baseline, so if the element doesn't have a baseline (i.e. img) than the bottom is aligned with the parent baseline.
{vertical-align: sub;} the baseline/bottom is lowered with respect to its parent’s baseline, but since this distance is not defined it will look different in different browsers.
{vertical-align: super;} just like sub only it raises an element instead of lowering it
{vertical-align: bottom;} text is inline to the bottom of the line box while in {vertical-align: text-bottom;} text is inline to the bottom of the text line
middle: "aligns the middle of an inline element’s box with a point that is 0.5ex above the baseline of the parent element, where 1ex (mostly = 0.5em) is defined relative to the font-size for the parent element"
vertical-align: middle - if you use %, value will be calculated on a line-height of the element, not its parent
vertical-align length - {vertical-align: 2px;} will raise element up 2 pixels while -2px will lower it (no matter how much you move it, it will not jump to other line and it will not overlay it, it will affect line-height)

word-spacing
Values:
<length> | normal | inherit

word-spacing: adds length to the standard space between words
normal=0, you can use positive or negative value

letter-spacing

Values:
<length> | normal | inherit

adds length to the standard space between characters
The child of an element inherits the computed value of that element!

text-transform
Values:
uppercase | lowercase | capitalize | none | inherit

text-decoration
Values:
none | [ underline || overline || line-through || blink ] | inherit

underline = U element in HTML
text crossed through the middle
line-through (strikethrough text) = S = strike elements in HTML
blink- not supported
Text-decoration is not inherited.

text-rendering
Values:
auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit

It tells user agent what should be prioritized when displaying text.
optimizeSpeed - fast performance more important than legibility
auto - user agent will do his best to combine speed, legibility and geometric precision but it will focus bit more on legibility.
geometricPrecision - forces the user agent to draw the text as precisely as possible - like this it can be scaled with no loss of fidelity.

text-shadow
Values:
none | [<color> || <length> <length> <length>? ,]* [<color> || <length><length> <length>?] | inherit

Each shadow is defined by an optional color (if you don't define it will have color of text) and length values (horizontal offset, vertical offset and optional blur radius).
If you use negative value shadow will offset to the left and top.
BUT text shadows can slow down the performance!

tells user agent how to handle space between lines and words

p {white-space: normal;} user agent discard any extra white space (browsers are doing this anyway), linefeed ignored, word wrap allowed
p {white-space: pre;} keeps white spaces, linefeed honored, word wrap ignored
p {white-space: nowrap;} no wrap unless you use <br>, white spaces are ignored, linefeed ignored
p {white-space: pre-wrap;} keeps white spaces, linefeed honored, text lines are wrapped
p {white-space: pre-line;} white spaces are ignored, linefeed honored, word wrap allowed

tab-size

Values:
<integer> | <length> | inherit

normally one tab is 8 spaces, but you can change it
! Visible only when white-space are preserved
<integer> value is a number - i.e. integer 2 means {tab-size: 2;} which means 2 spaces
<length> is specifies in px, but only integer value is supported by browsers

hyphens

Hyphenation - used in case of long words in small space

Values:
manual | auto | none | inherit

manual - hyphenation only there where you insert hyphenation marker (such as U+00AD or )
auto - user agents decide where to put hyphenationnone - no hyphenation is allowed
Hyphenation is inherited so watch out on what element you put it!
Hyphenation can be overide by word break, which allows you to decide where soft wrapp will be used

word-break
Values:
normal | break-all | keep-all | inherit

normal - text will be wrapped like it was, hyphenation allowed
break-all - soft wrapping can occur between any two characters, even if they are in the middle of a word - no hyphens are visible
keep-all - removes soft wrapping from between characters, hyphenation allowed

line-break for CJK
Values:
auto | loose | normal | strict | inherit

quote:

'loose

This value imposes the “least restrictive” rules for wrapping text, and is meant for use when line lengths are short, such as in newspapers.

normal
This value imposes the “most common” rules for wrapping text. What exactly “most common” means is not precisely defined, though there is the aforementioned list of recommended behaviors.
strict
This value imposes the “most stringent” rules for wrapping text. Again, this is not precisely defined.'

overflow-wrap (neé word-wrap)

Values:
normal | break-word | inherit

you can use it only if the value of whitespace allows line wrapping
normal - wraps between words
Since it's very similar to the word-wrap, it's better to use word-wrap because not all user agents respect overflow-wrap.

Text Direction
direction
Values:
ltr | rtl | inherit

It applies to text in block-level element, so if you want to use it for an inline-element the property unicode-bidi has to be set to either embed or bidi-override.

unicode-bidi

Values:
normal | embed | bidi-override | inherit

CSS2.1. specification quote:
"normal
The element does not open an additional level of embedding with respect to the bidirectional algorithm. For inline-level elements, implicit reordering works across element boundaries.
embed
If the element is inline-level, this value opens an additional level of embedding with respect to the bidirectional algorithm. The direction of this embedding level is given by the direction property. Inside the element, reordering is done implicitly. This corresponds to adding an LRE (U+202A; for direction: ltr) or an RLE (U+202B; for direction: rtl) at the start of the element and a PDF (U+202C) at the end of the element.
bidi-override
This creates an override for inline-level elements. For block-level elements, this creates an override for inline-level descendants not within another block. This means that, inside the element, reordering is strictly in sequence according to the direction property; the implicit part of the bidirectional algorithm is ignored. This corresponds to adding an LRO (U+202D; for direction: ltr) or RLO (U+202E; for direction: rtl) at the start of the element and a PDF (U+202C) at the end of the element."

Previous Post << >> Next Post

IT 4 BLONDES

Beautiful women doing geeky stuff

CSS Text

Categories

Related Posts

Notes from "CSS Text" Eric A. Meyer