7

I modified a CSS page-numbering solution for my web page.

It automatically shows "Page 1", "Page 2", etc. I'd like it to show "Page 1 of 5", "Page 2 of 5", etc.

Here's my current example code: (Demo)

@media print {
  thead span.page-number:after {
    counter-increment: page;
    content: "Page " counter(page) " of ?";
  }
}

HTML: (pardon me for using tables, rather than CSS display: table-header-group)

<table>
  <thead>
    <tr>
      <td>
        <span class="page-number"></span>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        ..............................................................
      </td>
    </tr>
  </tbody>
</table>

Is there any way to add the total page count in place of my ??

I'm only interested in the latest version of either Firefox or Chrome.

My current solution so far was to use the server to create one element per page, but it is much more difficult to get optimal page breaking that way. The <thead> solution is much simpler.

Community
  • 1
  • 1
700 Software
  • 85,281
  • 83
  • 234
  • 341
  • Could you create an element for each page in the website ? So, a site with 3 pages (home,about,contact) would create an unordered list on each page with an li for each page. You could then use the counter-increment on those elements. Best i can come up with :) This list could actually be a handy sitemap for users too :) – grimmus Nov 27 '13 at 16:34
  • Actually, the web page I am working with is a printable company document. Your comment seems off topic for this question. Sorry. :) – 700 Software Nov 27 '13 at 16:51
  • All I've seen so far, can only give the total number of elements *after* everything is counted. – Olaf Dietsche Nov 27 '13 at 17:14
  • This is curious. It works on page 1, but not on the rest of the pages. http://jsfiddle.net/KeuwU/8/ http://jsfiddle.net/KeuwU/8/show/ – 700 Software Nov 27 '13 at 17:25
  • In theory, one should be able to use a position:fixed element for the total page count. It would not be optimal, due to the alignment difficulties, it would have limited utility. I would post a sample, but [I haven't got it to behave right yet](http://fiddle.jshell.net/KeuwU/13/show/). – 700 Software Nov 27 '13 at 17:30

2 Answers2

-1

You can use counter(pages). Here is the example

thead span.page-number:after {
    counter-increment: page;
    content: "Page " counter(page) " of " counter(pages);
}
Yodan Tauber
  • 3,907
  • 2
  • 27
  • 48
user3660221
  • 9
-2

Although not purely a CSS answer,with a little javascript and assuming that each new page/break point would be represented by a div/span/td or other HTML entity with a "common class name" contained in each one. You could get the total page count like this.

<div class="xxx"></div>
<div class="xxx"></div>
<div class="fff"></div>
<div id="footer">
<script type="application/javascript">
aaa = document.getElementsByClassName("xxx").length;
document.write(aaa);
</script>
</div>

In the example above, This would produce the number 2 being output to the browser at the point the script is inserted as the script counts the number of times xxx appears as a class in any element on the document.

DMSJax
  • 1,709
  • 4
  • 22
  • 35
  • Sorry, this is a wrong answer, because there is only one element involved. The element is repeated on each page because it is in a ``, but there's still only one element. `length` would always be `1`. – 700 Software Dec 03 '13 at 20:54