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

 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ページをご覧ください。