• 目次
  • h2vR.js

    ドキュメント

    h2vR.js 機能概要

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

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

    動作環境

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

    • Google Chrome
    • Firefox 3.5〜
    • Safari 3.1〜
    • Internet Explorer 9〜
    • Opera 15〜
    • Microsoft Edge
    • その他、現行の WebKit, Blink, Gecho, Tridentレンダリングエンジンを採用しているウェブブラウザ。

    縦書き領域内で使用できるHTMLタグやスタイル

    縦書き領域内では、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において、以下のリストに示す『和文字(ひらがな・カタカナ・漢字)が等幅であるフォント』を利用します。

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

    【 ゴシック体フォント 】
    • Windows:メイリオ または MSゴシック
    • Mac OS:ヒラギノ角ゴシック
    • iOS:ヒラギノ角ゴシック
    • Android:Android:Droid Sans Japanese または モトヤLシーダ
    • Ubuntu:TakaoExゴシック
    • Noto Sans CJK JP
    【 明朝体フォント 】
    • Windows:MS 明朝
    • Mac OS:ヒラギノ明朝
    • iOS:ヒラギノ明朝
    • Android:Android:Droid Sans Japanese または モトヤLシーダ
    • Ubuntu:TakaoEx明朝
    • Noto Serif CJK JP

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

    その他

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