【縦書き】h2v.js、均等割付に対応しました。 但し…。

さて、縦書き変換JavaScript・h2v.jsのバージョン3.3.0です。

スタイルシートの text-alignプロパティに justify を設定することで、文字の均等割付ができるようになりました。文字間隔を調整して行の高さを揃えます。
とりあえず、以下の例をご覧ください。

★均等割付け無し

「癪しゃくにさわるったら、ありゃしない。」と、乳母のお浜が、台所の上り框がまちに腰をかけながら言う。
「全くさ。いくら気がきついたって、奥さんもあんまりだよ。まるで人情というものをふみつけにしているんだもの。」と、竈かまどの前で、あばた面をほてらしながら、お糸婆さんが、能弁にあいづちをうつ。

★均等割付け（IE8では機能しません）

「癪しゃくにさわるったら、ありゃしない。」と、乳母のお浜が、台所の上り框がまちに腰をかけながら言う。
「全くさ。いくら気がきついたって、奥さんもあんまりだよ。まるで人情というものをふみつけにしているんだもの。」と、竈かまどの前で、あばた面をほてらしながら、お糸婆さんが、能弁にあいづちをうつ。

下村湖人『次郎物語 第一部』冒頭より

<style>
  p{margin:0 0 1em 12px;border-right:2px dashed orange;}
  .justify{text-align:justify;}
</style>

<div id="tg20130727">
  <h3>★均等割付け無し</h3>
  <p>
　〜 略 〜
  </p>

  <h3>★均等割付け（IE8では機能しません）</h3>
  <p class="justify">
　〜 略 〜
  </p>
</div>

<script>
  h2vconvert.init( {'tg20130727' : {auto:true,chars:25,splash:false,lineInterval:0.8,fontsize:'14px'} });
</script>

如何でしょうか。行の高さが揃うことで、だいぶ見栄えが良くなるのではないかと。

但し、この機能にはいくつか制限があります。

  1. Internet Explorer 8 には対応していません。h2v.jsは、IE 8では text-align:justify を無視して処理を行います。
  2. 数値の丸め誤差や有効桁数の関係で、ぴったりと割付されない場合があります。
  3. 処理速度を一定以上に保ちたいという考えから、処理をかなり端折っています。そのため、インライン要素が多用されている場合などに、若干気持ち悪い割付になる場合があります。

1. については前出の記事のアップデート方針通り。
2. は、例えば各々のブラウザの表示にこういう違いがあるという事情に依ります。
3. については、より良い処理方法を思いついたら改善するかもしれません。

この text-align:justify、仕様がかっちり固まっていないのか、通常の横書き時ではブラウザによって動作がまちまちですな。均等割付を行うための一応 "正式" な設定は、

text-alignプロパティに "justify" を設定して、更にtext-justifyプロパティに適切な値を指定する。

…という感じのようなのですが、実際には text-align に justify を設定した場合、

  • Firefoxでは、text-jusify に値を指定しなくても均等割付される。
  • IE 10では、text-jusityプロパティの設定が必須。
  • Chromeは、均等割付されるのかどうかよく判らない。

…という表示になります。

h2v.jsで縦書き表示した場合には、text-alignプロパティに "justify" が指定されていれば、text-justifyプロパティの指定の有無に関わらず（text-justifyの指定値は無視します）均等割付処理を行います。

ver3.3.0では、この他に「text-alignプロパティに "center"、"left"、"right" を指定したときに当該スタイルの継承が上手くいかない場合がある」という不具合を解消しています。

以前のバージョンを使用している場合は、新バージョンのh2v-min.jsとh2v.cssを古いものと入れ替えるだけで大丈夫です。これまでに作成したドキュメントに変更を加える必要はありません。

ではでは。

カテゴリ:

タグ: