逆襲のletter-spacing

「毎日考ブログ」はとっくの昔に移転してました。
個別記事にお引越し表記するの、一年近く忘れてました（最低
すでに新しくもないブログのURLは以下ですよろちくび。（最低

2005-07-23 Sat[Web制作 > コーディング]

こんぬつば。
朝っぱらから聖書要りませんかだの牛乳取りませんかだの、salsaの幸せと健康を案じてくれてご親切にありがとう。
でも、牛乳屋のおじさん、ごめん。
「全然飲まないのでぇ」と断ったけど、本当は牛乳大好きです。いや、インターフォンでそう伝えたときの、おじさんの気落ちした声が忘れられなくてさ。
VIVA牛乳！牛乳フォー！！

えーと、今回のは、気にしない方には全く関係のない話。
MacIEは眼中に無し、って方はスルーしてくれて構わない感じ。

MacとWindowsとでは、多かれ少なかれ、ブラウザでの表示にちょっとした違いが現れるというのは周知のお話。両方で表示確認が取れていて、普通にブラウズできても、何かが違う。
そのひとつが行間や文字間である。

Macでは微妙に余裕があって、なにも設定せずとも読みやすい。
しかしWindows、特にIEの場合、文字間がぎちっと詰まって見えるのがどうしても許せなかった…ので少し前に、文字間のスタイルシートであるletter-spacingを設定したのだけれど、これをするとMacのIEで、記事のある枠から文字がはみ出してしまうのである。何回やっても。

letter-spacingを設定していないMacIEでの見え方

letter-spacingを設定しているMacIEでの見え方（クリックで拡大）

letter-spacingを設定しているMacIEでの見え方
毎日考BLOGでは記事部分に枠を付けていないからちょっと広がっているくらいにしか見えないけど、枠ありの場合は完璧に文字が飛び出る。
（毎日考のほうは枠ありなので、だらしなく飛び出た）

Macユーザ自体多くないとはいえ、Firefoxユーザが増えているとはいえ、それでもまだMacブラウザーはSafariに次いでIEが多いのだ。また、Mac版Firefox、Netscape7、Safariすべてで、記事部分の幅として指定したスペースより微妙に段落幅が広がっていた。文字が外枠ぎりぎりだ。かっこわりぃ、だめじゃん。Web屋も大したことねーな、と思われてはイヤだしな。

そのままめんどくさくて忙しくて、どうせ現状でも読めるのだからと放置していたのだが、今回対策を施してみた次第。症状や退避方法については以下。

→Mac IE 5で文字がはみ出たわけ（K Place* | Dialy）
→letter-spacingを指定した要素内の表示が崩れる（CSSバグリスト）
→letter-spacing問題
（株式会社メディアチャンネル - HTML・CSS解説）
→letter-spacingを指定した要素内で連続したbr要素が無視される（CSSバグリスト）

つまりこういうこと。

1．スタイルシートで文字間を広げる記述は、
div.entry {letter-spacing:0.15em;}
（「div.entry」に対応する部分は、<P>だったり<span>だったり、各自のスタイルシートで異なる。文字間を指定したい要素に記述する）

2．letter-spacingプロパティを指定した要素内では、<br>を２つ以上連続して置いても１つしか認識されないので、
br {letter-spacing: 0;}
と記述してやる必要がある。

3．ただし上記１と２の設定はMacIEではうまく認識されず、ブロック要素から文字が飛び出てしまう。
（逆に言えばここまでの設定で、Windowsではちゃんと表示できる）

4．したがって、letter-spacingを指定したい部分は
@media screen {
div.entry {letter-spacing: 0.15em;}
br {letter-spacing: 0;}
}
と記述する。
こうすればMacIEで、@media screenの中の設定を無視するように設定できるというわけ。

このバグ、スタイルシート界(？)では有名なバグで…
そうでなくてもMacIE、NN6以下に次いで消して欲しいブラウザです全く。

ということで、記事本文のみ文字間を広げてみました。
多少は見やすくなっているでしょうか。

そいではまた～

個別ページ｜comments (7)｜trackbacks (0)

<< 軽井沢プチ避暑紀行 | main | 関東が震えた、そのとき >>

同じカテゴリの新着記事

いただいたコメント

TAG-K | 2005-07-24 07:30 AM: 初めまして、トラックバックしていただいたK Place*管理人 TAG-Kと申します。この文字間隔の問題について、わかりやすくまとめてあり、大変参考になります！　どうもありがとうございます。

あと、Blogのトラックバック先、URL変更してしまいましてlink (www.k-place.net)になりました（testが抜けました）。トラックバック直後にすみません。

ｍｉｓａ | 2005-07-24 08:30 AM: ぉおおおおおー（感動）。

実はうちのブログ、ＭａｃＩＥから
見ると「ひえー」って状態になって
いたんだけど…。私の知識じゃ手に
負えないなーと思って諦めてました。

ビバ「毎日考」ヽ(´∀`)ノ

…でもどこ直せばいいんだ（死ね）。

ｍｄ | 2005-07-25 10:29 AM: 手直しお疲れ様です。
うちのサイト、Mac IEで見ると「グローバルナビだけセンタリングされない」という症状が。

しかし、現在作成中の商用サイトでは、Mac IEでもちゃんとセンタリングされてる。ほとんど同じ構造なのに...

なっ、なぜだぁぁぁぁぁっ！orz

salsa | 2005-07-25 03:19 PM: ＃TAG-Kさん
コメントと、ご指摘ありがとうございます。
早速修正しておきました。
いきなりのトラバ、ぶっ放したままで失礼を致しております(笑)。

＃ｍｉｓａち
＞実はうちのブログ、ＭａｃＩＥから見ると「ひえー」って状態になっていたんだけど…。
へ？と思って見てみたけど、今は直っているのですね。
直したのかな？
以前の状態がわからないのであれですけど。

＃mdさん
どもども。

＞Mac IEで見ると「グローバルナビだけセンタリングされない」

そもそもMacIEでもセンタリングできるようにするためには、
・一番大枠のDIV要素はセンタリング（text-align:center;）
・その中のDIV要素等には全部text-align:left;を記述
しておく必要があると思うのですが、そこらへんはいかがでしょうか？
対処済みだったらすみません。
その他の要素とも兼ね合いがあるかもしれませんし～

にん | 2005-07-25 03:20 PM: こないだお仕事でコレやっちまったにんです。
なんでだよぉ～(T0T)と数日悩んだ結果、解決。

MacIEはホント手こずります…。

ｍｄ | 2005-07-25 04:03 PM: いやいや、わざわざどうもです。
原因がわかりましたので、ご報告をば。

グローバルナビのdivに「overflow:hidden;」があったため、センタリングしないゲイツの罠。これ消したらセンタリングしました。

そんなの初耳でした...orz

salsa | 2005-07-25 06:38 PM: ＃にんさん
解決されたとのこと、よかったです。
基本的には、文字間調整ってのは使わないほうがいいんじゃないかなーという気もしているんですが…Winがね…(笑)

＃mdさん
overflow:hidden;、ですかあ。
いや、こちらこそ勉強させて頂きました。
バグバグありありですねーほんと。

効かぬなら　消えてしまえ　MacIE。（ぷ

トラックバックはこちらから。

この記事のトラックバックURL :

☆上記のURLを、ブログ投稿画面の「トラックバック先URL(livedoor/FC2)」「トラックバックURL(excite/JUGEM/So-net/goo)」「トラックバック先のアドレス(Yahoo!)」「相手先のトラックバックURL(楽天)」「相手先のトラックバックアドレス(ココログ)」…などの入力欄にコピーして、記事を作成（投稿/保存）してください。
（既存の記事からも、トラックバックURLを入力して「更新（投稿/保存）」することで送ることができます。トラックバックの説明はトラックバックとは？（レシピブログ）などをお読みください。

※当記事へのリンクがないトラックバックは拒否される場合があります。
※ツールなどで無差別に発射されたと思われるものは削除させていただく場合があります。
※商品の広告・宣伝目的、アダルトサイト、スパムブログ等からのトラックバックは即刻削除します。

いただいたトラックバック

ページの先頭へもどる