【h2v.js】 バージョン3.4.1 の公開です。

縦書きレイアウトを実現するJavaScript・h2v.jsの新しいバージョンです。

スタイルシート・letter-spacingプロパティを適切に処理できるようにしてみました。スタイルに letter-spacingを指定することで、文字の上下間隔を調節することができます。

例えば、下のような具合。

日本国民は、正義と秩序を基調とする国際平和を誠実に希求し、国権の発動たる戦争と、武力による威嚇又は武力の行使は、国際紛争を解決する手段としては、永久にこれを放棄する。

日本国民は、正義と秩序を基調とする国際平和を誠実に希求し、国権の発動たる戦争と、武力による威嚇又は武力の行使は、国際紛争を解決する手段としては、永久にこれを放棄する。

日本国民は、正義と秩序を基調とする国際平和を誠実に希求し、国権の発動たる戦争と、武力による威嚇又は武力の行使は、国際紛争を解決する手段としては、永久にこれを放棄する。

この部分のHTMLソースはこんな感じ。

<!-- 縦書きエリアに適用するスタイル -->
<style>
p.j{text-align:justify;}
.ls1{ letter-spacing:1em; }
.ls10{ letter-spacing:10px;color:red; }
</style>

<!-- 縦書きエリア -->
<div id="tg20140830">
<p class="j">日本国民は、正義と秩序を基調とする国際平和を誠実に希求し、国権の発動たる戦争と、武力による威嚇又は武力の行使は、国際紛争を解決する手段としては、永久にこれを放棄する。 </p>
<p class="j ls1">日本国民は、正義と秩序を基調とする国際平和を誠実に希求し、国権の発動たる戦争と、武力による威嚇又は武力の行使は、国際紛争を解決する手段としては、永久にこれを放棄する。</p>
<p class="j">日本国民は、正義と秩序を基調とする国際平和を誠実に希求し、国権の発動たる戦争と、武力による威嚇又は武力の行使は、<span class="ls10">国際紛争を解決する手段としては</span>、永久にこれを放棄する。</p>
</div>
<!-- 縦書きエリア ここまで -->

要するに、例えば letter-spacing:1em; を指定してやれば文字間隔が 1em(ひと文字)分空くというわけです。上記の例のように、均等割付 text-align:justify; と併用もできるので、計算誤差や表示誤差といった解決しづらい問題はあるものの、まぁ概ね意図した感じで表示できるのではないかと。

今回のアップデートで変更された点を列記すると…

  • 【新機能】スタイル letter-spacing を適切に処理。
  • 【改善】Internet Explorer 8 でも、なんとなく均等割付が可能に。
  • 【改善】ブラウザの種類・バージョンの判定をより良く。
  • 【修正】WebKit(Blink)系ブラウザで、RUBY要素内にRP要素が含まれている場合に上手く縦書き変換できない場合があったのを修正。
  • 【修正】動作サポート外の古いブラウザからアクセスした場合にエラーが出ていた点を修正。

…と、こんな具合になります。

以前のバージョンをお使いの人は、h2v-min.js・h2v.css などを新しいものと入れ替えるだけで動作します。パラメータなどを特に弄る必要はありません。

2014年8月30日の午後、一瞬だけアップロードされた ver3.4.0 をダウンロードされた人は、すぐさま 3.4.1 にアップデートして下さい。
3.4.0 には「要素の margin / padding を正しく計算できない場合がある」という恥ずかしい不具合が存在しています。お手数をお掛けします。

というわけで、お気づきの点があればご連絡下さい。

カテゴリ: