h2v.js :: 導入

こちらのページから最新のパッケージをダウンロードできます。ダウンロードしたファイルを解凍して、フォルダ「h2v」の中に以下の4つのファイルが含まれていることを確認してください。

• h2v.js：横→縦変換JavaScript
• h2v-min.js：h2v.jsを最小化してファイルサイズを小さくしたもの
• h2v-min.js.gz：h2v-min.jsをgzip圧縮したもの。
• h2v.css：スタイルシート

h2v-min.js (またはh2v.js) と h2v.css をサーバの適当なところにアップロードします。これらのファイルの置き場所は同じpathでなくても構いません。

使用しているサーバが gzip圧縮したファイルを扱える設定になっている場合には、h2v-min.js と共に、より小さなファイルサイズの h2v-min.js.gz を設置することで、ページ読み込み速度を高速化することができます。設置方法などはこちらの記事などを参考にしてみてください。

1. h2v-min.js と h2v.css を htmlファイルから呼び出します

htmlファイルのヘッダ部分の記述。

  <script type="text/javascript" src="h2v-min.js" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="css/h2v.css">

2. 縦書き表示したいエリアを設定します

body内の、縦書き表示にしたいエリアを id 付きの div で囲みます。エリアは複数存在しても大丈夫。もちろん、別々の id を振ってください。

3. 変換パラメータを設定して初期化のための関数 h2vconvert.init( params ) を呼び出します

たとえば body内に <div id="tate_1">〜</div> と、<div id="tate_2">〜</div> というふたつの縦書きエリアを設定したとするならば、こんな感じ。

  <script type="text/javascript">
    var params = { 'tate_1 ' : { 'fontsize' : '13px' } , 
                   'tate_2' : { 'auto' : false , 'pagewidth' : '500px' } 
                   } ;
    h2vconvert.init( params );
  </script>

パラメータの詳細はこちらのページをご覧ください。

☆エラーについて

変換途中でエラーが生じると、h2v.js は次のような処理をします。

• ソースのhtmlに不備がある場合 … 「縦書き変換に失敗しました。」というメッセージを含むバーを変換エリアの最上部に表示します。このときコンテンツは横書きのまま表示されます。この場合のエラーの主な原因は、
  • htmlタグが正しく閉じていない（例えば <li> に対する </li> が無い など）
  • タグが入れ子になっている（<span> 〜 <font> 〜 </span> 〜 </font> など）
  です。htmlソースを見直してみてください。


• 関数に渡すパラメータが不正な場合 … この場合は何もメッセージを発せず、コンテンツを横書きのまま表示します。エラーの主原因は
  • 存在しない id を持つ要素に対して縦書き変換を実行しようとした
  • パラメータの書式が不正（コロンとセミコロンを間違えている、最終要素の後ろに , が付いている、など）
  パラメータの書式を見直してみてください。

初期化時に 'auto' : false を指定したエリアは、ページがロードされた時点では横書きで表示されます。
関数 h2vconvert.switcher( id ) をonclickなどのイベントに登録すれば、閲覧者のアクションに応じて 横→縦、縦→横 と交互にレイアウト変換することができます。
例えばこんな感じで設定。

サンプルでもご覧ください。→ サンプル