jQueryプラグイン: Harmonize Textを更新

jQueryプラグイン化する以前からの懸念事項だった要素の幅に影響を与えるCSSプロパティの扱いと、子にテキストノード以外が含まれる場合の2つを考慮した感じにしてjquery.harmonize-textを0.2に更新しました。Works like a charm!?

要素の幅に影響を与えるCSSプロパティ

単純にclone()するとtransformプロパティやtransitionプロパティなどで変なことになりそうな気がしたので、要素の幅に影響を与えそうなプロパティを手作業でリストアップしてそれらのみをコピーすることにしました。そういう面倒なことはやりたくないって言ってたような気がしますけど、きっと気のせいです。

要素の幅に影響を与えるCSSプロパティは

  • border-collapse
  • border-left-width
  • border-right-width
  • box-sizing
  • display
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • letter-spacing
  • padding-left
  • padding-right
  • text-transform
  • white-space
  • word-break
  • word-spacing
  • word-wrap

位だと思います。ベンダー拡張については面倒だったので見なかったことにしました。box-sizingプロパティの値によってはborder-left(right)-widthプロパティも必要になるんじゃないかと思います。漏れてるっぽいのがあったら教えてくれると嬉しいです。

子要素のコピー

今までのテキストだけを拾ってコピーするという方法で大体うまくいくんですけど、以下のようなケースでずれます。

<h1>Lorem <em>ipsum</em> dolor <strong>sit</strong> amet.</h1>

em要素等での幅の変化に対応できないので。他にも内側の要素のスタイルへの考慮もないので色々まずいです。

<h1>This website is cool
  <span style="font-family: 'Palatino', 'Palatino Linotype', serif;">&amp;</span>
creative!</h1>

例えばこういうのとかですかね?なので子要素を丸ごとコピーしてしまうことにしました。

temp.append(target.contents().clone());

children()だと子のテキストノード等が拾えないので、contents()で全部拾ってclone()でコピー。jQueryだと町でうわさのアホの子でも書けますね。


これでだいたいベースは完成したんじゃないかと思います。今はブラウザーの最小フォントサイズに関わる問題をもっとエレガントに解決する方法を模索中です。あと縦方向のみのリサイズの時には発火しないようにもしたいですね。今のままだとDeveloper Toolsの表示切替で発火とかかっこ悪い感じです……。