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

要素の幅に影響を与える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だと町でうわさのアホの子でも書けますね。