h2v.js、 ver 2.2.0 になりました。

Webページで縦書きレイアウトを実現する JavaScript、"h2v.js" をアップデート。

2012.10.29 ：：
ケアレスミスを修正した ver 2.2.1 がダウンロード可能です。
（この記事の下の方に書いた RBC / RTC タグの不具合はまだ残っています）


まずは大きな不具合の解消が二点。

【表示領域の幅を超えるサイズの画像などの表示を改善】

これが問題になってくるのは主に、
  • スマホからのアクセス時に、ページ幅が制限されたスマホ専用ページを表示する
…などの場合です。

これまでは、表示領域の幅を超えるサイズの分割不可能な要素（IMG や PRE や TABLE など）が縦書きエリアに存在する場合は、h2v.js が処理し切れずに無限ループに陥っていました。
ver 2.2.0 では、これを改善。
  • 画像は自動的に縮小して表示します。
  • 幅固定の PRE、TABLE は、幅を自動的に調整して、エリア内部に収めようとします。
  • 幅固定で、幅を自動調整することが不適切と思われる要素（CANVASなど）は、サイズはそのまま、エリアをはみ出して表示されます。
…という感じで、レイアウトが妥当かどうかはともかく、とりあえず無限ループを回避します。


【ルビの表示を改善】

2012.10.29 追記：：
デスクトップ版 Safari の一部のバージョン(Windows最新版を含む)で、IE 同様に、RBC / RTC タグが効かない、という不具合を確認しました。
対応してみますが、縦書き / 横書きに関わらず、RBC / RTC タグは使用しない方が安全です。

<ruby><rb>〜</rb><rt>〜</rt></ruby> …という形の、通常のルビは正常に表示されます。
あまりそんな機会はないのかもしれませんが、
  • RB または RT タグ内に半角英数字が含まれている場合にレイアウトが乱れる
という問題がありました。これを解消しています。
さらに、
  • IE8 では RBC / RTC タグをDOM要素として認識しないっぽい。
  • IE8 / IE9 では、RB / RT タグにサイズ関係のスタイルが上手く適用されないっぽい。
…という現象が。
なので、IE8 / IE9 での縦書き表示では、もう面倒なので
  • RBC / RTC タグは機能しません。
  • RB / RT タグは、縦書きルビのスタイルを適用した SPAN に自動的に置換。
…ということにしました。

このため、IE とそれ以外のブラウザでは、ルビのレイアウトが若干異なります。


そして、その他の変更点。

【行末の処理を変更】

従来は、「一行に指定した文字数ピッタリの文字列 + <br />」 というのを縦書きに変換すると、<br /> が次の行に送られて、見た目空白の行がひとつ挿入されていました。
ver 2.2.0 では、これを解消。IE8 以外では、無駄な空行が入らなくなりました。IE8 だけは処理が面倒なのでゴメンナサイです。


これまでは「全てのブラウザで、ほぼ同じレイアウトを実現する」というポリシーでやっていたので、"ダメな子にレイアウトを合わせる" ことを最重要視していたのだけれど、ルビの件もあるし、IE8 はもうこの辺りでいいかな…ということで、こんな感じです。

細かい部分で差異が残るだけで、もちろん IE 8上でもきちんと縦書き表示できますのでね。

【縦書きエリアを指定する div に visibility:hidden を設定しておくと…】

ページロード → 縦書き変換実行 → 終了したら h2v.js が当該エリアを自動的に visibility:visible に変更 → あたかも最初から縦書きだったかのように見える！
…という機能を追加してみました。

ただしこれ、ページを見にきてくれた人が JavaScript をオフにしていた場合、真っ白な領域が表示されるだけで何も見えない、という状況に陥りますので、注意が必要です。



ダウンロードは → こちらから。

いままでお使いの人は、今までの h2v-min.js と h2v.css を最新のものに入れ替えるだけです。新たな設定は必要ありません。

しかしファイルサイズがでかくなってきた。何とかしたい。

カテゴリ:

タグ: