電子書籍を作成しよう！

電子書籍を縦書きに変える

　電子書籍を縦書きに変えるには、◯◯.opfファイルと◇◇.cssファイルの内容を変えます。

　まず、◯◯.opfファイルの

<spine>

を

<spine page-progression-direction="rtl">

に変えます。

　◯◯.opfファイルの<spine>を変えないと、◇◇.cssファイルの内容を縦書きに変えても、KindlePreviewerやKindleに無視されてしまいます。

　ちなみに、小説のように、表紙から見た時に右綴じで、右のページから左のページへ読み進む場合は、

<spine page-progression-direction="rtl">

に、

技術書のように、左綴じで、左のページから右のページへ読み進む場合は、

<spine page-progression-direction="ltr">

に◯◯.opfファイルの<spine>を変えます。

　最後に、◇◇.cssファイルに下記を追記します。

―――――――――――――――――――

html {

-webkit-writing-mode: vertical-rl;

-webkit-text-orientation: mixed;

-epub-writing-mode: vertical-rl;

-epub-text-orientation: mixed;

writing-mode: vertical-rl;

text-orientation: mixed;

}

―――――――――――――――――――

　ePubの仕様で、CSS3のプロパティ名には接頭辞-epub-を付ける必要が有ります。

　text-orientationが、デフォルト値mixedの場合は、半角英字(ABC)と半角数字(1など)が横倒しで表示されてしまいます。

　text-orientationに、uprightを指定した場合は、ダッシュ(―)、半角ハイフンまたは半角マイナス記号(-)、全角ハイフンまたは全角マイナス(−)が横線で表示されてしまいます。

　text-orientationに、uprightを指定した場合は、半角括弧記号()、全角括弧記号（）、半角等号記号(=)、全角等号記号(＝)、半角の小なり記号(<)、全角の小なり記号(＜)、半角の大なり記号(>)、全角の大なり記号(＞)が横書きの状態で表示されてしまいます。

　半角英字(ABC)が無く、日本の(縦書きの)小説などでは半角数字の代わりに漢数字で書きましょう、というルールに従っていれば、text-orientationのデフォルト値mixedで良いと思います。

　Kindleは(X)HTMLタグのstyle属性に非対応なので、spanタグとCSSのクラス セレクタを利用すると、text-orientationの一部変更が可能です。

　一部変更の数が少なければ、手で書き直す事も可能ですが、多い場合は、高機能なテキストエディターで文字パターン「正規表現」で置換するか、epubファイルを作成するプログラムで対応する必要が有ると思います。

◇◇.cssファイル

―――――――――――――――――――

.verticalWriting {

-webkit-text-orientation: upright;

-epub-text-orientation: upright;

text-orientation: upright;

}

―――――――――――――――――――

△△..xhtml

―――――――――――――――――――

<p>血液型は<span class="verticalWriting">AB</span>型です。</p>

<p>第<span class="verticalWriting">1</span>部</p>

―――――――――――――――――――

　縦書きの一部の全角1文字分の大きさの正方形の中に半角英数字を横書きで表示したり印刷したりする事を日本では「縦中横」と呼ぶそうです。

　例えば、縦書きの日本の小説の文の中で、「2001」といった西暦の年数だけが縦書きではなく横書きで半角数字で印刷されているのを「縦中横」と呼ぶようです。

　2024年1月8日時点で、(X)HTMLで利用するCSSの仕様で「縦中横」は「text-combine-upright: all;」として定義されていて、ChromeやFirefoxといった最新のブラウザで対応されています。

　また、KindleもCSSの「縦中横」の「text-combine-upright: all;」に対応しているようです。