The Design and Construction of eBooks, by Steve Thomas : part2.4

General quotation

By quotations, I mean not the use of quotation marks around speech, but blocks of quoted text within the body. The quotation may be small — perhaps even just a single line — or extensive, extending over a number of paragraphs.

You could just use the blockquote tag for these, but using <div class="quote"> instead gives us more control over presentation and semantic structure, because we can easily combine the quote class with other classes.

The CSS simply provides extra spacing around the quotation to distinguish it from the main body text:

    .quote, blockquote { margin:1em!important; }

Inscriptions

For inscriptions and epitaphs, we have:

    .inscription, .inscription p {
        font-variant:small-caps;
        margin:1em;
        text-align:center!important;
        text-indent:0;
        }

In Memory of Beza Wood
Departed this life
Nov. 2, 1837
Aged 45 yrs.

Here lies one Wood
Enclosed in wood
One Wood
Within another.
The outer wood
Is very good:
We cannot praise
The other.

Notices and Headlines

Use notice for advertisements, handbills, etc. It indents like quote, but puts a ~~box~~ drop shadow around bold text. Headline is used for news headlines. It’s the same as notice, but without the box.

.notice {
    border:1px solid;
    margin:1em auto;
    padding:1em;
    -moz-box-shadow: 5px 5px 20px 10px #aaa;
    -webkit-box-shadow: 5px 5px 20px 10px #aaa;
    box-shadow: 5px 5px 20px 10px #aaa;
    }
.notice p, .headline, .headline p {
    font-weight:bold;
    text-align:center!important;
    text-indent:0;
    }

For example (from The Poison Belt:

WARNING.

Visitors, Pressmen, and Mendicants
are not encouraged.

G. E. CHALLENGER.

Epigraphs

A special form of quotation is the epigraph, defined in the OED as a “short quotation . . . placed at the commencement of a work, a chapter, etc. to indicate the leading idea or sentiment”.

.epigraph {
    font-size:.9em;
    font-style:italic;
    margin:1em auto;
    text-align:left;
    text-indent:0;
    width:65%;
    }
.epigraph p {
    margin:0 0 0 2em!important;
    text-align:left;
    text-indent:-2em!important;
    }
.epigraph p em {
    font-style:normal;
    font-variant:small-caps;
    }

The epigraph would normally occur in the header of a section, or on the title page. An example can be seen at the head of this chapter.

Letters

Probably the most common use of quotation, after verse, is for letters. The class letter may be combined with quote for semantic purposes, but has no specific style associated with it. But there are styles defined for letters that are written or typed. Typed letters are monospaced (just like a typewriter!) while written letters use italics to indicate handwriting:

.typed { font-family:monospace; }
.written {
    font-family:cursive;
    font-style:italic;
    }

And just because we can, we define a style specifically for telegrams:

.telegram {
    font-family:Courier, monospace;
    font-variant:small-caps;
}

The Design and Construction of eBooks, by Steve Thomas

Quotations

General quotation

Inscriptions

Notices and Headlines

Epigraphs

Letters