CSS Cookbook/Block Quotes

Block Quotes

Proofers mark off block-quotes inconsistently with /*...*/ and with /#...#/. In preparing the ASCII etext you convert them all to the latter form, meaning "indent, but OK to reflow text." When it generates HTML, Guiguts converts these to <blockquote> markup, or optionally to <div class="blkquot">.

Why the choice? There seems to be no reason not to use the old HTML <blockquote> tag. It is supported in XHTML Transitional, although with a note saying its usage to indent text is deprecated. When used for its original purpose, to display a lengthy quotation, it seems to be acceptable. However, some people apparently feel that it is nothing but a <div> in disguise. So Guiguts offers you the choice.

Quote Text and Citation

The basic styling decisions on block quotes are, first, what amount of indentation to use; and second, whether to use a smaller font size. The Cookbook styles have:

blockquote, .blkquot {
	margin-left: 5%;
	margin-right: 5%;
	font-size: 90%; /* dubious move */
	}
p.citation { /* author citation at end of blockquote or poem */
	text-align: right;
	font-style: italic;
	}

As near as the Wiki allows, the result looks something like this:

Bhikkhus, seven things gratifying and helpful to an enemy befall one who is angry, whether a woman or a man. What are the seven?

Here, bhikkhus, an enemy wishes thus for his enemy: "Let him be ugly." Why is that? No enemy relishes an enemy's beauty. Now when this person is angry, a prey to anger, ruled by anger, be he ever so well bathed, and well anointed, with hair and beard trimmed, and clothed in white, yet he is ugly through his being a prey to anger. This is the first thing gratifying and helpful to an enemy that befalls one who is angry, whether a woman or a man.

— The Buddha (Anguttara Nikaya, 7:60)

The above has three paragraphs, two comprising the quote and a third styled <p class="citation"> to make a right-aligned, italicized citation.

The quoted paragraphs in an etext will be neither justified nor have first-line indents. This is because the styles for running text are coded to select only paragraphs that are immediate children of the body. Paragraphs in a div or blockquote are children of that element and only grand-children of the body.

Correspondence Date and Signature

Often a block quote is correspondence that starts with a right-aligned dateline and ends with an indented signature. The Cookbook styles include:

p.quotdate { /* date of a letter aligned right */
	text-align: right;
	}
p.quotsig { /* author signature at end of letter */
	margin-left: 35%;
	text-indent: -4em; /* gimmick to move 2nd line right */
	}

which, when applied, look very approximately like this:

London, 1 Devonshire Terrace, York Gate, Regent's Park,
Sunday, July 31, 1842.

My Dear Felton: Of all the monstrous and incalculable amount of occupation that ever beset one unfortunate man, mine has been the most stupendous since I came home....

On board that ship coming home I established a club, called the United Vagabonds, to the large amusement of the rest of the passengers. This holy brotherhood committed all kinds of absurdities, and dined always, with a variety of solemn forms, at one end of the table, below the mast, away from all the rest. The captain being ill when we were three or four days out, I produced my medicine-chest and recovered him. We had a few more sick men after that, and I went round "the wards" every day in great state, accompanied by two Vagabonds, habited as Ben Allen and Bob Sawyer, bearing enormous rolls of plaster and huge pairs of scissors. We were really very merry all the way, breakfasted in one party at Liverpool, shook hands, and parted most cordially....

Affectionately,
Charles Dickens

P.S. I have looked over my journal, and have decided to produce my American trip in two volumes. I have written about half the first since I came home, and hope to be out in October.

A dateline would be styled <p class="quotdate">. Manually insert <br /> to make the date and the location line up.

A signature is styled <p class="quotsig">. The rule for this class resorts to a sleazy trick: the text-indent is set to -4em. Thus the first line of a signature is exdented. The second line (started with a manual <br />) is indented under this one, getting us two levels of indentation from one style.