縦書き書籍(EPUB)で画像を左右中央配置するためのCAS-UBの指定方法

縦書きの書籍(EPUB)に画像だけのページを入れて、そのページで画像を左右中央配置するには次のように指定します。

1.「構成編集」で画像だけの記事を作る
2.画像のブロック([[[:fig 画像]]]を設定する(図1)

fig-center
図1 画像のブロックに :fig を指定

説明
行頭の[[[はブロックの開始、その直後の:figはそのブロックを画像ブロックとして扱うことを示します(クラス属性と言います)。
=に続く文字列はキャプションです。
{{画像ファイル名}} (代替テキストを入れるときは、|で区切ってテキストを置きます。{{画像ファイル名|代替テキスト}}
]]]でブロックの終了を示します。
マークアップ支援ボタン「画像」を使って画像をマークアップするとマークアップが自動的に設定されます。

3.その記事について次の設定をします(図2)
(1) 文字進行方向 「横書き」  この頁だけ横書きになります
(2) タイトルを本文に出す チェックをオフに
(3) タイトルを目次に出す チェックをオフに
fig-center2
図2 記事の横書き設定

説明
(1)文字進行方向は記事単位に指定できます。これにより電書協ガイド方式のタグを出力します[1]
(2)、(3)は画像の中央配置とは関係ありません。画像だけのページのタイトルを本文と目次に出さないための設定です。

4.EPUB生成のCSSテーマで「縦書き」を選択し、お好きなCSSテーマを選択します。EPUB全体が縦書きになります(図3)
fig-center3
図3 EPUB生成「一般」で縦書きを指定

5.EPUB3では、画像だけのページができて、画像が左右中央配置になります(図4)
centera
図4 画像とキャプションが左右中央に配置

説明
CAS-UBのCSSテーマではデフォルトで画像のブロック(.figが設定されているブロック)を中央揃えする設定がなされています。但し、この中央揃えは、横書きの左右中央、縦書きの上下中央として働きます。そこで、画像の入ったページだけを横書きに設定することにより左右中央揃えにできます。
ちなみに、中央配置とは「テキストの中央配置(text-align:center)」、すなわち、文字を書き進める方向で見た時の中央配置です。行を進める方向での中央配置は、EPUB3.0では簡単には指定できません。

(注意)ほとんどのEPUBリーダーはキャプションをテキストで設定すると画像が大きくなって上下に一杯になったときキャプションと画像を別ページに配置してしまいます(泣き別れ)(図5)。現在、このようなEPUBリーダーで泣き別れを避けるには画像とキャプションをまとめて一つの画像にするしかありません。
center
図5 画像とキャプションの泣き別れ

[1] CAS-UB 5月23日のアップデート、ファイル単位の組み方向設定で電書協方式CSSに対応
[2] EPUBとPDFのサンプルを「CAS-UBで作成したPDFとEPUBのサンプルファイル」の3.2 「船中八策」(坂本 竜馬)(2)に掲載しました。

注釈の利用形態について(W3Cの注釈ユース・ケース)

W3Cの注釈ユース・ケース(Annotation Use Cases W3C First Public Working Draft 13 March 2014)より、注釈の利用としてどのようなケースが想定されるかをピックアップしました。

注釈には実に多様な側面があります。

○5分野
・出版物全体に対する注釈
・出版物の一部に対する注釈
・先進的な注釈
・注釈の出版
・アクセシビリティと国際化

○出版物全体への注釈
・書籍に対する注釈を購買の参考資料などとして公開する。
・所有する書籍にタグをつける。タグは用語集から抽出する。蔵書をタグ付けして分類する用途。
・出版物の構造化したレビューシステム。星の数などのフィールを用意する。テキストを含む。ビアレビューにも通じる。
・概要を伝えるWebと、対象となるWeb本体。
・注釈には相当のメタデータが必要。メタデータでユーザーなどを認識する。
・一つの出版物に対する複数の注釈。リソースが異なる。

○出版物の一部に対する注釈
・読んでいる位置にしおりを付ける。
・文章の範囲をマーカーでハイライトする。強調が目的。ハイライトした範囲を記録して比較、引用、などする。
・文章の範囲にコメントする。コメントの可視化ツールが欲しい。
・ビデオや画像など埋め込まれたオブジェクト、またはその一部、代替テキストへのコメント。
・出版物の複数個所を比較するための注釈。一つの出版物内、または複数の出版物同士の比較。
・対象が変化したときの妥当性を決定する。

○先進的な注釈
・フォーマットを超える注釈。EPUB-PDF-HTMLなどの間で共有。
・バージョン間の注釈。
・注釈のスタイル、レイアウトの保持。
・変化する状態に応じた注釈。オンラインホテル情報で単価に応じて、など。
・ユーザーの操作状態の記録。
・注釈が本文やターゲットに応じて複数の選択肢をもつ。言語、場所などに依存する注釈。
・多数の、動的に定義される対象に対する注釈。

○注釈の出版
・注釈の組の出版。または他人への提供。
・注釈の永続性。ユニークなIDなど。
・注釈をシステム間で移転する。
・注釈またはその一部を非公開とする。
・注釈をつけた出版物が非公開のとき。

○アクセシビリティ、国際化
・リソースにアクセシビリティを追加するための注釈。
・注釈の位置をわかるようにする。
・国際化情報のために注釈を使う。

[1]注釈実装と注釈サービスの拡大、EPUBリーダーでの実装、および注釈の標準化への動き。

9月17日ライトニング・トーク「AH Formatter V6.2の特徴とFO、CSS」のご紹介

9月17日EDUPUB Tokyo 2014にてライトニング・トークをさせていただきました。そのスライドとナレーション(日本語の原文)です。実は英文は日本語から翻訳してもらったものなのでした。

スライド1
Antenna House(AH)Formatter V6.2はXMLを組版してPDFなどを出力するツールです。

スライド2
2000年11月に最初のバージョンを発売し、その後14年に渡り機能強化を続けています。次にいくつか機能を紹介します。

スライド3
特徴1は多言語サポートです。縦書き文字、アラビア文字、ヘブライ文字のような右から左へ書く文字、チベット文字を除く主なインドの文字、主要な東南アジアの文字を組版できます。

スライド4
特徴2は拡張したフロート機能です。オブジェクト配置を最適化できます。JIS X4051の仕様に従って、図版の位置を自動調整できます。

スライド5
フロート拡張の多くは、IRS(米国財務省の内国歳入庁)の要求で追加されました。
※この写真は納税ガイドとは関係ありません。

スライド6
特徴3はMathML V3.0のサポートです。MathMLV3.0では新しい機能として初等数学(算数)表現が追加されました。

スライド7
レイアウトの指定はXSL-FOまたはCSSのどちらかの方式を用います。どちらを使ったら良いでしょうか?
FOのプロパティはCSS2から引用したものが多いです。また、AH FormatterはFOとCSSを並行して独自に拡張しています。従って、大よそどちらでも同じレイアウトを指定できます。
FOとCSSの主な相違点はスタイルを適用する仕組みです。

スライド8
FOは印刷のための技術であり、サーバー上のバッチ処理を前提とします。印刷対象XMLをXSLTなどでFOに変換します。レイアウト・プロパティを変換後のFOに対して適用します。
XSLTではXPathで要素や属性を指定します。プロパティは属性セットとして用意します。そしてプロパティを適用する条件を厳密にきめ細かく指定できます。XSLTではFOを作るための複雑な処理を記述できます。

スライド9
CSSはWebの技術であり、簡単な指定で、高速な処理、ダイナミック・レイアウトが求められています。
現在のCSSはページ媒体に対するレイアウト指定機能は弱く、W3C CSSの作業グループで、現在、ページ媒体に対するレイアウト指定の方法が議論されています。現時点でAH Formatterのページ媒体出力はAHの独自拡張です。
CSSではレイアウトを適用するXHTMLの要素や属性をselectorで選択します。また、カスケーディング規則とやや複雑な優先順位の規則があります。
この仕組みはレイアウトの適用条件が簡単な場合に向いています。しかし、レイアウト適用条件が複雑になると記述が難しくなります。

スライド10
以上により、Antenna Houseは、高度で複雑なレイアウトの頁を作るにはFO、シンプルなレイアウトの頁を作るにはCSSを用いることを推奨します。

※レイアウトが複雑かどうかということよりも、XMLから組版オブジェクトを作り出すロジックが簡単かどうかということです。CSSのセレクタとカスケードの仕組みでは複雑なロジックを記述するのは不可能でしょう。Javascriptを書いたらどうかという説もありますが、CSSのロジックの弱点をJavascriptで補うのならば、XSLTを学ぶ方が生産的ではないかと思います。

EPUB標準化関連活動のアップトゥデイト 2014/9/15

9月16日からEDUPUB Tokyo 2-14[1]が開催されます。そこで、EPUB標準化活動とEDUPUBについて1月時点[2], 6月時点[3]に引き続き進捗を整理してみます。

※9月18日更新しました。配布可能オブジェクト(Distributed Object)を追加。注釈をEDUPUB関連に移動。

1.EPUB 3.0.1 
EPUB 3.0.1は6月26日付けでIDPFの勧告仕様となりました。
EPUB 3.0.1

2. EPUB関連仕様
(1) 索引(EPUB Index)
・仕様書は勧告手前で2月28日公開(6月時点から変化なし)。
EPUB Indexes 1.0

(2) ハイブリッドレイアウト (Advanced-Hybrid Layout Working Group)
・8月27日にドラフト仕様書が改訂されました。この3か月で1歩前進しています。
EPUB Previews
EPUB Multiple Renditions
EPUB Region-Based Navigation
Magazine Structural Vocabulary

(4) 辞書
ワーキング・グループとしてのドラフトが2月4日付けで公開(6月時点から変化なし)。
EPUB Dictionaries and Glossaries Working Group Draft 20140204

3.EDUBPUBプロファイル
EDUPUBプロファイル仕様は、9月8日にドラフト第2版が公開されました。2014年内に最初のバージョンを完成させる予定です。
EPUB 3 EDUPUB Profile Draft Specification 8 September 2014

4. EDUPUB関連仕様
(1) 注釈(Open Annotation)
・ドラフト仕様書は5月28日公開(6月時点から変化なし)。
Open Annotation in EPUB Draft Specification 28 May 2014

(2) 配布可能オブジェクト
・ドラフト仕様書は5月28日公開(6月時点から変化なし)。
EPUB Distributable Objects Draft Specification 28 May 2014

(3) Widgets
EDUPUB用WidgetはGitHubとGoogle Docsをベースに議論が進んでいます。
IDPF/widgets
EPUB Widget Packaging and Integration

[1] EDUPUB Tokyo 2014
[2] EPUB標準化関連活動のアップトゥデイト 2014/1/18
[3] EPUB標準化関連活動のアップトゥデイト 2014/6/15
[4] EDUPUB プロファイル仕様 (5/28ドラフト) のあらまし

Wordで画像のレイアウトオプション「行内画像」と、「それ以外」の設定、インポート扱いの相違

CAS-UBのWordインポートで、図は、Wordで図の書式設定 – レイアウト が「行内」の場合、インライン画像(文字列中に挿入されている図)としてマークアップされます。

インライン画像は、左寄せに配置(字下げありの場合は1文字分右にずれます)され、CSS で表示サイズの調整はしていません。この場合、ビューアーによっては大きな画像の右側が見切れてしまいます。

Wordで図の書式設定 – レイアウト が「行内」以外の場合、図はブロック画像としてマークアップされます。ブロック画像は、中央に配置され、画像サイズが大きいときは表示を縮小して画面に収めるように、CSS で調整しています。

サイズの大きな画像や、中央配置したい画像は、Wordで図の 書式設定 – レイアウト を「行内」以外 に設定するほうがよいでしょう。

※ 書式設定 – レイアウトを「行内」から、「行内」 以外に変更すると、本文に図の高さの分の空行が必要になり、レイアウトが崩れます。設定を変更する前に、図の後に充分な改行を補っておくと、後の調整がしやすくなります。

例 Word文書をCAS-UBにインポートするとき、画像レイアウトオプションで行内にすると、CAS-UBでインライン画像のマークアップとなり、行内以外ではブロック画像のマークアップとなります。

(1) Word文書の画像・レイアウトの設定
word-image-option

(2) CAS-UBにインポート

レイアウトオプション:行内{{i01-03000001.png|i01-03000001.png}}

レイアウトオプション:行内以外

[[[:fig
{{i01-03000002.png|i01-03000002.png}}
]]]

(文字列の折り返し上下)