1

I am generating PDF document using FlyingSaucer with page numbers in running header. What I am trying to achieve is to be able to change style of counter applied to running element used for header.

Since the CSS is applied by FlyingSaucer I cannot use javascript.

Example 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);
    }
}

This piece of css correctly applies headers to the whole document after 

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

is placed.

I am trying to start my document with above page styling ( lower-roman ) and after specific place in my document - let's say I would like to either change content of right-header or replace @page content with different running element for the rest of the document with styling set to decimal numbers.

I know that FlyingSaucer has limited CSS3 support but I cannot find any solution ( not restricted to only FlyingSaucer) for such problem.

Content of running header can be changed without effect on previous headers as FlyingSaucer allows to reset the counter at any point of the document using css rule.

-fs-page-sequence: start;

and change is visible only after that point.

So my current status is that I have pages numbered with lower-roman i-iv ( for title page, TOC etc. ) and then reset back to i and increment till the end of document. All I need to do is to change 

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

to 

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

or switch displayed running element to the new one.

Another solution I have tried which adds another possibility to solve this problem:

<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)
}

with this code I think the solution would be to enable #forcontent and disable #before at the beginning of #content. I have tried working with ~ selector but it doesn't work for changing preceding elements.

Does anybody know how this could be achieved or could point me to different solutions I could try?

4

1 回答 1

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

于 2018-04-30T19:57:36.203 回答