浏览器支持CSS页面编号 [英] Browser Support for CSS Page Numbers

问题描述

所以我知道这个选项：带有CSS / HTML的页码。

So I am aware of this option: Page numbers with CSS/HTML.

到目前为止，似乎是在页面的打印版本中添加页码的最好方法，但我无法得到任何变化的工作任何地方。我试过在我的Windows 7机器在Chrome，Firefox和IE9。基于一些链接，它看起来像更多的专有软件，如Prince XML支持。

It seems by far to be the best way to add page numbers to a print version of a page, but I can't get any variation of this to work anywhere. I have tried on my Windows 7 machine in Chrome, Firefox, and IE9. Based on some of the links it looks like this may be supported in more proprietary software like Prince XML. Is this supported by web browsers for print versions?

我已经尝试只做一个空白的html文件，并在头部添加两个样式标签之间：

I have tried making just a blank html file and in the head adding this between two style tags:

@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}

我还简化了它甚至只是使用 content：TEXT; 看看是否可以显示一些东西。这是支持任何地方吗？ this我特指的是 @page 和 @ bottom-right 标签，因为我已经获得了内容工作多次。

I have also simplified it even to just use content: "TEXT"; to see if I can get something to show up. Is this supported anywhere? By 'this' I'm specifically meaning the @page and @bottom-right tags, since I have gotten content to work many times.

推荐答案

这似乎不再工作了。

计数器必须先重置才能使用，根据 https://developer.mozilla.org/en-US/docs/CSS/Counters

Counters have to be reset before they can be used, according to https://developer.mozilla.org/en-US/docs/CSS/Counters.

您可以将开始号码设置为任何值，默认值为0.

You can set your starting number to whatever, the default is 0.

>

Example:

@page {
    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
    }
}

...。在现实世界中，只有PrinceXML支持此功能。

... in theory. In real world only PrinceXML supports this.

这篇关于浏览器支持CSS页面编号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！