CSS Cookbook/Heads

Thought Breaks and Rules

Look at the original work: did it show thought breaks by a rule, or by extra vertical space? If the latter, it would be true to the original to do the same. Delete the row of asterisks used in the ASCII etext and just give the paragraph following the break more top margin. A CSS rule is included for the purpose:

p.break { margin-top: 2em; }

Just add class="break" to the paragraph that should follow the thought break. Adjust the margin value in the rule to match the look of the original.

Rule Styles

The humble <hr /> can be styled in a number of ways. These rules (CSS) for rules (typographical) are in the Cookbook styles:

hr {
	width:45%;		/* adjust to ape original work */
	margin-top: 1em;	/* space above & below */
	margin-bottom: 1em;
	margin-left: auto;	/* these two ensure a.. */
	margin-right: auto;	/* ..centered rule */
	clear: both;		/* don't let sidebars & floats overlap rule */
}
hr.major { width:65%; margin-top:2em; margin-bottom: 2em;}
hr.minor { width:30%; margin-top:0.5em; margin-bottom: 0.5em;}
/* get a double rule by putting borders on a blank rule! */
hr.double {
	/* width and margins inherited from default rule */
	color:transparent;	/* conceal the actual rule */
	padding: 4px 0 0 0; /* pad value creates inter-border space */
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-left: none; border-right:none;
}

The first rule sets the properties of all <hr /> elements that don't have a class-name. The width:45% will be 45% of the width of whatever contains the rule: the body or a table cell or a sidebar. Adjust it to a value that looks like the common rule in the original work.

The margin-top and -bottom for the rule set the space above and below it; adjust as needed for the common case. Setting margin-left and -right both to auto ensures that the rule will be centered in its containing element. The clear property makes the browser push the rule down the page, if needed, so that floating images don't overlap on it.

Major and Minor Rules

Two special-case rules are defined. A rule with class-name "minor" is shorter and has less vertical space. It might be used for a thought-break within a poem, for example. A rule with the class-name of "major" will be wider and have more space above and below.

Guiguts automatically generates a rule

<hr style="width:65%" />

before each chapter title. These explicit stylings should be modified to read

<hr class="major" />

so you can adjust all those rules by changing the CSS rule for them.

Uncentered Rules

Sometimes a rule shouldn't be centered in the page. When a rule is used to show a thought-break in poetry, and the lines of poetry are short, a rule centered in the page will be well to the right of the visual mid-line of the poetry. Here's one way to fix it:

.poem hr {margin-left:5em;}

Guiguts encloses all poems in <div class="poem">. This CSS says, when <hr > is found there, make its left margin 5em instead of auto. Adjust the margin value to make such rules appear balanced on the visual center of the typical poem.

Double Rules

The double rule was invented for a book ((link tbs when it is posted to PG)) in which the typesetter had run a short, double, rule under certain major headings. To get the effect of a double rule, the CSS code above actually makes the original rule invisible (color:transparent;) and then applies top and bottom borders to get two thin parallel lines. The padding establishes the distance between the lines.

Headings

How many levels of heading does your book use? Many have only one, the Chapter. HTML provides for levels from <h1> through <h6>. Project Gutenberg convention is that:

• <h1> is the title of the work.
• <h2> is for chapter heads.
• <h3> is for main subtopic heads.

The reason for these rules is that (at least in principle) the HTML could be scanned by a program and information extracted. However some works (such as collections of plays, which can need five levels) are different.

Proper markup of the headings improves accessibility. See additional tips on improving accessibility of Title Pages and Headings.

Book Title

The title of the work appears only once at the top of the document. If you leave it unstyled the browser will default to really-big and really-bold. Or you can try to style the title, subtitle, and other lines on the title page to actually look like the work's original title page.

Turgidity, Torpidity or Turbidity

A Question of Morels
By
Euphonia T. Discordance, K.F.C., LL.Bean

Because these styles are unique to the phrases of the title, you could put the CSS declarations directly into the <h1> (edit this section to see how that looks). But more tidily, you can give each element of the title page a name, and use the CSS #name selector to specify their style rules in your CSS section. This leaves the HTML source much easier to read.

Chapter and Topic Titles

Left to itself, the browser will render <h2> left-aligned in a large, bold version of the current font. Depending on your original book you may prefer to make the heads not-bold and/or centered. The cookbook styles include these rules for heads:

h2 {
	/* text-align:center;  left-aligned by default. */
	margin-top:3em;		/* extra space above.. */
	margin-bottom: 2em;	/* ..and below */
	clear: both;		/* don't let sidebars overlap */
}
h3 {
	/* text-align:center;  left-aligned by default. */
	margin-top: 2em;	/* extra space above but not below */
	font-weight: normal; /* override default of bold */
	clear: both; /* don't let sidebars overlap */
}

Center-alignment is commented out, but easily restored. The other properties are self-explanatory.