h2vR.js は、縦書きレイアウトに必要な フォントサイズ・行間スペース・1行あたりの文字数・領域の横幅 などの値を、縦書きにしたい要素に指定されているスタイルシート あるいは クラス名 から取得して処理を実行します。
スタイルシートの @media クエリを利用してスクリーン(ウインドウ)サイズによって適用されるスタイルを切り替える、いわゆるレスポンシブデザインを採用しているページでも、h2vR.jsは特別な設定を追加することなく、現在のスクリーンサイズでのスタイル値を適切に読み取って縦書き表示を行うことができます。
デスクトップPC からの閲覧時などで、閲覧者側がブラウザのウインドウサイズを変更した場合にも、h2vR.js はその変化に追随して縦書き要素を適切に再描画します。
以下に簡単な例を示します。
→ サンプルを見るにはこちらをクリックしてください。サンプルは別タブで開きます。
この例の場合、
…という具合になっています。
現在準備中です。
上記の例のように h2vR.js は、window の Resize イベントが発生する都度、縦書き領域を再変換・再描画します。
ページデザインによっては、この再変換・再描画処理が不要となる場合があると思います。その動作を抑制・制御する方法は次のセクション:再描画の制御 をご覧ください。