【縦書き】Tips:縦書きのときと横書きのときで適用するスタイルを変更する。

PC版へ 2016年05月29日

縦書き表示用JavaScript・h2vR.jsです。

こんな質問をいただきました。

(前略)横書き時にのみ行間を広げたいのですが(後略)

つまり、縦書き時と横書き時で、文書に適用するスタイルを変更したい、と。

だいたいの場合、以下のような方法で可能です。

h2vR.js を利用して縦書き表示にした場合、縦書き領域は、クラス属性="h2v" を持つ div 要素内に配置されます(この div 要素は h2vR.js によって自動的に生成されます)。

なので、例えば p 要素の行ピッチを縦書き時/横書き時で変えたい場合だと、

/* 横書き時に適用されるスタイル */
p{
  line-height:1.2em;
}

/* 縦書き時に適用されるスタイル */
.h2v p{
  line-height:2em;
}

…などとしてやれば上手くいきます。

動作例を示します。

下の「縦横変換」ボタンを押すことにより、その下の点線で囲まれた部分が縦書き表示に切り替わります。

縦横変換

横書きの時の行の高さは 1.8em です。

上の「縦横変換」ボタンを押して縦書き表示にすると、その時の行の高さは 3em となります。次のようなスタイル…

.h2v p{ line-height:3em; }

…を指定してみたからです。

いかがでしょうか。

「縦横変換ボタン」の設置方法については こちらのブログ記事 を参照してください。

ということで。

関連記事

<<前の記事 | HOME | 次の記事>>

コメント

現在、コメント機能は停止しています。