0

I would want show the page number at the bottom of my printable document. I found a source and follow an stackoverflow answer here but it does not help.

My current CSS to achieve this desire is like this: 

body {
  text-align: justify;
}

/* class to break into new page */
.pagebreak { page-break-before: always; }

@media print {
    body {
    font-size: 18px;
  }
@bottom-right {
    content: "ទំព័រទី " counter(page) " នៃ " counter(pages);
}

However, when I test print document, it does not show my page number at all.

What was wrong to my css? How can I do to achieve this result?

Thanks.

Edited

After I spent sometimes searched through this, I know of most major browser not support this @bottom-right. Any thought of it?

Houy Narun
  • 1,557
  • 5
  • 37
  • 86
  • As https://stackoverflow.com/questions/34654071/print-page-count-with-total-number-of-pages-using-css mentioned in the link comment, you should try different browser. – Bhagchandani Sep 14 '17 at 09:25
  • @user3888958, thanks. I tried in FF, chrome, and Safari, but still not showing page number. – Houy Narun Sep 14 '17 at 09:31
  • In what context do you print the HTML? If you are the only one printing it, you could look at a program like [Prince](https://www.princexml.com/); according to [Smashing magazine](https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/#putting-it-all-together-an-example-book) it is one of few user agents which supports it. I unfortunatly cannot help you if it is for a 'commercial' site where others might want to print it. This due to having no experience with it myself. – Yemachu Sep 14 '17 at 11:13
  • @Yemachu, thanks very much for suggestion. I'm doing for my client. – Houy Narun Sep 14 '17 at 11:20

1 Answers1

1

As of 12/3/2015, the margin boxes like @bottom-center don't appear to be supported by the major browsers, as shown here. If you search for "@bottom-center" you'll see a whole lot of red "not supported" boxes. When you search the web it sounds like they should work but in reality they're not supported yet. Some elements of paged media work great, like page-break-after, but not the margin boxes. Source

However, there seems to be a solutions that works in Firefox.

Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
  • Thanks. Printing between Firefox and Chrome as they look bit different during printing. Therefore I recommend my user to use chrome instead of Firefox as Chrome look better than Firefox. – Houy Narun Dec 22 '17 at 01:53
  • 1
    Chrome is a terrible browser from a privacy point-of-view. If you care about your client(s company secrets), you advice him/her to move to Firefox anyway. – Mr. Hugo Dec 22 '17 at 08:46