Beautiful women doing geeky stuff

CSS Text

Related Posts

14/09/2013 Categories: CSS

Notes from "CSS Text" Eric A. Meyer

Indenting element

<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


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 ",":



Parent matching 

  • not supported by browsers
  • similar to inherit


auto | start | end | left | right | center | justify

  • 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


<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

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

  • 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)



<length> | normal | inherit

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



<length> | normal | inherit

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

uppercase | lowercase | capitalize | none | inherit

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.

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.

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!

normal | nowrap | pre | pre-wrap | pre-line | inherit

  • 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


<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



  • Hyphenation - used in case of long words in small space

manual | auto | none | inherit

  • manual - hyphenation only there where you insert hyphenation marker (such as U+00AD or &shy;)
  • 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


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
auto | loose | normal | strict | inherit




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

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.
This value imposes the “most stringent” rules for wrapping text. Again, this is not precisely defined.'


overflow-wrap (neé word-wrap) 

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
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.



normal | embed | bidi-override | inherit


CSS2.1. specification quote:
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.
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.
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."