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

PC版へ 2013年07月27日

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

→ h2v.js - ダウンロード - tategaki.info

スタイルシートの 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ースタイルシートリファレンス：htmq.com
参考：text-justifyースタイルシートリファレンス：htmq.com

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

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

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

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

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

ではでは。

関連記事

コメント

匿名

お世話になっています、HPでh2v.jsを使わせていただいているものです。
ふと気になってIEの開発モードでIE８で動作確認したところ、「…」と英字がすべて横になっている現象を確認しました。
http://tategaki.info/のページでも確認できたので、当方のコーティングミスではないと思います。
これはアップデート方針の「Internet Explorer 8 への対応を止める」というのに入るのでしょうか？

あと、禁則処理に特定の文字（〝〟）を追加したいのですが、これは個人的に追加する方法はあるのでしょうか？

回答していただければ幸いです。

tyzから匿名への返信

ご報告ありがとうございます。

原因はInternet Explorerの仕様変更のようです。回避方法を書いてみましたので → http://freefielder.jp/blog/2014/01/h2vjs-ie-emulate-mode.html こちらをご参照ください。

禁則文字ですが、h2v.js のソースコードの1657行目あたり、配列 kakkos_tr に '〝' を、kakkos_br に '〟' を追加すると、それぞれ送り出し・ぶら下がり処理が適用されるようになります。

hillomi2

はじめまして、HPでh2v.jsを勝手に使わせていただいて、大変お世話になっております。
久しぶりにこちらに訪れたところ、均等割付け機能が出来たとのことで、さっそく試したのですが、うまく行きません。どうも、私が必要だったは、均等割付ではなくて、両端揃えだったようです。そのページは、例えば、最大１行２０文字で、ある行は１８文字、ある行は１９文字しかないのを全て２０文字の両端揃えにしたいと言うものです。たとえば、行毎に
(span style="letter-spacing:2px;">表示内容(/span>
のような形で、値を変えて調整しようかと思ったのですが、これ自体縦書きにすると無視されてしまうようで、うまく行きません。
何か方法はないでしょうか。

よろしくお願いいたします。

hillomi2

さっそく、ご対応を検討していただけるとのことで、ありがとうございます。
ずうずうしいのですが、以下の点にもご検討いただけると大変ありがたいです。今回の件と関連するのですが、この均等割付（両端揃え）をしたい行に、その行を２行に別けて注釈を入れている部分があります。縦中横を使って、

あいうえお(font size=1>(span class="h2v_tcy">いろはにほ　(/span>(/font>かきくけこ

と言う感じなのですが、これも含めてきれいに整形されると大変ありがたいのですが。
それから、上の例で、注釈の”いろはにほ　”が縦書きになると並びが左、右、改行、、左、・・・・と整形されるので、縦書きとしては"ろに　（改行）いはほ”となります。縦書きとして読めるようにするには、”にいほろ　は”とする必要があります。縦中横は、こうした使い方を想定されていないと思われますが、できれば、文字の順番そのままで、整形されるようにしていただければ、大変ありがたいのですが。
勝手なわがままばかり申して、申し訳ありませんが、ご検討していただければと存じます。
よろしくお願いいたします。