電子書籍のつくりかた

[22]縦書き用のスタイルシート

続いて、縦書き用のスタイルシートを見ていただきましょう。

 

@charset "utf-8";

p{
margin: 0;
}

body{
writing-mode: vertical-rl;
line-break: normal;
-epub-writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-epub-line-break: normal;
-webkit-line-break: normal;
}

span.tcy {
text-combine: horizontal;
-webkit-text-combine: horizontal;
-epub-text-combine: horizontal;
}

 

bodyの中にあるのが、縦書きに表示するための指示です。実際には1行目だけでも充分な可能性はありますが、すべての端末・アプリで確実に縦書きで表示するために指示が追加されていると考えてください。
この部分は、すべて理解する必要はありません。実際、私もわかりません(笑)
一種の「おまじない」です。ちゃんとすべてを理解している人が用意してくれたおまじないには、素直に従うのも、効率よく制作するためのコツです。

 

「span.tcy」は、縦中横用の設定。
縦中横というのは、縦書きの中に一部分だけ入る横書き部分のこと。二桁の数字や「!­」などの記号に使われます。
詳しい使い方は、またのちほど。

2013/07/14   admin
お問い合わせはこちらまで