基本設定
縦書き領域の指定
HTML要素に "h2vr_nn" （nnは数字）というクラスを指定すれば、ページのロード時に、その要素（以下、縦書き領域と呼びます）内を縦書きに変換して表示します。
縦書き領域内のフォントサイズや行間スペース、文字間隔は、それぞれ CSS の font-size、line-height, letter-spacing プロパティを指定することによって設定可能です。
以下に簡単な例を示します。
【スタイルシート】
.test{
font-size:16px;
line-height:1.5em;
margin:20px;
}
.space{
letter-spacing:1em;
}
【HTML】font-size:16px;
line-height:1.5em;
margin:20px;
}
.space{
letter-spacing:1em;
}
<div class="h2vr_12 test">
この要素内が縦書きに変換されます。<br />
十二文字で自動的に折り返されます。
<div class="space">文字間をすこしだけ開けてみましょう。</div>
そして元に戻る。
</div>
【表示】この要素内が縦書きに変換されます。<br />
十二文字で自動的に折り返されます。
<div class="space">文字間をすこしだけ開けてみましょう。</div>
そして元に戻る。
</div>
この要素内が縦書きに変換されます。
十二文字で自動的に折り返されます。
十二文字で自動的に折り返されます。
文字間をすこしだけ開けてみましょう。
そして元に戻る。
この場合、縦書き要素の高さは、フォントサイズと1行あたりの文字数から自動的に算出されます。縦書き領域にスタイル height が指定されていても、それを無視します。
縦書き領域の高さを固定する
縦書き要素の高さを固定したい場合は、クラス名 h2vr_0 を設定し、スタイルで height の値を指定してください。
【スタイルシート】
.test2{
font-size:16px;
line-height:1.5em;
height:160px;
margin:20px;
}
【HTML】font-size:16px;
line-height:1.5em;
height:160px;
margin:20px;
}
<div class="h2vr_0 test2">
このように指定した場合は、一行あたりの文字数がフォントサイズと要素の高さから自動算出されます。
</div>
【表示】このように指定した場合は、一行あたりの文字数がフォントサイズと要素の高さから自動算出されます。
</div>
このように指定した場合は、一行あたりの文字数がフォントサイズと要素の高さから自動算出されます。
縦書き領域の幅の指定
縦書き要素の横幅は、スタイルシートで width を指定するだけです。
width を絶対値（px値など）で指定した場合、文章がその幅からはみ出す可能性があります。そのときの h2vR.js の動作は以下のとおりです。
上記 1 の例
【スタイルシート】
【スタイルシート】
.test3{
width:200px;
font-size:16px;
line-height:1.5em;
}
【HTML】width:200px;
font-size:16px;
line-height:1.5em;
}
<div class="h2vr_10 test3">
一行あたり十文字の設定です。<br />
縦書き領域の横幅をスタイルシートで200ピクセルに設定しています。<br />
縦書き変換後の文字列がこの横幅を超える場合には、この例のように自動的に段組処理が行われます。
</div>
【表示】一行あたり十文字の設定です。<br />
縦書き領域の横幅をスタイルシートで200ピクセルに設定しています。<br />
縦書き変換後の文字列がこの横幅を超える場合には、この例のように自動的に段組処理が行われます。
</div>
一行あたり十文字の設定です。
縦書き領域の横幅をスタイルシートで200ピクセルに設定しています。
縦書き変換後の文字列がこの横幅を超える場合には、この例のように自動的に段組処理が行われます。
縦書き領域の横幅をスタイルシートで200ピクセルに設定しています。
縦書き変換後の文字列がこの横幅を超える場合には、この例のように自動的に段組処理が行われます。
上記 2 の例
【スタイルシート】
【スタイルシート】
.test4{
width:200px;
height:160px;
font-size:16px;
line-height:1.5em;
}
【HTML】width:200px;
height:160px;
font-size:16px;
line-height:1.5em;
}
<div class="h2vr_0 test4">
この領域の高さは160ピクセルに固定されています。<br />
また、縦書き領域の横幅をスタイルシートで200ピクセルに設定しています。<br />
この場合には、この例のように自動的にスクロールバーが追加され、スクロールすることによってはみ出した部分を見ることができます。
</div>
【表示】この領域の高さは160ピクセルに固定されています。<br />
また、縦書き領域の横幅をスタイルシートで200ピクセルに設定しています。<br />
この場合には、この例のように自動的にスクロールバーが追加され、スクロールすることによってはみ出した部分を見ることができます。
</div>
この領域の高さは160ピクセルに固定されています。
また、縦書き領域の横幅をスタイルシートで200ピクセルに設定しています。
この場合には、この例のように自動的にスクロールバーが追加され、スクロールすることによってはみ出した部分を見ることができます。
また、縦書き領域の横幅をスタイルシートで200ピクセルに設定しています。
この場合には、この例のように自動的にスクロールバーが追加され、スクロールすることによってはみ出した部分を見ることができます。
クラス h2vr_single
場合によっては、縦書き要素の高さを「1行あたりの文字数」で指定し、且つ、段組処理を行わせたくない（=縦書き領域の横幅からあふれた部分はスクロール表示にしたい）ということがあるかもしれません。
そのときには、縦書き要素にクラス h2vr_single を追加設定してください。
縦書き変換後の文字列が横幅を超えてしまった場合には、クラス h2vr_0 を指定した場合と同様の処理を行います。
【スタイルシート】
.test3{
width:200px;
font-size:16px;
line-height:1.5em;
}
【HTML】width:200px;
font-size:16px;
line-height:1.5em;
}
<div class="h2vr_10 test3 h2vr_single">
一行あたり十文字の設定です。<br />
縦書き領域の横幅をスタイルシートで200ピクセルに設定しています。<br />
クラス h2vr_singleが追加設定されているので、縦書き変換後の文字列がこの横幅を超える場合にはスクロールバーが表示されます。
</div>
【表示】一行あたり十文字の設定です。<br />
縦書き領域の横幅をスタイルシートで200ピクセルに設定しています。<br />
クラス h2vr_singleが追加設定されているので、縦書き変換後の文字列がこの横幅を超える場合にはスクロールバーが表示されます。
</div>
一行あたり十文字の設定です。
縦書き領域の横幅をスタイルシートで200ピクセルに設定しています。
クラス h2vr_singleが追加設定されているので、縦書き変換後の文字列がこの横幅を超える場合にはスクロールバーが表示されます。
縦書き領域の横幅をスタイルシートで200ピクセルに設定しています。
クラス h2vr_singleが追加設定されているので、縦書き変換後の文字列がこの横幅を超える場合にはスクロールバーが表示されます。
最終更新：2015.05.31
>> Next：レスポンシブデザインへの対応
- (c)2013-2016 tategaki.info,
a division of freefielder.jp