電子書籍(EPUB)で、テキストを画像に回り込みさせるためのCAS-UBの指定方法

今日は、CAS-UBで制作する電子書籍(EPUB)でテキストを画像に回り込みさせる指定方法を説明します。

CAS-UBの編集画面の「画像」入力支援ボタンで画像をアップロードすると、編集画面では次のようにマークアップが入力されます。


360ピクセル×360ピクセルの正方形画像

[[[:fig
{{img-360q.png}}
]]]
CAS-UBは、ブックオンデマンドに使えるPDF, 商用に耐えうる高品質な電子書籍・・・

解説
[[[:fig

]]]
は画像(fig)クラスの属性をもつブロックとなります。

CAS-UBのCSSテーマでは、画像はブロック内で中央配置するように設定されています(図1)。
20141001a
図1 CSSテーマ・グリーン2を指定してプレビュー(内容)表示したところ

この画像の周りにテキストを回り込みさせるには次のように指定します。:float-startは編集画面より追加入力してください。


360ピクセル×360ピクセルの正方形画像を左フロート

[[[:fig:float-start
{{img-360q.png}}
]]]
CAS-UBは、ブックオンデマンドに使えるPDF, 商用に耐えうる高品質な電子書籍・・・

解説
:float-start/:float-endはCAS-UBのCSSテーマに組み込まれている回り込み指定属性です。

:float-start 画像を行頭に配置してテキストを右(横書き)または下(縦書き)に回り込ませる。
:float-end 画像を行末に配置してテキストを左(横書き)または上(縦書き)に回り込ませる。

上のコードの例では、画像が行頭側に配置されて、テキストが画像の右に回り込みます(図2)。
20141001b
図2 テキストの回り込みをプレビュー