Sometimes serendipitous things occur.
I read printed matter from 1920’s - 1950’s for its use of formal typography. I’ll study its graphic and typography design for future use or as CSS case studies. The following study was performed as continuous self-education with the hope that it would be usable for design work.
The study was educational but not very practical.
The page below was originally copyrighted in 1957. The layout is straitforward except for that highlighted text.
The first paragraph is the introduction to the “Adhesive” chapter. This is evident from reading the text but also from the space between the first and second paragraphs. This can be styled with one header, three paragraphs and one <span> as the example below illustrates.
The CSS,
h2, p { color: #000; font: 1em Times, "Times New Roman", serif; }
h2 { font-size: 1.6em; }
p { width: 400px; margin: 0; padding: 0; text-align: justify; line-height: 1.4; text-indent: 15px; }
.introductory-p { margin-bottom: 1em; }
.faux-small-caps { text-transform: uppercase; }
.unindented { text-indent: 0; }
The HTML,
<h2>The Snark Escapes</h2>
<p class="introductory-p">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. »
Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora »
torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat»
nec, mollis quis, posuere eget, arcu.</p>
<p class="unindented"><span class="faux-small-caps">The hunting continues</span>. »
Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. Integer »
nonummy mauris sit amet metus.</p>
<p>In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed aliquet »
urna diam sed tellus. Etiam semper sapien eget metus.</p>
This works in Firefox, Opera, Safari and IE. See First Example.
Or,
However, let’s say—Semantically—that first sentence in the second paragraph should be an <h3> (since it’s a subchapter heading). Sadly, nothing simple worked in my attempts at setting an <h3> inline with a paragraph; I gave up and found other amusements. Later, serendipity struck. I was reading Cascading Style Sheets, level 2 revision 1, CSS 2.1 Specification and found this, 9 Visual formatting model, 9.2.3 Run-in boxes. It had an example of what I wanted to do. I wrote mine.
The HTML,
<h2>The Snark Escapes</h2>
<p class="introductory-p">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. »
Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora »
torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi lectus, placerat »
nec, mollis quis, posuere eget, arcu.</p>
<h3 class="title-in-paragraph">The hunting continues.</h3>
<p>Donec euismod. Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat. »
Integer nonummy mauris sit amet metus.</p>
<p>In adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia libero, sed »
aliquet urna diam sed tellus. Etiam semper sapien eget metus.</p>
The CSS,
h2, h3, p { color: #000; font: 1em Times, "Times New Roman", serif; }
h2 { font-size: 1.6em; }
h3.title-in-paragraph { display: run-in; margin-right: .5em; text-transform: uppercase; }
p { width: 400px; margin: 0; padding: 0; text-align: justify; line-height: 1.4; text-indent: 15px; }
h2 + p { margin-bottom: 1em; } /* Safari fix */
h3.title-in-paragraph + p { text-indent: 0; }
This works in Safari and Opera; it doesn’t in Firefox and IE. See Second Example.
Or,
[ Safari/Opera ]
[ Firefox/IE ]
Interestingly, Opera applied the default rendering of of the <h3> top margin/padding to the <h3 class="title-in-paragraph"> and the paragraph's no bottom margin or bottom padding since it has become an inline box because the paragraph is an inline element. Safari has inherited the paragraph's no margin or padding which is why the “Safari fix” was added. And, Safari and Opera inherited the paragraph’s text-indent style. And, Firefox—which parses adjacent sibling selectors —displays no indent on that one paragraph. And, Opera doesn’t recognize a:hover with display: run-in until it has been clicked. Other than that, it's fine.
Why bother? since it doesn’t work in IE or Firefox?
No particular reason.
