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

Question

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

由于 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 在

之后正确地将 header 应用于整个文档

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

被放置。

我正在尝试使用以上页面样式开始我的文档 (lower-roman) 在我文档中的特定位置之后 - 让我们说我想更改 right-header 的内容或用不同的内容替换 @page 内容运行文档其余部分的样式设置为十进制数字的元素。

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

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

-fs-page-sequence: start;

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

所以我目前的状态是我的页面编号为 lower-roman i-iv（用于标题页、目录等），然后重置回 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。我试过使用 ~ 选择器，但它不适用于更改前面的元素。

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

Answer 1

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

下面是如何使用此方法为 "introduction" 页面实现不同样式的简短示例。

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 中为右侧页面添加不同样式的页码（我删除了左侧页面以减少代码量）。

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

Changing CSS running element counter style after few pages

css

flying-saucer

css-paged-media

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

Changing CSS running element counter style after few pages

css

flying-saucer

css-paged-media

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