几页后更改 CSS 运行元素计数器样式答案

【问题标题】：Changing CSS running element counter style after few pages几页后更改 CSS 运行元素计数器样式
【发布时间】：2018-05-09 18:43:31
【问题描述】：

我正在使用 FlyingSaucer 生成 PDF 文档，页码在运行页眉中。我想要实现的是能够更改应用于标题的运行元素的计数器样式。

由于 CSS 是由 FlyingSaucer 应用的，我无法使用 javascript。

示例 html：

<body>
    <div id="right-header"/>
    <div id="title-page"></div> <!-- page i -->
    <div id="toc-page"></div> <!-- page ii -->
    <div id="content"> <!-- counter reseted -->
        <div id="chapter1"> 
        <!-- page i ( should display 1 instead of i )-->
        <!-- page ii ( should display 2 )-->
        </div>
        <div id="chapter1"> 
        <!-- page iii ( should display 3 )-->
        <!-- page iv ( should display 4 )-->
        </div>
    </div> 
</body>

css:

#right-header {
    display: block;
    text-align: right;
    position: running(right-header);
}

#right-header:after {
    content: counter(page, lower-roman)
}

@page:right {
    @top-right {
        content: element(right-header);
    }
}

这段css正确地将标题应用到整个文档之后

<div class="right-header"></div>

已放置。

我正在尝试使用上述页面样式（lower-roman）开始我的文档在我的文档中的特定位置之后 - 比方说我想更改右标题的内容或用不同的替换 @page 内容文档其余部分的运行元素，样式设置为十进制数字。

我知道 FlyingSaucer 对 CSS3 的支持有限，但我找不到任何解决方案（不仅限于 FlyingSaucer）。

可以更改正在运行的标题内容，而不会影响之前的标题，因为 FlyingSaucer 允许使用 css 规则在文档的任何位置重置计数器。

-fs-page-sequence: start;

只有在那之后才能看到变化。

所以我目前的状态是我的页面编号为小罗马 i-iv（用于标题页、TOC 等），然后重置回 i 并递增直到文档末尾。我需要做的就是改变

#right-header:after {
    content: counter(page, lower-roman)
}

到

.right-header:after {
    content: counter(page)
}

或将显示的运行元素切换到新元素。

我尝试过的另一种解决方案增加了解决此问题的另一种可能性：

<div id="right-header">
    <div id="before"/>
    <div id="forcontent"/>
</div>

#forcontent {
    display: none <!-- initially not displayed for a few first pages -->
}
#before:after {
    content: counter(page, lower-roman)
}

#forcontent:after {
    content: counter(page)
}

使用此代码，我认为解决方案是在#content 的开头启用#forcontent 并禁用#before。我曾尝试使用 ~ 选择器，但它不适用于更改前面的元素。

有人知道如何实现这一点，或者可以指出我可以尝试的不同解决方案吗？

【问题讨论】：

标签： css flying-saucer css-paged-media

【解决方案1】：

在处理其他事情时，我发现 FlyingSaucer 支持 css3 命名页面 (https://www.w3.org/TR/css3-page/#using-named-pages)，它允许元素具有不同的 @page 定义，而另一个元素设置为运行页眉和页脚。

以下是如何使用此方法实现“介绍”页面的不同样式的简短示例。

html:

<html>
    ...
    <div id="introduction-right-header-placeholder">...</div>
    <div id="content-right-header-placeholder">...</div>
    <div class="introduction">
        <!-- these pages will have roman letters as page numbers -->
        ...
    </div> 

    <div class="content">
        <!-- these pages will have decimal page numbers -->
        ...
    </div> 
    ...
</html>

css:

#introduction-right-header-placeholder {
    text-align: right;
    position: running(introduction-right-header);
}

#introduction-right-header-placeholder:after {
    content: counter(page, lower-roman)
}

#content-right-header-placeholder {
    text-align: right;
    position: running(content-right-header);
}

#content-right-header-placeholder:after {
    content: counter(page);
}

.introduction {
    page: introduction-page;
}

.content{
    page: content-page;
}

@page introduction:right {
    @top-right {
        content: element(introduction-right-header);
    }
}

@page content:right {
    @top-right {
        content: element(content-right-header);
    }
}

这个例子展示了如何在 FlyingSaucer 中为右侧页面添加不同样式的页码（我删除了左侧以减少代码量）。

【讨论】：