リフロー縦書きのセンタリング小ネタ

2013/8/7 [11:57:42] (水)

EPUB3リフローの縦書きで困るのが、縦書きの中でのセンタリング。
縦書きで中央揃えといったら、ページの左右に対して中央に配置されることだろう。なのにページの天地に対して中央揃えされてしまう。なんじゃらほい。

タイトルが１〜２行だけあるような扉ページに関しては以前書いた通り
『EPUB3リフローレイアウトで扉ページ』  （2013/4/1）

bodyを横書きにして、タイトルの入るブロック要素をセンタリングして、ブロック要素の中を縦書きにすることで解決。
・EPUBcheckではエラー、警告ともになく通る。
・リーダーは、ibooks kindle koboがOK。KinoppyがNG。

小見出しなどにも縦書きのセンタリングを使いたいことがある。

この小見出しは、数字部分と下の小見出し２行の部分で構成。

【タイトルや小見出しの仕込みが以下】

・opfファイルのmanifestとspine部分。タイトルと本文の２つのファイル構成

・タイトルページのxhtml

body{ line-height:1.7; text-align:justify; margin:0; paddin:0; font-size:100%; writing-mode:vertical-rl; -epub-writing-mode:vertical-rl; } p{ text-indent:1; clear:both; } .horizontal{ margin:0; padding:0; writing-mode:horizontal-tb; -epub-writing-mode:horizontal-tb; } .tcy{ font-size:0.9em; letter-spacing:-0.1ex; text-combine:horizontal; writing-mode:horizontal-tb; -epub-writing-mode:horizontal-tb; }

・本文のxhtml（小見出しのある冒頭部分）

小見出し全体 div.komidashi{ clear:both; float:left; margin-right:3.4em; margin-left:3.4em; } 小見出しの数字部分 div.komidashi div.num{ float:left; font-weight:bold; font-family:sans-serif; font-size:2em; padding-bottom:0.2em; line-height:1.5; } 小見出しの文字部分 div.komidashi div.str{ float:left; font-weight:bold; font-family:sans-serif; font-size:1em; line-height:1.5; }

この小見出しのセンタリングがうまくいかずに試行錯誤。line-height で調整できることに気づいた（って、WEBでは行の高さを揃えるのに使われる常套手段。とっとと気づくべきだった）

文字の大きさは、数字部分が2em。文章部分が1em。
左から
１）
数字はline-heightの指定無し（bodyに指定されたline-height:1.7）
文章はline-height:1
２）
数字のline-height:1
文章のline-height:1
３）
数字のline-height:1
文章のline-height:1.5
３）
数字のline-height:1.4
文章のline-height:1.5

文字の大きさに応じてline-heightは違ってくる。計算で出るけど計算するより身体で覚える現物合わせ。

あっさりさくっと、縦書きの時は text-align:center が左右に対してセンタリングしてくれればこんな面倒なことをする必要はないんだけどね。

[08/07 20:56:59] 追記。
上記の小見出しは、文字サイズを大きくして縦におさまらなくなると、数字部分と文字部分が横並びに。floatで並べただけのブロック、というので同じ。リフローは面倒くさいことが多いなぁ。

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら