y的CSS页面x，用于@media打印 [英] CSS page x of y for @media print

问题描述

我将通过说我知道已经问过这个问题来开头这个问题，但是我能为这些问题找到的所有答案似乎都引用了不再有效的过时解决方案(至少在Firefox 56 [64位]中)

I'll preface this question by saying I know this question has been asked before, but all the answers I can find for these appear to reference an obsolete solution that no longer works (At least in Firefox 56 [64 bit])

过时的方法是曾经有一个名为pages的自动实例化的CSS计数器，因此从此SASS生成了一些简单的CSS:

The obsolete method is that there used to be an automatically instantiated CSS counter named pages, so a simple bit of CSS generated from this SASS:

footer {
    position: fixed;
    bottom: 0;
    left: 20px;

    &:after {
        counter-increment: page;
        content: "Page " counter(page) " of " counter(pages);
    }
}

用来做我想做的事.现在，它显示第[x]页为0".

Used to do what I want. Now it displays "Page [x] of 0".

我尝试使用CSS来重新创建自己的max-page计数器:

I have tried using this bit of CSS to recreate my own max-page counter:

@page {
    counter-increment: maxpage;
}

但是，在我的页脚中使用时，它也会返回0.

However this also returns 0 when used in my footer.

是否有合理的跨浏览器友好方式来获得此功能?

Is there any reasonably cross-browser friendly means of getting this functionality?

推荐答案

从CSS3开始，您可以在@page规则中指定计数器.这是一个示例:

As of CSS3 you can specify counters in the @page rule. Here is an example:

@page { counter-increment: page }

以上规则指示布局引擎创建一个称为页面"的计数器(按惯例被称为页面，可以是任何东西).每页增加此计数器.与任何计数器一样，您可以在文档中的任何位置使用计数器的当前值

The above rule instructs the layout engine to create a counter called "page" (it is called page by convention, it can be anything). This counter is incremented for each page. As with any counter, you can then use the current value of the counter anywhere in the document

例如，使用以下CSS规则:

For example with this CSS rule:

#pageNumber { content: counter(page) }

和这段HTML:

<span id="pageNumber"></span>

您可以将当前页码计数器用作HTML文档中的内容.您甚至可以走得更远.假设您要从10开始页码.您可以使用@page:first规则将第一页的计数器重置为值9.

You can use the current page number counter as content in the HTML document. You can even go further. Say you want to start your page number at 10. You can then use the @page:first rule to reset the counter for the first page to value 9.

@page { counter-increment: page }
@page:first { counter-reset: page 9 }

这两个规则的组合会将第一页的计数器重置为9.然后，对于每一页(包括第一页)，它将递增计数器.这样第一页的计数器值为10，第二页的计数器值为11，依此类推.

The combination of both rules will reset the counter for the first page to 9. Then for each page (including the first) it will increment the counter. This results in a counter value of 10 for the first page, 11 for the second and so on.

您也可以使用纯CSS

You can also use pure css

示例:

@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.

这篇关于y的CSS页面x，用于@media打印的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！