Question

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

由于FlyingSaucer应用了CSS，我无法使用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>

被放置。

我正在尝试使用上页样式（低级罗马）启动我的文档在我的文件中的具体位置之后 - 让我们说我想改变右头的内容或用不同的替换@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。我尝试使用〜选择器，但它不适用于更改前面的元素。

有人知道如何实现这一目标，还是可以指出我可以尝试的不同解决方案？

Answer 1

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

下面是简短示例＆＃34;介绍＆＃34;可以使用此方法实现页面。

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运行元素计数器样式

1 个答案: