【縦書き】Tips：縦書きのときと横書きのときで適用するスタイルを変更する。
縦書き表示用JavaScript・h2vR.jsです。
こんな質問をいただきました。
（前略）横書き時にのみ行間を広げたいのですが（後略）
つまり、縦書き時と横書き時で、文書に適用するスタイルを変更したい、と。
だいたいの場合、以下のような方法で可能です。
h2vR.js を利用して縦書き表示にした場合、縦書き領域は、クラス属性="h2v" を持つ div 要素内に配置されます（この div 要素は h2vR.js によって自動的に生成されます）。
なので、例えば p 要素の行ピッチを縦書き時/横書き時で変えたい場合だと、
/* 横書き時に適用されるスタイル */
p{
line-height:1.2em;
}
/* 縦書き時に適用されるスタイル */
.h2v p{
line-height:2em;
}
p{
line-height:1.2em;
}
/* 縦書き時に適用されるスタイル */
.h2v p{
line-height:2em;
}
…などとしてやれば上手くいきます。
動作例を示します。
下の「縦横変換」ボタンを押すことにより、その下の点線で囲まれた部分が縦書き表示に切り替わります。
縦横変換横書きの時の行の高さは 1.8em です。
上の「縦横変換」ボタンを押して縦書き表示にすると、その時の行の高さは 3em となります。次のようなスタイル…
.h2v p{ line-height:3em; }
…を指定してみたからです。
いかがでしょうか。
「縦横変換ボタン」の設置方法については こちらのブログ記事 を参照してください。
ということで。
コメント