Vivliostyle でのヘッダとフッタ

[Hirofumi Saito]

斉藤といいます。

電子出版 EXPO はお疲れ様でした。

さて、Vivliostyle で質問ですが、既存の HTML に対して Pagination を行った際に
ヘッダとフッタを付けるにはどのようにすれば良いでしょうか?

具体的には各ページのヘッダ (上部中央) に特定の文字列を入れ、各ページのフッタ
(下部中央) にページ数を入れたいのですが、簡単な例のようなものはありますか?

よろしくお願いします。

[Toru Kawakubo]

斉藤さま

Vivliostyleの川久保です。
お問い合わせありがとうございます。

> On 2015/07/06, at 23:32, Hirofumi Saito <hirofum...@gmail.com> wrote:
>
> さて、Vivliostyle で質問ですが、既存の HTML に対して Pagination を行った際に
> ヘッダとフッタを付けるにはどのようにすれば良いでしょうか?
>
> 具体的には各ページのヘッダ (上部中央) に特定の文字列を入れ、各ページのフッタ
> (下部中央) にページ数を入れたいのですが、簡単な例のようなものはありますか?

ヘッダ・フッタを付けるには、CSS Paged Media Level 3というCSS仕様で定義されているPage-Margin Boxesを使います。

5. Page-Margin Boxes
http://dev.w3.org/csswg/css-page/#margin-boxes

例えばご質問の例では、以下のような指定になります。

@page {
@top-center {
content: "ヘッダ";
}
@bottom-center {
content: counter(page);
}
}

ただし、Page-Margin Boxesは今のVivliostyle.jsではまだ実装されていません。
ちょうど現在実装に取り掛かっているところであり、近日中に実装完了する予定ですので、実装され次第お知らせします。

ちなみに、ページ関連のCSS仕様の解説には以下があります。

CSSによるページ組版入門（日本語・非常に古い（2008年）ことに注意）
https://www.antenna.co.jp/AHF/ahf5/CSSInfo/CSS-Page-Tutorial.pdf

Building Books with CSS3（英語・2012年）
http://alistapart.com/article/building-books-with-css3

--
Toru Kawakubo （川久保 亮）
Vivliostyle Inc.
http://vivliostyle.com

[Hirofumi Saito]

川久保さん

斉藤です。

ご回答ありがとうございます。

2015年7月7日火曜日 0時35分17秒 UTC+9 Toru Kawakubo:

ただし、Page-Margin Boxesは今のVivliostyle.jsではまだ実装されていません。
ちょうど現在実装に取り掛かっているところであり、近日中に実装完了する予定ですので、実装され次第お知らせします。

ぜひ、お願いします。

これができれば、社内文書などを HTML で Web 表示と印刷を同時にカバーできるので
とても楽しみにしています。

[Toru Kawakubo]

Vivliostyleの川久保です。

> 2015年7月7日火曜日 0時35分17秒 UTC+9 Toru Kawakubo:
> ただし、Page-Margin Boxesは今のVivliostyle.jsではまだ実装されていません。
> ちょうど現在実装に取り掛かっているところであり、近日中に実装完了する予定ですので、実装され次第お知らせします。

遅くなってしまいましたが、Page-Margin Boxesの実装が完了しましたので、お知らせします。
最新版(master)のVivliostyle.jsを以下からダウンロードしてお試しください。

https://github.com/vivliostyle/vivliostyle.js/archive/gh-pages.zip

CSSの指定方法については、以前にもご案内した以下の資料を参考にしていただければと思います。

> 5. Page-Margin Boxes
> http://dev.w3.org/csswg/css-page/#margin-boxes
>

> CSSによるページ組版入門（日本語・非常に古い（2008年）ことに注意）
> https://www.antenna.co.jp/AHF/ahf5/CSSInfo/CSS-Page-Tutorial.pdf
>
> Building Books with CSS3（英語・2012年）
> http://alistapart.com/article/building-books-with-css3

なお、以前に以下のようなCSSをご案内しましたが、

> @page {
> @top-center {
> content: "ヘッダ";
> }
> @bottom-center {
> content: counter(page);
> }
> }

マージンにヘッダ・フッタを表示させるためには、ページマージンの大きさの指定も必要です。
例えば各辺に1cmのマージンを取る場合、

@page {
margin: 1cm;

@top-center {
content: "ヘッダ";
}
@bottom-center {
content: counter(page);
}
}

という指定になります。

[Hirofumi Saito]

川久保様

斉藤です。

遅くなりましたが、夏休みを活用して確認しました。

なかなか思い通りの設定をしていくのは大変ですが、きちんとヘッダーやフッタが
表示されることを確認しました。

企業の文書などだと、ヘッダーとフッタが指定のものである必要があるので、今までは
HTML を原本とするようなことができず、Web 用と印刷用を分けて作成する手間が
あったのですが、共通化することができそうです。

また、Chrome の拡張でもサポートしていただけると嬉しいです。

[Hirofumi Saito]

斉藤です。

いろいろ試してみて気が付いたのですが、ヘッダーとフッタが奇数ページしか
表示されていません。

あとヘッダーやフッタに (C) というか &copy; のようなものを良く使うと思いますが、
これはどのようにして入力するのでしょうか?

[Toru Kawakubo]

Vivliostyleの川久保です。

> On 2015/08/13, at 21:06, Hirofumi Saito <hirofum...@gmail.com> wrote:
> いろいろ試してみて気が付いたのですが、ヘッダーとフッタが奇数ページしか
> 表示されていません。

ご報告ありがとうございます。
調査したところ、すべてのページで1ページ目と同じヘッダー・フッターが表示されてしまうという不具合がありました。
この不具合については先ほど修正しました。
最新版(master)のVivliostyle.jsを以下からダウンロードしてお試しください。
https://github.com/vivliostyle/vivliostyle.js/archive/gh-pages.zip
なお、この修正に関しては以下のIssueに記録しています。
Page-margin box styles are ignored
https://github.com/vivliostyle/vivliostyle.js/issues/45

> あとヘッダーやフッタに (C) というか &copy; のようなものを良く使うと思いますが、
> これはどのようにして入力するのでしょうか?

CSSでUnicodeのコードポイントを指定して文字を記述するには、バックスラッシュでエスケープします。
（参照: http://www.w3.org/International/questions/qa-escapes#cssescapes）
Copyright SignはU+00A9ですので、CSSで記述する際には \A9 と書けばよいことになります。
ただ、それよりは直接文字 © を入力する方が簡単かとも思います。
（ちなみに上記は、MacのIMEで「コピーライト」で変換すると入力できました）

[liarnose]

はじめまして。

ハンドルネームで失礼します。ライアーノーズと申します。

現状のvivliostyleでもcssのカウンタとstaticなフローを利用すると

ノンブルのようなものが作れたので参考にしていただければ幸いです。

sample.css

    @page: first {

         counter-reset: page 0; /*カウンタのリセット*/

    }

    @page {

        ...

        counter-increment: page;/*カウンタ+1*/

    }

    #page-number {

        -epubx-flow-into: pn;

        -epubx-flow-options: static;/*描写しても「消費」しない*/

        text-align: center;

        font-size: 8pt;

        color: #000;

    }

    #page-number::after {

         content: counter(page);

    }

    @-epubx-page-master {

        

        /*本文の領域　他*/

        @-epubx-partition content-area {

        ...

        }

        

        /*ノンブルのための領域*/

        @-epubx-partition page-number {

            -epubx-flow-from: pn;

            -epubx-wrap-flow: auto;/*他の領域と干渉しない*/

            width: 100%;

            bottom: 10mm;

        }

あとはhtmlの本文先頭などの適当な場所に

<div id="page-number"></div>を放り込んでおけばOKです。

複数のページマスタを使い分ける場合は未検証ですが、

多分@-epubx-partition page-numberをコピペしとけば動くのではないかと思います。

2015年7月6日月曜日 23時32分54秒 UTC+9 Hirofumi Saito:

[Toru Kawakubo]

ライアーノーズさん、情報ありがとうございます。
少し補足させていただきます。

# EPUB Adaptive Layoutについて

ライアーノーズさんのサンプルで使用されている @-epubx-page-master などの指定は、
EPUBの仕様を策定しているIDPFが作成したEPUB Adaptive Layoutという仕様で定義されています。

EPUB Adaptive Layout
http://www.idpf.org/epub/pgt/

Vivliostyle.jsは、このEPUB Adaptive LayoutのJavaScript実装（Peter Sorotokinによる・ http://sorotokin.com/adaptive-layout/ ）を
ベースにして実装しているため、EPUB Adaptive Layoutの機能がそのまま使えるようになっています。
一方、IDPFにはこの仕様の標準化を今後進める予定はなく、将来W3Cで高度なページレイアウトのCSS仕様が標準化されれば、
それをEPUBに採用する方針のようです。
W3CのCSS仕様のうち、ページレイアウトに関連するものには以下があります。

CSS Paged Media Module Level 3
https://drafts.csswg.org/css-page/
CSS Generated Content for Paged Media Module
https://drafts.csswg.org/css-gcpm/
CSS Page Floats （VivliostyleのJohannes Wilmがエディターを担当）
https://drafts.csswg.org/css-page-floats/

Vivliostyleでは、これらのCSS仕様で定義される機能を実装していく予定です。
たとえば、 @page ルールによるページサイズ・マージンなどの指定や、 page-margin boxes を使ったヘッダー・フッターの配置は
CSS Paged Media で定義されているものです。
また、近いうちにCSS Page Floatsで定義される float: top/bottom 等も実装予定です。
現状のVivliostyle.jsがサポートしている機能の一覧など、まだ整備できていないのですが、
以下のChange Logファイルに各バージョンの更新履歴を記載していますので、参考にしていただければと思います。

https://github.com/vivliostyle/vivliostyle.js/blob/master/CHANGELOG.md

# サンプルコードについて

- @-epubx-partition content-area ルール内に -epubx-flow-from: body; を記載する必要がありますのでご注意ください。
（bodyフローが流れ込むpartitionがないと、本文を配置する領域がなく、本文が表示されません）
- CSS Paged Mediaで、組み込みのページカウンターとして'page'という名前のカウンターが定義されています。
counter-reset, counter-increment を使ってカウンターを定義されていますが、同名カウンターがすでに組み込みで定義されているため、
これらの定義は実は不要です。（あっても動作に変わりはありません）