美しい日本語のカタチ。

　ネットの世界でも、ふだんの生活でも、横書きのテキストが主流です。でも日本語の表記の基本は、やはり「縦書き」。
　縦書きのホームページを作りたいけれど、クロスブラウザで、なるべく手間をかけずに文章の縦書き表示を実現するのは難しい。

　そんなあなたに。

　h2v.js は、Webページの文書を縦書きに変換して表示するための JavaScript です。

h2v.js の特長

　縦書きWebページを作成する上で、難しい事を考える必要はありません。
　h2v.js は、縦書きにしたいエリアのテキストを縦書きにレイアウトし直し、要素に設定された height, width, margin, padding, border などのスタイルを時計回りに90度回転させて表示します。

h2v.js のアドバンテージ

• 古来より伝わる、クロスブラウザでズレない縦書き実現方法「table で升目を作って、そこに一文字ずつ文字を埋め込んでゆく」というのと比較して、圧倒的に少ない作業量で、より綺麗な縦書きレイアウトが可能。
  
  
• 未だ全てのブラウザに実装されていない縦書き表示のためのCSSプロパティ "writing-mode : tb-rl ; " に頼らないクロスブラウザ設計。
  
  
• 縦書き変換にあたって文字の置換は行わないので、横書き時とほぼ同等のページ内テキスト検索やテキストのコピー＆ペーストが可能。
  
  
• テキストだけでなく、さまざまなhtmlブロック要素も、適用されているスタイルごと適切に変換します。
  
  
• JavaScript が Off の場合や、古いブラウザでアクセスした場合にはオリジナルの横書きスタイルで表示します。「ページが読めない」などという最悪の事態が起こる可能性は皆無、です。

動作の概要

• 一行あたりの文字数、基準フォントサイズ、行間スペース、表示エリアの横幅などの値を設定できます。
  　また、ページ読み込み時に自動変換するかどうかの設定も可能です。
☆パラメータの詳細



• 横書きと縦書きで字形が異なる文字（長音記号や括弧など）を回転させて、適切に表示します。
• CSS を用いて、句読点や拗音・促音の表示位置を調整します。
• 半角英数記号を横倒しにして表示します。
  • 半角文字とその前後の和文字のフォントサイズが同一の場合、半角文字のベースラインが行の左端に一致するように調整されます。
  （例）半角 half-width half-width半角
• テキストに設定されたスタイルは、もちろんそのまま。
  • テキストを太字にしてみたり、
  • フォントサイズを大きくしてみたり、
  • 逆に小さくしたり太字にして色を変えてみたり。
  
  
• 要素に margin, padding, border が設定されている場合、それぞれの値を以下のようにローテーションします。
  • margin-top → margin-right へ、
  • margin-right → margin-bottom へ、
  • margin-bottom → margin-left へ、
  • margin-left → margin-topへ。
  padding や border も同様です。90度右回転して表示されるということですね。
  
  
• 要素に絶対値指定された width と height の値を交換して表示。例えば…
  ↑の div は、もともと

  {
   width: 150px; 
   height: 100px;
   margin: 1em;
   background-color: #ccc;
   border-left: 2em solid red;
  }

  …というスタイルを設定しています。横書きでの表示を確認してみてください。
  　横→縦 に変換する際に、ブロック要素を時計回りに90度回転させてレイアウトするというわけです。
  
  
• table や pre など、縦書きに変換するのが適当でない要素は、横書きのまま表示します。

  テーブル	テーブル
  横書きのまま	表示
  します。

• 画像はふつうに、↓こんな感じで表示されます。画像も table や pre などと同様に、回転させる事なく表示します。
  
  　画像に適用したスタイル（幅や高さなどの指定）も、もちろん有効です。
  
  
• このページをご覧になって既にお気づきかと思いますが、h2v.js は縦書きエリアの横幅に合わせて、自動的にコンテンツを多段組に変換してレイアウトします。
  
  　多段組を行う際、改段部分にブロック要素が引っかかる場合には、以下のような処理をします。

  • ブロック要素のサイズが絶対値指定されていない場合は、ブロック要素を適切に分割して表示します。
  • サイズが指定されている場合は、ブロック要素を分割せずに、全体を次の段に回します。

　要は、なにも難しい事を考えなくても、普通の横書き時のスタイルがそのまま、右に90度回転したレイアウトで表示される、というわけです。

動作するブラウザ

• Internet Explorer 8以上(IE 9で、より綺麗な表示でご覧になれます)
• Firefox 3.5以上
• Google Chrome
• Safari 3以上(Mobile Safari対応)
• Opera 10.5以上
• Android Browser（ただしインストールされているフォントの種類によっては、レイアウトがずれることがあります）

もっと詳しく…

　h2v.js の設置方法、設定などは、このページ右上のメニューからそれぞれのドキュメントを参照してください。

　不具合報告、疑問質問などはお気軽にどうぞ。メールアドレスは 下 です。