CSS Cookbook/Sidenotes

Sidenotes and sidebars are floating elements, that is, boxes that float to one side of the page with text running around them.

Sidenotes

Sidenotes addressed

A sidenote is a scrap of text set in the margin of the page to give the reader a clue as to the topic of the adjacent text. Some old nonfiction books use sidenotes extensively. They are sometimes seen in modern academic journals. The content of a sidenote is brief, and often not a complete sentence. Generally a sidenote should float entirely clear of the running text, into a wide right margin.

Sidenotes and margins

In printed books and journals, sidenotes are put in the "cut margin," that is, the margin further from the binding, left or right. In an etext, there is no alternation of left and right margins. In my opinion, sidenotes are less intrusive on the right—in a European language, at least.

The right margin must be made wider in order to accomodate the sidenotes. The paragraphs of this topic have a 6-em right margin.

In the ASCII text, sidenotes are coded as single lines
[Sidenote: Text]
A simple regular expression changes these into
<p class="sidenote">Text</p>
This class invokes this complex rule in the Cookbook styles:

.sidenote {
/* the following style the sidenote box appearance: */
	width: 5em;			/* ..fixed width, */
	float: right;		/* ..float to the right, */
	margin-right: -6em;	/* ..exdented into body margin */
	margin-top: 0;		/* top even with following <p>'s top */
	margin-left: 6px;	/* ..ensure space from body text */
	border: 1px dotted black; /* ..thin dotted border */
	padding: 0 0 0 4px;	/* ..ease content out from left border */
	background-color: rgb(90%,90%,90%); /* ..optional pale tint */
/* the following style the look of the text inside the box: */
	font-size: smaller;	/* ..small text; could be x-small */
	color: #333;		/* ..optional dark-gray text */
	text-indent: 0;		/* ..no para indent */
	text-align: right;	/* ..right align text in box */
	line-height: 1.1em;	/* tight vert. spacing */
        }

Almost every line of this rule is subject to modification to match the look of the book you are converting:

• width sets the absolute width of the sidenote box; set as small as possible but as wide as necessary to avoid wrapping single long words.
• Negative margin-right pulls the box into the margin area of the page and together with width, determines the space between the right end of body text lines and the left edge of the box.
• border is optional, or could be styled with a solid line or in a gray color.
• color is optional, it makes the note text less than totally black.

Sidenote Location

In the ASCII etext, the sidenotes are supposed to lie between paragraphs. One of your tasks in post-processing the ASCII etext is to move sidenotes that are still inside paragraphs, something the regular proofers can't always do. Agony When the paragraphs are very long, this can force you to make agonizing decisions, and you may end up with two or more sidenotes in sequence between paragraphs. Well: good news! In the HTML version, you can move those sidenotes back Huzzah! into the middle of the paragraphs where the original book had them! Because a sidenote is only a few words, it can be enclosed in a <span> instead of a <p>, and placed right in a paragraph.

(Note: In Internet Explorer 6 only, <p class="sidenote"> goes to a different right margin than does <span class="sidenote">. I have no idea why. The difference is not large enough to matter.

Sidebars

The CSS "Trouble" Mnemonic

CSS supports several properties which take a list of four measures. The most-used is the margin property; others are the padding and position properties.

Eric A. Meyer, author of Cascading Style Sheets: The Definitive Guide, teaches the mnemonic "TRouBLe" as a way to remember that the four values of these properties represent in sequence, the Top, Right, Bottom, and Left measures.

A sidebar is a short discussion of a different but related topic, set to one side of the running text. A sidebar can have headings, paragraphs, even tables and illustrations. Because a sidebar, unlike a sidenote, can contain more than one paragraph, it is coded as a <div class="sidebar">. (A sidenote, containing only a bit of text, can be a <p> or even a <span>.)

Clearing Sidebars

A tall sidebar can overlap on a following header, but we coded the clear: both; property in our h2 and h3 styles, making them drop clear of a long sidebar—as this one does.

Sidebar CSS

The definition of class sidebar in the Cookbook styles reads:

.sidebar {
	width: 40%;		/* make 100% to force in-line */
	float: right;		/* ..float to right */
	border: 1px solid black; /* ..definite border */
	padding: 0 0 0 4px;	/* ..ease content out from left border */
	margin: 9px 0 9px 6px;	/* get border away from body text */
	background-color: rgb(90%,90%,90%); /* ..optional tint */
}

Again everything is changeable to better replicate the look of the original work.

• width sets the max width of the sidebar as a percent of the body text width.
• border could be dashed or dotted, wider, or a different color.
• background-color is optional.

In addition if you would like the content of a sidebar to be styled differently from the body text, you could add rules with selectors such as .sidebar p to style paragraphs only in a sidebar.