縦書きレイアウトを実現する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>
<!-- 縦書きエリア ここまで -->
<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 を正しく計算できない場合がある」という恥ずかしい不具合が存在しています。お手数をお掛けします。
3.4.0 には「要素の margin / padding を正しく計算できない場合がある」という恥ずかしい不具合が存在しています。お手数をお掛けします。
というわけで、お気づきの点があればご連絡下さい。
tyu
justify + letter-spacing のとき、行最後の文字の下にスペースを空けないという処理はできますか？
読点の追い込みもぶら下げのほうが違和感ないような……？
hillomi2
こちらのページ、safariで見ると、縦書きでは、うまくいっていませんが、safariは、対象外でしょうか。
それから、私のホームページでは、古事記の真福寺本をそのままのレイアウトで、出来るだけ書き下そうとしています。古い本なので、各行の文字数が一定ではありません。それで、 letter-spacingだけでもおかげさまでかなり良くなったのですが、justifyと一緒に、あるいはjustifyだけでもっと綺麗にならないかなと思ったのですが、どうもjustifyだけでは、何も変化せず、justify + letter-spacingでは、letter-spacingだけの時と変わりません。
実際には、
p.j{text-align:justify;} .sp015{ letter-spacing:0.15em; } ・ .sp020{ letter-spacing:0.20em; } ・
（縦書きエリア）
大梁月踵侠鍾清原大宮昇即天位道軼軒后徳跨周王
經幾年其旨欲滅斯乃邦家經緯王化之鴻基焉故
のように最大行に合わせて、各行にletter-spacingを個別に設定しました。今回justifyを設定したのですが、ほとんど変りません。justifyだけでも、両端揃えということですので、うまくいくのでは、と思ったのですが、それは横書きでもダメです。両端揃えに関する理解が違うのでしょうか。
今のままでも、ある意味十分なのですが、よろしくお願いいたします。
tyzからhillomi2への返信
hillomi2さん。いつもありがとうございます。
おそらくhillomi2さんのやりたい事というのは「両端揃え」ではなく「均等割付」なのだろうと思います。この辺り、大変ややこしいのですが、
→ http://freefielder.jp/blog/2014/09/text-justify.html
こちらの記事をご一読下さい。自分自身も過去の記事などでごっちゃになっている部分もありますので申し訳ないです。
で、hillomi2さんが意図するレイアウトをウェブページ上で実現するためには justify ではなく、現在hillomi2さんが行っている方法（最大行に合わせて letter-spacing で調整）が、縦書き・横書きに関わらず、おそらく最も良い方法なのではないかと思います。
それから、Safariの件、もう少し詳しく教えていただけないでしょうか。こちらの環境では正常に動作していますので、できればOSのバージョン・Safariのバージョンと、どのようにおかしいのかをお伝えいただければと思います。
hillomi2からtyzへの返信
tyzさん、ありがとうございます。
解説拝見しました。すごく分かりやすかったです。ありがとうございます。今の方法でやっていきます。
safariの件ですが、OSはWin7 Service Pack 1としか分かりません。Safariは、5.1.7(7534.57.2)です。
みえ方は、第1と、第2段落はまったく同じで、第3段落の赤字部分にletter-spacingが入っていません。横書きではどの段落も、問題ありません。
もし、safariが古かったのでしたら、それが原因でしたら、申し訳ありません。更新はどのブラウザも、相手に任しているので自分から確認しに行っていなかったので。
画像で、メールを送信いたします。
よろしくお願いいたします。
tyzからhillomi2への返信
Safariの件、メールのほうでスクリーンショット確認しました。
スクリーンショットで見ると、h2v.js のバージョンが "3.3.0" になっているようです。ブラウザに古いバージョンのキャッシュが残っているせいだと思いますので、Safariのキャッシュを削除（"編集"メニュー → "キャッシュを空にする…"）して、当該ページを再読み込みしてみてください。
hillomi2
ありがとうございます。hillomi2です。
うまくいきました。ブラウザによってそんな違いがあるとは思っても見ませんでした。
申し訳ありません。お手数をおかけしました。
今後ともよろしくお願いいたします。