動作するブラウザ

以下のブラウザで、縦書き変換 / 表示が可能です。
  • Firefox 3.5+
  • Safari 3+
  • Google Chrome
  • Internet Explorer 8+ （IE 10対応）
  • Opera 10.5+, Opera 15
  • その他、上記のブラウザのバージョンに対応した Gecho / WebKit / Trident / Presto いずれかのエンジンを搭載したブラウザ
Opera 10.x および 11 の一部のバージョンでは、縦書きレイアウトが崩れてしまう場合があります。これらのバージョンのOperaが持つ「スタイル指定の際のfont-family設定まわりの不具合」が原因のような気がするので、対処は難しいかもしれません。
また、h2v.js ver3.3.0 以降に追加された新機能は、Internet Explorer 8 では動作しません。

縦書きエリア内で使用できるhtmlタグ

htmlの推奨タグのほとんどは、それなりに綺麗な縦書き表示に変換できます。それぞれの要素に指定されたスタイルも有効です。
縦書きエリア内の要素に position , left , top , right , bottom , float といったプロパティを設定すると、縦書きに変換したときにレイアウトがズレる原因となります。なんとか頑張って、marginやpaddingで要素の位置決めを行ってください。
  • 以下のブロック要素は使用可能で、ブラウザデフォルトのスタイル、またはページで定義されたスタイルを継承します。
    • H1 , H2 , H3 , H4 , H5 , H6
    • UL , OL , DL
    • BLOCKQUOTE , P
    • DIV


  • 以下のブロック要素は使用可能で、ブラウザデフォルトのスタイル、またはページで定義されたスタイルを継承します。ただしリストの先頭に表示するマーカーは「・」に統一されます。
    • LI , DT , DL


  • バージョン 1.7.0β 以降で、CENTER は使用可能で有効です。文章を中央揃えにします。
    ただしセンタリングを行いたい場合は、その文章の親ブロック要素に text-align: center; を指定すべきです。


  • 以下のインライン要素は使用可能で、ブラウザデフォルトのスタイル、またはページで定義されたスタイルを継承します。
    • SPAN
    • FONT , STRONG , B , BIG , SMALL , I , EM , SUB , SUP
    • A
    • IMG
    SUBおよびSUPは、縦書きではあまり意味が無いかもしれません。
    また、Windowsでメイリオフォントがインストールされている環境では、和文字の斜体が通常の文字スタイルで表示されます。これはメイリオが「和文字の斜体字」という文字形をもともと持っていないためです。


  • ver 3.1.0 以降では、IMG要素に float:left; または float:right; を指定することで、その画像に対してテキストの回り込み表示ができます。
    • floatプロパティが適切に効くのは IMG要素に対してのみです。
    • 回り込ませたいテキストは、float指定したIMG要素の後ろに記述する必要があります。（詳細）


  • 以下の要素 および これらの要素の内部は縦書きに変換されません。横書き時のスタイルのまま表示されます。
    • PRE , IFRAME , TABLE , TEXTAREA
    これらの要素を縦書き変換エリアに含める場合は、widthを明示してやったほうが安全です。横幅がフレキシブルなのであれば、この要素は縦書きエリアの外に置くほうが良いでしょう。


  • 改行タグBRはもちろん使用可能です。
  • ver 1.7 以降で、罫線タグHRは利用可能です。縦罫線として適切に表示されます。


  • ver 2.0 以降では、ルビに関するタグ RUBY / RBC / RTC / RB / RT を適切に処理します。
    縦書きでもルビ表示が可能です。ただし、IE とそれ以外のブラウザとの間で、若干表示が異なります。（詳細）


  • ver 2.0 以降では、主に HTML5 で規定される予定の以下のタグを、とりあえず適切に扱います。
    • 縦書きレイアウトに変換：ARTICLE , ASIDE , DETAILS , FOOTER , HEADER , HGROUP , NAV , SECTION ,SUMMARY
    • 横書き時のレイアウトのまま表示：AUDIO , CANVAS , EMBED , FIGURE , VIDEO , MENU

注意

  • 縦書きエリアは、レイアウトの都合上フォントの種類が固定されます。
    各OSにおいて、和文字（ひらがな・カタカナ・漢字）が等幅であるフォントを利用します。
    • Windows：メイリオ または ＭＳゴシック または ＭＳ明朝
    • Macintosh：ヒラギノ角ゴシック または ヒラギノ明朝
    • iOS：ヒラギノ角ゴシック または ヒラギノ明朝
    • Android：Droid Sans Japanese または モトヤLシーダ
    • ubuntu：TakaoExゴシック
    これらのフォントは、日本語環境であればそれぞれのOSに標準でインストールされているので、ほとんどのユーザに対しては問題が生じる恐れは無いと思います。

  • 縦書きに変換する際、レイアウト時に要素を分割することがあります。そのため、要素に割り振ったidが重複する場合があります。

  • 縦書きエリア内に style タグ、script タグを置いた場合に、上手く動作しない可能性があります。これらは縦書きエリアの外に書いたほうが安全です。

  • 横書き時には見逃してくれる些細なhtmlのコーディングミス（閉じタグが無いなど）が縦書き変換失敗の原因になったりします。特にInternet Explorerは厳しいみたい。スクリプトが無限ループ地獄に落ち込んだ時などは、もう一度「ページのhtmlが正しいか」を確認してみてください。