波の綺麗な揺らし方

前述音の綺麗な伸ばし方でもって提示した解決策ですが、実はもう１パターンある事に気付きました。しかもこの方法なら波線にも応用が効くのです！

前回提示した解決策は早い話が 『伸音のフォントサイズを変える』 という物でしたが、その後よく見るとスタイルシートには文字間隔を指定する属性 letter-spacing というのがありました。これで伸音部の字間を詰めてしまえば、線の途切れは無くなるわけです(ただしスタイルシートを使いたくない、という場合には向きませんが)。
　　適用前：　────────
　　適用後：　────────
ちなみに letter-spacing の値は -0.1em (0.1文字分の意)で充分です。

ところで冒頭でも触れた通り、この方法を使えば波線の連続、つまり『〜〜〜』を綺麗に繋げる事も出来るようになります。試しにsize=1〜7の場合で実験してみましょう。

size=1〜〜〜 　　size=2〜〜〜 　　size=3〜〜〜 　　size=4〜〜〜 　　size=5〜〜〜 　　size=6〜〜〜 　　size=7〜〜〜

どの位字間を詰めるのが丁度良いかは、フォントサイズによってバラバラです。ちなみに上記のsize=1〜7場合は以下の通り(もっと細かい数値で指定すれば、更に綺麗に繋がるかもしれません)。
　　1 → -0.2em
　　2 → -0.2em
　　3 → -0.25em
　　4 → -0.1em
　　5 → -0.6em
　　6 → -0.8em
　　7 → -1.25em
今回は面倒なので、フォントサイズをpxで指定した場合の細かい検証はしませんでした(^^；　フォントサイズをpxで絶対指定している場合には、字間もpxで指定した方が合わせ易いかもしれません。用途に合わせて実験してみて下さい。

前回も含めて、これらの事は知ってる人は知っている基本的な事なのかもしれませんが、とりあえず自分は見かけた事が無いので書いてみました。もしこれらを更に補完するノウハウ、又はもっと良い方法、あと感想などあれば知らせてもらえると幸いです。

なお比較環境は前回と同じInternet Explorer 6 + 文字のサイズ『中』でした。