Revision: 39005
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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