h2vR.js - 動作・表示の制御 - チュートリアル

動作・表示の制御

h2vR.js は、縦書き領域に特別なクラス名を追加指定することで、縦書き表示のカスタマイズが行えます。

縦書きにしたい領域に、クラス h2vr_single を追加指定し、強制的にシングルカラム表示にすることができます。詳しくはクラス h2vr_single の項をご覧ください。

h2vR.jsは、通常縦書き領域内をゴシック体フォントで表示します。フォントの種類は閲覧環境によって最適なものが自動的に選択されます。

明朝体で表示したいときには、クラス名 h2vr_mincho を追加指定してください。

【スタイルシート】

.test6{
  width:250px;
  margin:20px;
  padding:0.5em;
  font-size:20px;
  line-height:1.5em;
  border:1px solid red;
}

【HTML】

<div class="h2vr_15 test6">
ここが縦書き領域です。<br />
初期状態では、h2vR.js は縦書き領域内をゴシック体フォントで描画します。<br />
</div>

【表示】

ここが縦書き領域です。
初期状態では、h2vR.js は縦書き領域内をゴシック体フォントで描画します。

【HTML】

<div class="h2vr_15 test6 h2vr_mincho">
ここが縦書き領域です。<br />
クラス h2vr_mincho を指定したので、縦書き領域内は明朝体フォントとなります。<br />
</div>

【表示】

ここが縦書き領域です。
クラス h2vr_mincho を指定したので、縦書き領域内は明朝体フォントとなります。

表示に使用するフォントは h2vR.css で定義されています。これ以外のフォントをスタイルシートで指定することも可能ですが、フォントの種類によって、行が揃わないなどの表示不具合が生じる可能性があります。

h2vR.js は、縦書き領域内の pre要素、table要素、iframe要素、textarea要素などに対しては縦書き変換を行いません。これらの要素は横書きのまま表示されます。

それ以外の要素を横書きのまま保持したい場合には、当該要素にクラス h2vr_ignore を設定してください。ただし、この指定が有効なのは div要素に対してのみです。

以下に簡単な例を示します。

【スタイルシート】

.test7{
  width:100px;
  margin:20px;
  font-size:16px;
  border:1px solid #ccc;
}

【HTML】

<div class="h2vr_15 test6">
ここが縦書き領域です。<br />
<div class="test7 h2vr_ignore">
この領域内は横書きが維持されます。
</div>
如何でしょうか。この機能、使われる場面はあるのでしょうか？<br />
</div>

【表示】

ここが縦書き領域です。

この領域内は横書きが維持されます。

如何でしょうか。この機能、使われる場面はあるのでしょうか？

最終更新：2015.05.31