動的な柱の作り方について

[落合香織]

はじめまして。

落合と申します。

vivliostyle.jsを試しに使ってみようと思ったのですが、

分からないことがあったので質問させて下さい。

ページ毎に動的に変わる柱（またはヘッダー・フッター）を出力したいのですが、

これは、現状のCSS、またはvivliostyleで出力可能でしょうか？

下記サンプルページの「CSSシークレット」では出来ている様に見えるのですが

やり方がよく分かりませんでした。

http://vivliostyle.com/ja/samples/

下記のstring機能を使って出来ないかと思ったのですが、

上手く出来ませんでした。

（Vivliostyle Chrome Extensionを使って試しています。）

HTML:

<h1>ここは見出しです</h1>

CSS:

@top-left{

    content: "first: " string(title, start);

    font-size: 16pt;

}

h1 { string-set: title contents; }

CSS自身、あまり詳しくなく無知な質問で申し訳ないです。

教えて頂けますと助かります。

よろしくお願い致します。

-----------------------------

凸版印刷株式会社

情報コミュニケーション事業本部

情報系製造事業部　技術本部

ＩＴインフラ部　アプリケーション開発T

落合　香織 （オチアイ　カオリ）

〒174-8558　東京都板橋区志村1-11-1

TEL: 03-3968-5481  FAX: 03-3969-0607

kaori....@toppan.co.jp

-----------------------------

[Shinyu Murakami]

落合さま、みなさま

ビブリオスタイル村上です。

vivliostyle.jsを試していただきありがとうございます。

> ページ毎に動的に変わる柱（またはヘッダー・フッター）を出力したいのですが、
> これは、現状のCSS、またはvivliostyleで出力可能でしょうか？

...
> 下記のstring機能を使って出来ないかと思ったのですが、
> 上手く出来ませんでした。

現在のところ、vivliostyleでstring機能が未実装です。

そのため、動的な柱の作り方は、別の機能を使う必要があります。

前に「Vivliostyle でのヘッダとフッタ」というスレッドへの投稿
https://groups.google.com/forum/#!msg/vivliostyle-ja/9e7JR9DnSak/X2s-K2yQCwAJ
で、少し説明している「Adaptive Layout」仕様 http://www.idpf.org/epub/pgt/ の「ページテンプレート」の機能を使います。


HTMLで、

<h1>ここは見出しです</h1>

というところを、次のように柱に表示するものを別の要素にします。

<h1>ここは見出しです</h1>
<div class="page-header">ここは見出しです</div>

CSSで次のようにすると、これが柱に表示されます：

.page-header {
display: none; /* 通常は表示しないよう */
}

@-epubx-page-template {
.page-header {
display: block;
text-align: center;
-epubx-flow-into: page-header;
-epubx-flow-options: static exclusive last;
}

@-epubx-page-master {
-epubx-utilization: 0.1;
@-epubx-partition content-area {
-epubx-flow-from: body;
}
@-epubx-partition header-area {
-epubx-flow-from: page-header;
width: 100%;
margin-bottom: 1em;
}
}
}


試してみてください。
（「CSSシークレット」では、この機能を使って動的な柱など実現してます。）


--
村上 真雄 / Shinyu Murakami
取締役会長 / Founder & CTO
株式会社ビブリオスタイル / Vivliostyle Inc.


落合香織 <kaori....@toppan.co.jp> wrote on 2016/07/11 19:53:05

> はじめまして。
> 落合と申します。
>
> vivliostyle.jsを試しに使ってみようと思ったのですが、
> 分からないことがあったので質問させて下さい。
>
> ページ毎に動的に変わる柱（またはヘッダー・フッター）を出力したいのですが、
> これは、現状のCSS、またはvivliostyleで出力可能でしょうか？
>
> 下記サンプルページの「CSSシークレット」では出来ている様に見えるのですが
> やり方がよく分かりませんでした。
> http://vivliostyle.com/ja/samples/
>
> 下記のstring機能を使って出来ないかと思ったのですが、
> 上手く出来ませんでした。
> （Vivliostyle Chrome Extensionを使って試しています。）
>

> *HTML:*
> <h1>ここは見出しです</h1>
>
> *CSS:*

> @top-left{
> content: "first: " string(title, start);
> font-size: 16pt;
> }
>
> h1 { string-set: title contents; }
>
>
> CSS自身、あまり詳しくなく無知な質問で申し訳ないです。
> 教えて頂けますと助かります。
>
> よろしくお願い致します。
>
>
> -----------------------------
>
> 凸版印刷株式会社
> 情報コミュニケーション事業本部
> 情報系製造事業部 技術本部
> ＩＴインフラ部 アプリケーション開発T
> 落合 香織 （オチアイ カオリ）
> 〒174-8558 東京都板橋区志村1-11-1
> TEL: 03-3968-5481 FAX: 03-3969-0607
> kaori....@toppan.co.jp
>
> -----------------------------
>

> --
> このメールは Google グループのグループ「Vivliostyle Project JA」の登録者に送られています。
> このグループから退会し、グループからのメールの配信を停止するには vivliostyle-j...@googlegroups.com にメールを送信してください。
> このグループに投稿するには、vivlios...@googlegroups.com にメールを送信してください。
> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msgid/vivliostyle-ja/CANboDRi%3D9nemWe6zXH35c-PEtFtTgF75ho8BFvqp4zmwXw%3DbgQ%40mail.gmail.com にアクセスしてください。
> その他のオプションについては、https://groups.google.com/d/optout にアクセスしてください。

[落合香織]

村上様

落合です。

ご返信ありがとうございます。

動的な柱の出力、確認出来ました。

ただ、@pageで指定していたマージン等が崩れてしまいました。

また、page-margin boxesの機能を使って出力していた見出しも出力出来なくなりました。

W3Cで定義されている@pageの機能と、EPUBのページテンプレート機能は併用出来ないという認識で良いでしょうか？

今回初めて利用したので、分かっていない部分も多いかもしれませんが、

ページテンプレート機能だと、かなりCSSを作り込む印象なので

string機能等が実装されるのをお待ちしております。

また、ご連絡させて頂くことがあるかも知れませんが、

何卒よろしくお願い致します。

-----------------------------

凸版印刷株式会社

情報コミュニケーション事業本部

情報系製造事業部　技術本部

ＩＴインフラ部　アプリケーション開発T

落合　香織 （オチアイ　カオリ）

〒174-8558　東京都板橋区志村1-11-1

TEL: 03-3968-5481  FAX: 03-3969-0607

kaori....@toppan.co.jp

-----------------------------

2016年7月12日 14:27 Shinyu Murakami <mura...@vivliostyle.com>:

このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msgid/vivliostyle-ja/20160712142711.7BB0.3B6C55AB%40vivliostyle.com にアクセスしてください。
その他のオプションについては、https://groups.google.com/d/optout にアクセスしてください。

[Shinyu Murakami]

落合さま、みなさま

ビブリオスタイル村上です。

> W3Cで定義されている@pageの機能と、EPUBのページテンプレート機能は併用出来ないという認識で良いでしょうか？

はい、残念ながら現在のところ、@page のmargin-box機能と、EPUB Adaptive Layout（EPUB拡張として提案されたもので、まだ標準仕様ではない）のページテンプレート機能は併用できません。
今後、string機能の実装などとともに、両方の機能を共存できるようにすることを考えています。
どうぞよろしくお願いいたします。

--
村上 真雄 / Shinyu Murakami
取締役会長 / Founder & CTO
株式会社ビブリオスタイル / Vivliostyle Inc.

落合香織 <kaori....@toppan.co.jp> wrote on 2016/07/13 18:54:48

> このディスカッションをウェブ上で閲覧するには、https://groups.google.com/d/msgid/vivliostyle-ja/CANboDRhfPXssiWzM6NfCi%2B3iHju3mUOd4f4o%3DP%3DpUec5_h7vXw%40mail.gmail.com にアクセスしてください。
> その他のオプションについては、https://groups.google.com/d/optout にアクセスしてください。