User:Laurawisewell/Content Method for HTML pagenums

From DPWiki
Jump to navigation Jump to search

The "Content Method" for pagenums in HTML

I think I learned this from Camomiletea. Most methods of producing visible page numbers in the HTML versions of texts have three disadvantages

  1. Although CSS may put them in the margin, a non-CSS browser will have them interrupting the text.
  2. Highlighting and copying a passage that spans a pagebreak will copy the number into it, interrupting the text.
  3. 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 it simply does nothing. Here's how. In the CSS:

.pagenum  {
        position: absolute;
        left: 92%;
        font-size: 13px;      /* same appearance for pagenums in <h> */
        font-weight: normal;  /* regular <p> or in the index */
        font-variant:normal; font-style:normal; letter-spacing:normal;
        text-indent: 0em; text-align:right;
        color: silver;
        background-color: #FFF;
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&nbsp;9">&nbsp;</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...

The main disadvantage is that the CSS it uses isn't supported by Internet Explorer. Thus, IE users do not see the pagenums at all. Which is ok, since visible page numbers are optional. Firefox, Opera, Safari, Konqueror all render it correctly.