CSS typography

css-typography.md

CSS Typography

We can do typographic things in CSS that we couldn’t before.

Hanging Indent

text-indent: 2em hanging; /* Safari and Firefox only */

This is a sentence that   |
   will be indented after |
   the first line when    |
   wrapped to multiple    |
   lines.                 |

or:

text-indent: 2em hanging each-line;  /* Safari and Firefox only */

A stanza can have multiple |
   lines.<br>              |
The second line should be  |
   indented as the first.  |

Drop Cap

::first-letter {
  initial-letter: 2; /* not supported by Firefox */
}

Hanging Punctuation

hanging-punctuation: first; /* Safari only */

“This is a quote where the first quotation mark
 will hang outside to allow the leftmost words to align.”

Orphans

orphans: 2; /* not supported by Firefox */

before:

Don’t let the last line of a |
paragraph have just a single |
word.

after:

Don’t let the last line of a |
paragraph have just a        |
single word.