CSS Cookbook/Page Numbers

Page Numbers in HTML

Guiguts optionally leaves page-number anchors wherever there was a page-break in the original book. In order to make this work correctly you need to adjust page labels to match the book's folio numbers, and request page anchors during HTML autogeneration.

The page anchors look like

<a id="Page_195" name="Page_195"></a>

The main benefit of these anchors is that you can use them as the targets for links from the TOC, Index, and any cross-reference, making the HTML etext much more dynamic than the ASCII one.

Visible Page Numbers

Another basic use of page-number anchors is that readers can form URLs to any page. When students reference a Gutenberg text in a paper, they can append #Page_nnn to the Gutenberg book URL to form an exact reference to the page of the work. However, readers do not automatically know what page number nnn to use for this, unless the page numbers from the original work are somehow rendered visibly in the HTML.

For several releases, Guiguts has generated a visible page number when it generates a page anchor. The full HTML at each page boundary is:

<span class='pagenum'>
    <a name="Page_195" id="Page_195">[195]</a>
</span>

The standard Guiguts HTML style header contains a CSS rule .pagenum which includes this:

.pagenum /* uncomment the next line for invisible page numbers */
            /*  visibility: hidden;  */

If you choose not to have visible page numbers in your book, remove the /* */ comment delimiters. When the visibility property is set to hidden, guess what? The spans classed pagenum will disappear.

Visible or not, when the reader drags over the text to select and copy it, the page numbers are copied also, and will appear when the text is pasted in another document. Even though the page number is displayed in the margin, it appears in the pasted text at its sequential location within the line. Similar issue occurs with the CSS disabled. Readers might find this an annoyance—or not. An alternative solution is proposed on the Talk page which creates the page numbers using only CSS, and avoids the numbers within text.

Carefully inspect all the page numbers in your book. (You can rapidly scroll or page through the work, watching the little numbers in the right margin.) If there were empty pages, there will be adjacent pagenum spans and these may display one on top of the other, making an unreadable blot in the margin. Insert <br /> between them to separate them vertically.

Styling Page Numbers

The Guiguts standard header has further CSS rules to render the page numbers but as with any CSS rule, near-infinite variations are possible. The following somewhat different styling is in the Cookbook styles:

.pagenum { /* right-margin page numbers */
	/*visibility:hidden	hide the page numbers */
	font-size:50%;		/* tiny type.. */
	color: #444;		/* ..dark gray.. */
	text-align: right;	/* ..right-justified.. */
	width: 2.25em;		/* ..in space wide enuff for 999 */
	position: absolute;	/* out of normal flow.. */
	right: -2.5em;		/* ..in the right margin.. */
	padding: 0 0 0 0 ;	/* ..very compact */
	margin: auto 0 auto 0;	
}

Experiment with your etext to see what suits it best.

Page Numbers as Self-Links

Recently, Icelandic post-processor Stalfur pointed out a simple and clever addition to visible page numbers that can help the reader. This is to convert the page-number anchor not into a passive anchor, but into a proper link—a link that points to itself. The above guiguts-generated code would be slightly changed:

<span class='pagenum'>
    <a name="Page_195" id="Page_195" href="#Page_195">[195]</a>
</span>

The href="#Page_195" inserted into the anchor changes it from an anchor into a link to the anchor #Page_195, which is itself.

What's the point? Well, the reader can right-click or control-click on such a page number and copy the link for easy pasting into another document. This automates the otherwise error-prone task of formulating the URL of a particular page of the document.

The Cookbook styles have these two CSS rules for a link (a) when it is inside a pagenum span.

.pagenum a {/* when pagenum is a self-reference link (see text)... */
	text-decoration:none;	/* no underline.. */
	color:#444;		/* same color as non-link */
	}
.pagenum a:hover { color:#F00; }	/* turn red when hovered */