h2v.js ver1.7.0 での改善点。

さてさて、縦書き変換用JavaScript "h2v.js" ですが、自分で一から構築したWebページで走らせる分には殆ど問題が無いのだけれど、Movable Type や WordPress で作成したページに組み込むと、なんだかおかしな具合になる場合がありました。

具体的には、
  • 画像が潰れて表示される。
  • フォントサイズがおかしい。( 主に IE 8 で閲覧した場合 )
  • 行が揃わない。( 主に IE 8 で閲覧した場合 )
  • そもそもレイアウトがグチャグチャ。( 主に IE 8 で閲覧した場合 )
などなど。

Movable Type / WordPress のテンプレートで、要素の幅やフォントサイズのスタイルが相対指定(％指定)されている場合などに、上記のような状況になります。

この症状を改善するためにテンプレートの CSS を弄っても良いのだけれど、それは本意ではありません。「元のスタイルを維持しつつ、縦書きへ」というのがコンセプトなのでね。

というわけで、h2v.js の内部で、なんとか対応してみた。

version 1.7.0 では、h2v.js を設置するページの元々のスタイル指定がどのようなものであっても、そのスタイル指定を最大限尊重しつつ、縦書きレイアウトに変換しても表示が崩れないようになっている筈です。

すなわち ver 1.7.0 では、
  • 画像が正しい幅で表示されるようになりました。
  • フォントサイズの検出 / 継承が正しく行われるようになりました。
  • そのため、行の高さがズレる事はないでしょう。
  • IE 8 での閲覧でも大丈夫な筈です。
…という具合。


そして、ここからは愚痴。

h2v.js では「元のスタイルを継承しつつ、ズレない、美しい縦書き」を実現するために、元の htmlソースに、ちょっと酷いくらいのガチガチなスタイルを適用している訳なのです。そのために、例えばブロック要素の "実際に表示されている" 幅だとか、フォントの "実際に表示されている" サイズなどを、スクリプト内で取得する必要があるのですが…。

例えば Chrome や Safari や FireFox や Internet Explorer 9 であれば、
getComputedStyle()
というメソッドで、要素の表示サイズなどを、必ずピクセル単位で取得することができるのですが、こいつが IE 8 には無い。代わりに
currentStyle
という奴を使わざるを得ないのだけれど、これがピクセル値でなく、平気で auto とか medium とか 100% とか、そんな値を返してきます。

俺　「今、その要素の幅は何ピクセル？」
IE 8 「自動で設定されます」
俺　「いやいや、自動で設定された、その実際の今の値は？」
IE 8 「自動です」

…ばっかじゃなかろうか。

で、なんとか誤摩化して、IE 8 でも「それらしい実際の値」を取得できるようにしてみたのですが、もうマジで作業時間の無駄。

IE 8 さえ無くなれば、作業時間は 1/10 くらいに減りそうだし、コードも 2/3 くらいの分量になりそうなのだけれど、まだ全体の 1割 くらいのシェアは握っているのだなぁ。無視するには、まだまだ多すぎる。

ううむ。

カテゴリ:

タグ: