ようこそ、縦書きの世界へ！

　h2v.jsと、同梱の専用スタイルシート h2v.css を使って、あなたのウェブページを簡単に縦書き表示することができます。
　普通に作成したhtmlドキュメントがあったとすれば、縦書きにするためにあなたがする作業は…
  • h2v.js と h2v.css をドキュメントに読み込んで、
  • 縦書きにしたい部分を、 id 付きの <div>〜</div> で囲んで、
  • 必要ならばパラメータをいくつか設定して、
  • それを、関数 h2vconvert.init( ) に渡して、
  • それだけ。
★詳細は 導入 を参照してください。
　ご覧のように、テキストだけでなく、ブロック要素やスタイル付きの要素もまず問題なく処理します。なので、縦書きにするにあたって HTML の手直し作業はほ・ぼ・不要です。
　横書きの時の雰囲気をそのままに縦書きに変換できる、というわけですね。

Features

こんなことができます。
  • 元（横書きのとき）のスタイルを、できるだけ忠実に縦書きにコンバートします。
    フォントサイズ、マージン、パディング、ボーダー、改行、色指定などを適切に処理します

  • パラメータを設定することによって、
    • 縦書きエリアの基準フォントサイズ
    • 行間スペース
    • 一行あたりの文字数
    • 書体（ゴシック体または明朝体）
    • ページロード時に自動変換するかどうか
    • 縦書きエリアの幅が表示領域を超えた場合に「多段組」で表示するか、「一段組・スクロールバー付き」で表示するか
    などを指定できます。
    ★詳細は 設定 を参照してください。

  • クロスブラウザで動作します。主要なブラウザで縦書き表示が可能です。
    Firefox 3.5+ ,
    Safari 3+ , Google Chrome , Android Browser ,
    Internet Explorer 8,9,10 ,
    Opera 10+,15
    但し、ver3.3.0以降に新たに加えられた機能（文字の均等割付など）は、Internet Explorer 8 では動作しない場合があります。

  • ウインドウまたは縦書き領域のリサイズに対応。
    サイズ変更に追随して、縦書きエリア内を適切に再描画します。

  • 文章のセンタリングに対応。
    • このように、スタイル
    text-align:center;
    が指定されていれば、センタリング。

  • 文章の下寄せに対応。
    • こんどは、スタイル
    text-align:right;
    が指定されているので、下寄せです。

  • 均等割付に対応（ver.3.3.0）。
    • text-align プロパティに justify を指定したブロック内では、文字の間隔などを調整して行の高さを揃えます。Internet Explorer 8 では、この機能は無効です。
    ★こちらの記事を参照してください。

  • ルビ表示に対応。此この様ような感じです。
    ruby , rb , rt , rbc , rtc , rp の各タグを使用してルビを表記することができます。
    ★こちらのブログ記事も参照してみてください。

  • この縦書きエリアの上部にある「縦→横切替」バーや、下部のクレジットが表示されているバーを非表示にすることができます。
    • ★詳細は 設定 を参照してください。

  • 傍線も引けます。傍線は、横書きの時は文字列の下に、縦書きの時は文字列の右側に引かれます。
  • 縦中横表示（横に並んだコレ→!?←など）にも対応。
    ★特別なスタイル を参照してください。

  • 画像に対するテキストの回り込み表示ができます。
    • 画像（IMG要素）に float:left; を指定すると、文章は画像の下側に表示されます。
    画像（IMG要素）に float:right; を指定すると、文章は画像の上側に表示されます。
    ★こちらのブログ記事 を参照してください。

ダウンロード

Downloadページからどうぞ。現在の最新バージョンは 3.5.2 です。

ライセンス

　非営利の個人・団体に限り、非営利目的での使用・改変・再配布が可能です。詳細はLicenseページをご覧ください。