表示調整
閉じる
挿絵表示切替ボタン
▼配色
▼行間
▼文字サイズ
▼メニューバー
×閉じる

ブックマークに追加しました

設定
0/400
設定を保存しました
エラーが発生しました
※文字以内
ブックマークを解除しました。

エラーが発生しました。

エラーの原因がわからない場合はヘルプセンターをご確認ください。

ブックマーク機能を使うにはログインしてください。
6/8

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

 電子書籍を縦書きに変えるには、◯◯.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;」に対応しているようです。

評価をするにはログインしてください。
この作品をシェア
Twitter LINEで送る
ブックマークに追加
ブックマーク機能を使うにはログインしてください。
+注意+

特に記載なき場合、掲載されている作品はすべてフィクションであり実在の人物・団体等とは一切関係ありません。
特に記載なき場合、掲載されている作品の著作権は作者にあります(一部作品除く)。
作者以外の方による作品の引用を超える無断転載は禁止しており、行った場合、著作権法の違反となります。

この作品はリンクフリーです。ご自由にリンク(紹介)してください。
この作品はスマートフォン対応です。スマートフォンかパソコンかを自動で判別し、適切なページを表示します。

↑ページトップへ