まずは一段組。

美しい日本語のカタチ。

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

　そんなあなたに。

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

h2v.js の特長

　縦書きWebページを作成する上で、難しい事を考える必要はありません。
　あなたが作るのは、通常どおりの html。縦書きにしたいエリアを、 id を設定した div で囲んでパラメータをいくつか設定するだけです。

　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度回転したレイアウトで表示される、というわけです。
　ただし、スタイルシートの float や left, top, right, bottom プロパティを使用して表示位置指定された要素については、綺麗に縦書きレイアウトに変換できない場合が多いです。ご容赦＆ご注意ください。
　floatなどで位置指定された要素の内側を縦書き変換してやればよいかと。

　そして、バージョン 1.7.0 では、文章のセンタリングや右揃え（縦書きなので下揃え）が出来るようになりました。
センタリングです。
文章が中央揃えで配置されます。
横書きの場合と同じように、センタリングしたい文章の親ブロック要素に text-align : center ; を設定してください。
そして下揃え。
こちらは、下揃えしたい文章の親ブロック要素に
text-align : right ; ですね。


動作するブラウザ

  • Internet Explorer 8以上(IE 9で、より綺麗な表示でご覧になれます)
  • Firefox 3.5以上
  • Google Chrome
  • Safari 3以上(Mobile Safari対応)
  • Opera 10.5以上
  • Android Browser（ただしインストールされているフォントの種類によっては、レイアウトがずれることがあります）
動作対象外のブラウザでページにアクセスした時は、縦書き変換を行いません。オリジナルの横書きフォーマットでページの内容を表示します。
　せっかく読みにきてもらったのに「レイアウトがずれまくりで、何が書かれているのか判らない」という最悪の状況を回避することができます。

もっと詳しく…

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

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

　そして多段組。
　各段の切れ目にちょうどブロック要素が引っかかる場合は、それらを上手く分割します。分割できない要素（画像やテーブルなど）が引っかかる場合は、次の段に送り出します。

　また、h2v.js はウィンドウ（または縦書き領域）のリサイズにも対応しています。

★ ウインドウリサイズ時のデモ で試してみてください。

美しい日本語のカタチ。

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

　そんなあなたに。

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

h2v.js の特長

　縦書きWebページを作成する上で、難しい事を考える必要はありません。
　あなたが作るのは、通常どおりの html。縦書きにしたいエリアを、 id を設定した div で囲んでパラメータをいくつか設定するだけです。

　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度回転したレイアウトで表示される、というわけです。
　ただし、スタイルシートの float や left, top, right, bottom プロパティを使用して表示位置指定された要素については、綺麗に縦書きレイアウトに変換できない場合が多いです。ご容赦＆ご注意ください。
　floatなどで位置指定された要素の内側を縦書き変換してやればよいかと。

　そして、バージョン 1.7.0 では、文章のセンタリングや右揃え（縦書きなので下揃え）が出来るようになりました。
センタリングです。
文章が中央揃えで配置されます。
横書きの場合と同じように、センタリングしたい文章の親ブロック要素に text-align : center ; を設定してください。
そして下揃え。
こちらは、下揃えしたい文章の親ブロック要素に
text-align : right ; ですね。


動作するブラウザ

  • Internet Explorer 8以上(IE 9で、より綺麗な表示でご覧になれます)
  • Firefox 3.5以上
  • Google Chrome
  • Safari 3以上(Mobile Safari対応)
  • Opera 10.5以上
  • Android Browser（ただしインストールされているフォントの種類によっては、レイアウトがずれることがあります）
動作対象外のブラウザでページにアクセスした時は、縦書き変換を行いません。オリジナルの横書きフォーマットでページの内容を表示します。
　せっかく読みにきてもらったのに「レイアウトがずれまくりで、何が書かれているのか判らない」という最悪の状況を回避することができます。

もっと詳しく…

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

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