Return to Snippet

Revision: 39005
at January 11, 2011 22:55 by blueocto


Initial Code
/*
This is how browsers style paragraphs by default:
Flush left, ragged right, one em boundary and line height
*/
p {}

/* 
Flush left, ragged right
1.25em basic leading (line height), one lead boundary (vertical margins)
*/

p {
font-size: 1em;
line-height: 1.25em;
margin: 1.25em 0;
text-align: left;
}

/* 
Justified
1.25em basic leading (line height), one lead boundary (vertical margins)
*/

p {
font-size: 1em;
line-height: 1.25em;
margin: 1.25em 0;
text-align: justify;
}

/* 
First line flush left
Subsequently 1em indent, ragged right, ½ lead boundary
*/

p {
font-size: 1em;
line-height: 1.25em;
margin: 0.625em;
text-align: left;
}
p + p {
text-indent: 1em;
}

/*
First line flush left
Subsequently two lead indent, ragged right, no boundary
*/

p {
font-size: 1em;
line-height: 1.25em;
margin: 0;
text-align: left;
}
p + p {
text-indent: 2.5em;
}

/*
First line flush left
Subsequently two lead indent, no boundary, justified
*/

p {
font-size: 1em;
line-height: 1.25em;
margin: 0;
text-align: justify;
}
p + p {
text-indent: 2.5em;
}

/*
1em outdent, no boundary
*/

p {
font-size: 1em;
line-height: 1.25em;
text-indent: -1em;
text-align: left;
}

/*
CSS pseudo elements used to prepend the paragraphs with a pilcrow. Not supported by IE.
Continuous text.

N.B.
Text cannot be justified using CSS when paragraphs are set to display:inline.

*/

p {
font-size: 1em;
line-height: 1.25em;
display: inline;
text-align: justify;
}
p + p:before {
content: "¶ ";
}

/*
Raised initial size is set pragmatically to fit three line size
without causing browsers to break the following line with their 
baseline and line-height rendering.
Paragraphs set with ½ lead boundary, justified

N.B. 
:first-letter pseudo element refused with p display:inline
:first-letter pseudo element color property not applied. Requires tests.
*/

p {
font-size: 1em;
line-height: 1.25em;
margin: 0.625em 0;
text-align: justify;
}
p:first-letter {
font-size: 3.5em;
line-height: 1em;
}
p + p:first-letter {
font-size: 1em;
line-height: 1.25em;
}

/*
Drop cap treatment is set without any vertical correction - 
Works OK in FF3, but cross-browser consistency will require further adjustment
Paragraphs set with no boundary, justified
*/

p {
font-size: 1em;
line-height: 1.25em;
margin: 0;
text-align: left;
}
p + p {
text-indent: 2.5em;
}
p:first-letter {
font-size: 3.5em;
line-height: 1em;
font-weight: 400;
float: left;
margin: 0 0.107em 0 0;
}
p:first-line {
font-weight: 800;
}
p + p:first-letter {
font-size: 1em;
line-height: 1.25em;
float: none;
margin: 0;
}
p + p:first-line {
font-weight: 400;
}

/*
Outdent cap treatment is set without any vertical correction - 
Works OK in FF3, but cross-browser consistency will require further adjustment. 
Paragraphs set with ½ lead boundary, justified
*/

p {
font-size: 1em;
line-height: 1.25em;
margin: 0.625em 0;
padding: 0 0 0 8em;
text-align: justify;
}
p:first-line {
font-weight: 800;
font-variant: small-caps;
}
p:first-letter {
font-size: 8em;
line-height: 1em;
font-weight: 400;
float: left;
margin: 0 0 0 -0.1em;
}
p + p:first-letter {
font-size: 1em;
line-height: 1.25em;
float: none;
margin: 0;
}
p + p:first-line {
font-weight: 400;
font-variant: normal;
}

/*
CSS pseudo elements used to prepend the paragraphs 
with a section sign and mid point
Paragraphs set with one lead boundary, justified
*/

p {
font-size: 1em;
line-height: 1.25em;
margin: 1.25em 0;
padding: 0;
text-align: justify;
}
p:before {
content: "§ ";
}
p + p {
padding: 0 0 0 8em;
}
p + p:before {
content:: "• ";
}

Initial URL
http://jontangerine.com/silo/typography/p/

Initial Description


Initial Title
12 Examples of Paragraph Typography

Initial Tags


Initial Language
CSS