h2vR.js - ドキュメント

h2vR.js 機能概要

h2vR.jsは、指定した要素内を縦書きに変換して表示するJavaScriptです。

縦書き領域内には、テキストだけでなく、画像やその他のHTML要素（div,p,spanなど）を置くことができます。また、ページ内に複数の縦書き領域を設置することも可能です。

以下のブラウザで縦書き表示が可能です。

縦書き領域内では、htmlの推奨タグのほとんどを縦書き表示に変換できます。それぞれの要素に指定されたスタイルも有効です。

但し、以下のような例外があります。

リストに関するタグ（li,dt,dl）
基本的に、ブラウザデフォルトのスタイル、またはページで定義されたスタイルを継承します。ただしリストの先頭に表示するマーカーは「・」に統一されます。
センタリング
centerタグではなく、スタイル text-align:center; の使用を推奨します。
スタイル position
縦書きエリア内の要素に position , left , top , right , bottom , float といったプロパティを設定すると、縦書きに変換したときにレイアウトがズレる原因となります。なんとか頑張って、marginやpaddingで要素の位置決めを行ってください。
img要素に設定した float プロパティは以下のように機能します。
スタイル float
IMG要素に float:left; または float:right; を指定することで、その画像に対してテキストの回り込み表示ができます。
floatプロパティが適切に効くのは IMG要素に対してのみです。回り込ませたいテキストは、float指定したIMG要素の後ろに記述する必要があります。（→ 詳細）

縦書きに変換されない要素
縦書き領域内に配置された pre, textarea, iframe, table, audio, canvas, embed, figure, videoの各要素（と、それらの要素内の要素）は縦書きに変換されません。
これらの要素を縦書き変換エリアに含める場合は、widthを明示してやったほうが安全です。横幅がフレキシブルなのであれば、この要素は縦書きエリアの外に置くほうが良いでしょう。

縦書き領域内では、レイアウトの都合上フォントの種類が固定されます。h2vR.jsは、各OSにおいて、以下のリストに示す『和文字（ひらがな・カタカナ・漢字）が等幅であるフォント』を利用します。

表示フォントの指定（ゴシック / 明朝の切り替え方法）については、チュートリアルを参照してください。

【ゴシック体フォント】

【明朝体フォント】

スタイルシートで、上記以外のフォントを強制的に適用することも可能ですが、その場合の表示については保証いたしません。

縦書きに変換する際、縦書き領域内の要素を分割することがあります。そのため、要素に割り振ったidが重複する場合があります。
縦書き領域内に style タグ、script タグを置いた場合に、上手く動作しない可能性があります。これらは縦書きエリアの外に書いたほうが安全です。
横書き時には見逃してくれる些細なhtmlのコーディングミス（閉じタグが無いなど）が縦書き変換失敗の原因になり得ます。特にInternet Explorerは厳しいようです。スクリプトが無限ループ地獄に落ち込んだ時などは、もう一度「ページのhtmlが正しいか」を確認してみてください。

最終更新：2017.06.22