h2v.js から h2vR.js への乗り換えガイド
h2vR.js と レガシー版 h2v.js、「ウェブページで縦書きを実現する」という目的と機能自体はほぼ同じですが、設定方法や細かい動作が異なります。
この節では、現在 h2v.js を使用している人が h2vR.js に乗り換える際の留意点などをまとめています。今回 h2vR.js で初めて縦書きに挑戦する、という場合は、このページを読む必要はないでしょう。
h2vR.js と h2v.js との比較
最大の変更点は、縦書きにしたい領域の指定方法と、縦書きレイアウトに必要なパラメータの取得方法です。
【 h2v.js 】
- 縦書きにしたい領域に任意の id を指定。
- フォントサイズ、行間スペース、フォントの種類などをパラメータとして 関数 h2vconvert.init() に渡す。
- 変換。
↓
【 h2vR.js 】
- 縦書きにしたい領域に 特別なクラス名 を指定。
- フォントサイズ、行間スペース、フォントの種類などはスタイルシートのプロパティやクラス名から自動的に取得。
- 変換。
h2vR.jsで追加された主な機能
- div要素以外のブロックレベル要素も縦書き領域に指定できるように変更。
- レスポンシブデザインを採用しているページに柔軟に対応するためのいくつかの機能の追加。
詳細は『レスポンシブデザインへの対応』『再描画の制御』をご覧ください。
- 縦書き領域内に横書き表示のままの要素を置く機能の追加。
詳細は『動作・表示の制御』をご覧ください。
h2vR.jsで削除された主な機能
- 縦書き変換を実行する関数 h2vconvert.init() の廃止。
h2vR.js では、特別なクラス名を指定した要素に対して、自動的に縦書き変換を実行します。
- Windows XP および Internet Explorer 8 への対応を終了。
- 縦書き←→横書きを相互にインタラクティブに切り替える機能を削除。
- ページロード時に縦書き変換を実行するかどうか（＝初期値として横書きで表示するかどうか）選択できる機能（パラメータ：'auto' に相当する機能）の廃止。
h2vR.js では、縦書きに指定した領域は常に縦書き表示を行います。
- 縦書き領域の下部にクレジットを表示するバーを追加する機能（パラメータ：'showcredit' に相当する機能）の廃止。
h2v.js からの移行例
h2v.js または h2vR.js を利用した以下の例では、ほぼ同様の縦書きレイアウトとなります。
【 h2v.js：スタイルシート】
#tategaki{
width:400px;
font-size:16px;
line-height:1.6em;
/* 注：h2v.jsでは、縦書き領域に指定した、縦書き領域自体のサイズ・位置を示すスタイルプロパティ以外の値（フォントサイズなど）は、縦書き変換後には実質的に意味を持ちません。これらは h2vconvert.init() に与えるパラメータで指定されます。 */
}
【 h2v.js：HTML：縦書き領域の指定 】width:400px;
font-size:16px;
line-height:1.6em;
/* 注：h2v.jsでは、縦書き領域に指定した、縦書き領域自体のサイズ・位置を示すスタイルプロパティ以外の値（フォントサイズなど）は、縦書き変換後には実質的に意味を持ちません。これらは h2vconvert.init() に与えるパラメータで指定されます。 */
}
<div id="tategaki">
<!-- この div が縦書き領域となります -->
</div>
【 h2v.js：HTML：パラメータの指定 】<!-- この div が縦書き領域となります -->
</div>
<script>
h2vconvert.init( { 'tategaki' : { fontsize:'16px', lineInterval:0.8, chars:20, auto:true, bar:false, showcredit:false, showsplash:false } } );
</script>
h2vconvert.init( { 'tategaki' : { fontsize:'16px', lineInterval:0.8, chars:20, auto:true, bar:false, showcredit:false, showsplash:false } } );
</script>
【 h2vR.js：スタイルシート】
#tategaki{
width:400px;
font-size:16px;
line-height:1.6em;
}
【 h2vR.js：HTML：縦書き領域の指定 】width:400px;
font-size:16px;
line-height:1.6em;
}
<div class="h2vr_20" id="tategaki">
<!-- この div が縦書き領域となります。この例の場合では、フォントサイズや行間スペースは id:tategaki に指定されているスタイル値から、1行あたりの文字数は クラス名:h2vr_20 から取得します。 -->
</div>
<!-- この div が縦書き領域となります。この例の場合では、フォントサイズや行間スペースは id:tategaki に指定されているスタイル値から、1行あたりの文字数は クラス名:h2vr_20 から取得します。 -->
</div>
※注：この例では id を設定して縦書き領域にスタイルを適用していますが、class で適用しても構いませんし、インラインでスタイル指定しても大丈夫です。
スタイル値を明示的に設定しない場合には、親要素からの継承値やブラウザのデフォルト値を利用します。
このように、h2v.js から h2vR.js への移行に際しては、HTMLコードの変更など、すこし煩わしい作業が必要になります。ご了承ください。
今後のh2v.jsとh2vR.jsについて
これからの開発のメインは h2vR.js になります。開発 - といっても、機能自体が既にかなり煮詰まってきていますので、それほど大きな機能追加は無いような気もしていますが。
h2vR.js リリース後の h2v.js の更新は、メンテナンスリリース中心とする予定です。つまり、
- h2v.js に新機能が追加されることは、多分ありません。
- 新たに見つかる不具合には、当分の間対処してゆくつもりです。
- 各ウェブブラウザの新バージョンにも、当分の間対応させてゆくつもりです。
というポリシーでいこう、と考えています。
最終更新：2015.05.31
- (c)2013-2016 tategaki.info,
a division of freefielder.jp