Talk:CSS Cookbook/Page Numbers
Alternative Page Numbers Method
I don't remember where I learned this method, but I and a few others found it useful. Copy (with some updates) from the Laurawisewell's page
Most methods of producing visible page numbers in the HTML versions of texts have a number of disadvantages
- Although CSS may put them in the margin, a non-CSS browser will have them interrupting the text.
- Similarly EPUB versions created from the HTML will have the page numbers interrupting the text, unless you delete or hide them specifically for EPUB, etc.
- Highlighting and copying a passage that spans a pagebreak will copy the number into it, interrupting the text.
- A user might do a browser search for "a phrase like this" and get no hits, because in fact the document contains "a phrase [Pg 17]like this" instead.
The content method gets round this, because in a CSS-supporting browser it doesn't break searches or copy and paste, and in a non-CSS-supporting browser or in EPUB it simply does nothing. Since EPUB is in development, it may get better CSS support, and then the page numbers would appear without needing changes in the file.
Here's how. In the CSS:
.pagenum {
position: absolute; left: 92%;
font-size: 13px; /* same font size for page nums inside <h>, regular <p> or in the index */
font-weight: normal; font-style: normal; font-variant: normal; /* prevent bolding, italicising, small-capping */
text-indent: 0em;
color: #585858; background-color: #ffffff;
}
span[title].pagenum:after { content: " [" attr(title) "] "; }
a[name] { position:absolute; } /* Fix Opera bug */
and in the HTML body, something like
...revision and enlargement of my historical works; but early as 1846, having determined<span class="pagenum" title="Page 9"> </span><a name="Page_9" id="Page_9"></a> on making the tour of the United States, I resolved first to prepare my theory for the press. In the introduction, I...
I use the following regex to convert the automatic Guiguts pagenum output to the output I would like to have:
| Search | Replace |
|---|---|
| "pagenum"><a name="Page_(\d+)" id="Page_\1">\[Pg \1\]</a> | "pagenum" title="Page $1"> <a name="Page_$1" id="Page_$1"></a> |
The main disadvantage of such method used to be the fact that it wasn't supported by an earlier version of Internet Explorer. It is however supported in Internet Explorer 7, and is rendered correctly in Firefox, Opera, Safari, Konqueror. Therefore, at this time I see no drawbacks, and only advantages. In my opinion, it was even okay previously, because page numbers are optional anyway.
--camomiletea 22:42, 2 November 2009 (PST)
- I updated the above again, adding information about EPUB. Also, note that in the CSS I try not to include the forced font size anymore: I place the page numbers in a <p> above the header, rather than putting it within the <h2> tag, etc. -- camomiletea 00:33, 10 August 2011 (PDT)