本日の勉強会

久しぶりに投稿します。神田です。

コーディングの技術は身近な人とも話すことが少ないので、たまの勉強会で知識を共有しておくことが大切です。

さて、今日のテーマは各ブラウザによる文字間の違いについて、でした。

safariは文字が奇麗に見える（アンチエイリアスがかかっている）分、一文字の取るスペースが他のブラウザに比べて大きいようです。

IEで3行で収まる文章も、safariでは4行になるので見え方が少し違ってしまう…ということがときどきに起こります。

文字間を指定するcssは、letter-spacingを使用します。
僕の場合、デフォルトで大抵letter-spacing:1px;に設定していますが、safariで表示が崩れる場合は、safariハックでletter-spacing:0;に設定し、文字間を詰めて解決します。
場合によっては-1pxにしても問題なく読める。

ピクセル単位で表示を合わせる場合、少しの文字間の違いも表示に大きく影響しますから。。
あと、IE6でも透過pngを使えるようにするjsライブラリや、フォームで有効に使えそうなjsライブラリなど…を紹介してもらいました。

フォームのjsライブラリは次の機会に必ず使おう。

 
□参考サイト

IEの条件分岐コメント
http://blog.worldending.jp/web/ie-conditional-comment.php
透過PNGを追加するjsライブラリ
http://bowz.info/1343
フォームに便利なjsライブラリ
http://moto-mono.net/2009/02/05/jqueryvalidationjs-with-ajaxusernamecheck.html

 
今日の勉強会はそんなところでした。