何度か左右中央をどう表現するかについて考えていました。今まではtableタグで書いていた。それをもっといい表現がないかを考えてはいますが。
AozoraEpub3: 1.1.1b4Q ( Java 13.0.2 / Windows 10 )
— 焚書刊行会 (@imagawatatsuya) 2020年10月14日
Kindle Paperwhite表示にて、表題（中央レイアウト）の文字数が多い場合、改行が調整されず、 画面下がで見切れてしまった。なにか回避するための設定があるのだろうか。 pic.twitter.com/DvN14VEc8S
電書協EPUBガイドを見ているとCSSが空欄になっていた。ただ、それでもやっているのを見ると、非推奨項目を適応している場合もあるようです。
非推奨だからして、すべての端末で正常に表示できるかわからない。
中身を見てみると、横組みの中に縦組みを作って左右中央を表現しているようだ。
電書協EPUBガイド
【参考情報】※本ガイド非推奨項目
■縦組み左右中央ページ
[filename: p-***.xhtml]
[備考]
・組み方向の混在がサポートされているとはかぎらないので、対象とする RS の性能をよく確認すること
・内容がページから溢れると一部が表示されなくなるので、対象とする画面サイズなどをよく確認すること
・横組み中に縦組みブロックを入れ子とするため、組み方向が変わるときに上書きされない class の値（特に余白等）に注意すること
・天地の margin がゼロになるので、必要に応じて <div class="main"> の内側にさらに <div> を用意して、margin か padding を指定すること（この手法では <body> 及び <div class="main"> に margin、padding の追記は不可。.p-text など <body> に指定する class に margin などが指定されているときも期待どおりの表示にはならないので要注意）
・テキスト系ページで「vrtl block-align-center」を <body> ではなく <div class="main"> に指定したいときは、<body> の margin と padding をゼロにしておくこと
・左寄せにしたいときは下記の「block-align-center」を「block-align-left（or start）」に変更する
※横組みページなので「end = right」になることに注意
・扉（.p-tobira）などでも利用方法は同じ
・横組みの天地中央指定をしたいときは、下記の「hltr」と「vrtl」を入れ替えること
その際、main に width-100per を指定しないと右寄せとなるので注意
※ベースは縦組みなので、右から左に要素が配置されます
---------------------------------[sample code]---------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:epub="http://www.idpf.org/2007/ops"
xml:lang="ja"
class="hltr"
>
<head>
<meta charset="UTF-8"/>
<title>作品名</title>
<link rel="stylesheet" type="text/css" href="../style/book-style.css"/>
</head>
<body class="p-text">
<div class="main vrtl block-align-center">
<div class="start-2em"> // ←ページ全体の字下げには、さらに内側に <div> を用意
<p>あいうえおかきくけこさしすせそたちつてと</p>
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------
電書協 EPUB 3 制作ガイド
| 41
※以下は、画像を左下隅に置く例
[備考]
・地揃えにしたいとき、body 直下の <div class="main"> の高さを 100% に指定しないと WebKit 系では位置がずれるので注意
※横組みにするときは、高さではなく幅を 100% に指定すること
・下の例では、効果を確認しやすいよう、画像を画面天地 50% サイズに縮小表示してある
（「<img class="fit max-height-050per"」部分）
---------------------------------[sample code]---------------------------------
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:epub="http://www.idpf.org/2007/ops"
xml:lang="ja"
class="hltr"
>
<head>
<meta charset="UTF-8"/>
<title>作品名</title>
<link rel="stylesheet" type="text/css" href="../style/book-style.css"/>
</head>
<body class="p-text">
<div class="main vrtl block-align-left height-100per">
<div class="align-end"> // ←ページ全体の下寄せには、さらに内側に <div> を用意
<p><img class="fit max-height-050per" src="../image/img-001.jpg" alt=""/></p>
</div>
</div>
</body>
</html>
-------------------------------------------------------------------------------
