CODEWITHSUNDEEP
htmlcss
Houy Narun
Houy Narun

Reputation: 1725

Show page number on printing in CSS

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?

Upvotes: 0

Views: 2324

Answers (1)

Mr. Hugo
Mr. Hugo

Reputation: 12592

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.

Upvotes: 1

Related Questions