1

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>

配置されます。

上記のページ スタイル ( lower-roman ) を使用してドキュメントを開始しようとしています。ドキュメント内の特定の場所の後で、right-header のコンテンツを変更するか、残りの @page コンテンツを別の実行要素に置き換えたいとします。スタイリングが 10 進数に設定されたドキュメント。

FlyingSaucer が CSS3 のサポートを制限していることは知っていますが、そのような問題の解決策 (FlyingSaucer だけに限らない) を見つけることができません。

FlyingSaucer では css ルールを使用してドキュメントの任意の時点でカウンターをリセットできるため、実行中のヘッダーの内容は以前のヘッダーに影響を与えずに変更できます。

-fs-page-sequence: start;

そして変化はその時点以降にのみ目に見えます。

したがって、私の現在のステータスは、小文字の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)
}

このコードでは、解決策は #forcontent を有効にし、#content の先頭で #before を無効にすることだと思います。~ セレクターを使用してみましたが、前の要素を変更することはできません。

これをどのように達成できるか、または私が試すことができるさまざまなソリューションを教えてくれる人はいますか?

4

1 に答える 1