h2vR.js - 再描画の制御 - チュートリアル

再描画の制御

h2vR.js は、ウィンドウサイズに変更があった場合、window の resize イベントを検知して自動的に縦書き領域を再変換・再描画します。

レスポンシブデザインではない場合、この再変換・再描画が不必要なケースがあると思います。そのときは、縦書き領域に以下のクラスを追加指定することで、再変換動作を抑制することができます。

クラス：h2vr_liquid

ウインドウサイズの変化に伴って、縦書き領域の横幅のみが変化する場合に指定します。縦書きの構築に必要なスタイル値の再吟味 → 再変換を行いません。段組の切り直しのみを行います。

クラス：h2vr_fixed

ウインドウサイズの変化に関わらず、縦書き領域の幅や高さ・縦書き領域内にある要素のスタイルが変化しない場合に指定します。
h2vr_fixed が指定されていれば、その縦書き領域の再変換・再描画処理を一切行いません。

クラス：h2vr_liquid

縦書き変換を行いたいHTML要素に "h2vr_liquid" というクラスを追加指定すれば、ウィンドウサイズ変更に伴う縦書き領域の再変換・再描画処理を抑制し、段組の切り直し処理のみを行います。

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

【スタイルシート】

body{
  width:100%;
}

.test5{
  width:50%;
  margin:20px;
  padding:0.5em;
  font-size:16px;
  line-height:1.5em;
  border:1px solid red;
}

【HTML】

<div class="h2vr_12 h2vr_liquid test5">
ここが縦書き領域です。<br />
十二文字で自動的に折り返されます。<br />
この領域の横幅は、親要素の横幅に対して 50% となるようにスタイルシートで指定しています。<br />
つまり、このウインドウのサイズを変更すると、それに伴って縦書き領域の横幅が変化するわけですね。<br />
この例では、縦書きの構築に必要なスタイル値がレスポンシブに変化しないので、クラス h2vr_liquid を追加指定して再変換処理をスルーしています。<br />
h2vR.js は、段組の切り直しのみを行います。ブラウザのウインドウサイズを変更して、その動作を確かめてみてください。<br />
</div>

【表示】

→ サンプルを見るにはこちらをクリックしてください。サンプルは別タブで開きます。

クラス：h2vr_fixed

縦書き変換を行いたいHTML要素に "h2vr_fixed" というクラスを追加指定した場合、ウィンドウサイズ変更に伴う縦書き領域の再変換・再描画処理を一切行いません。