FireFoxのtext-overflow「…」や「‥」の問題
ファイアーフォックスでtext-overflowをスタイルに組み込んでも、実のところ最新のver8.0.1でもまだ未実装です。でも未実装という言葉は適切では無いでしょう。実は解釈しています。そう実装されているのです。でも動きません。挙動がバグってるんですね。
text-overflowのellipsisに関するものです。
text-overflow: ellipsis;
これね！ 指定されたブロック要素の範囲において、テキストがオーバーフローした際に、FireFox3.6.xでは正しく処理されます。overflow: hidden;であれば、自動的に「…」を行末に入れてくれるナイスなＣＳＳです。
しかし、ファイアーフォックスでは最新のver 8.0.1でもまだ対応していません。というより挙動にバグですね。
text-overflow: ellipsis; → 動く（IE6,7,8,9成功 FireFox6,7,8バグ動作）
-o-text-overflow: ellipsis; → 動く（オペラのみ）
-icab-text-overflow: ellipsis; → 動く
-khtml-text-overflow: ellipsis; → 動く
-moz-text-overflow: ellipsis; → 動かない（本来はFireFox4,5,6,7,8用だが未実装）
-webkit-text-overflow: ellipsis; → 動く
まあ、ざっくりでいえばこんな感じです。
結論から言えば無理です。ただし条件として「横幅が完全に固定ピクセル」で設定されている要素であれば、フェイクにmargin-rightでマイナス要素を入れて行末に‥を補完する手があります。しかし、これが幅が変動する場合ではくずれてしまいますからアウトです。また「‥」も「…」と違いますし、コンテンツ要素に強制的に「…」を指定して div:no で判定させてフェイクなテクニックを使っても、今度は他のブラウザで未推奨のスタイル定義であるというエラーコードが乱発します‥‥‥
ファイアーフォックスが公式に text-overflow: ellipsis; を実装するまで、このスタイルは使わない方が良いそうです。下手に使っていたり、フェイク技法で補完していると、いざ幅を自由に auto ないし 100%などの相対値の要素が上位のtbodyなどに含まれるとまた一気に総崩れを起します。
フェイクはフェイクでどこまでもフェイクで見せているだけなので‥‥‥
根底が１ヶ所ミスれば、フェイクは総崩れするのがフェイクの宿命。公式による実装を待つべき、といったところでしょうね。それなりに行末に「…」が付くとクールで見映えはしますが、無ければ無くても問題ないのもデザイン面では事実で、ユーザビリティを考えれば、ひょんなことで総崩れしてオカシナことになっても無意味ですし、…が行頭に出てしまい肝心なテキストが見えなくなるというFireFox8.0.1の現在のバグを維持することは問題でしょう。
ちょうどオープンソースの講習会ということで、きゃらめーるＴＭで知られているコミュネスさんの無料WEBデザイナー講習を聞きにいったときの講話だったのですが、オープンソースはもちろんRoundCubeベースで講習でも取り上げられ、構築手順からカスタマイズ、そして、きゃらめーるでお馴染の動画メルモーションTMのサーバー群との連装などのお披露目でした。
ここでの講話にあったのが、今回のFireFox4,5,6,7,8におけるtext-overflow: ellipsis;のトラブル。
メールのリスト表示でFireFoxの4,5,6,7,8だけに限って、メールのタイトルが長いと…だけしか表示されなくなるとうもの。そのためFireFoxの2,3では問題が発生しないというヤヤこしいことになっているようです。私も検証してみましたが、古いFireFox3.6.24で実際にやってみましたが、なるほど問題無かったですね。確かにFireFox8.0.1では問題があるようです。解釈の違いというか、実装がめちゃくちゃに解釈されていて、行末にあるべき部分が自動的に横幅いっぱいの左寄せ部分に…が表示され、本来のテキストがすべて消去される感じですね。なるほど、これで「消えるように見えていた」わけですね。消えたわけじゃなくて、ＣＳＳの解釈の違いによって行末の「…」が行頭に上書きされて消される、という意味不明な挙動で実装されている、というのがFireFox8.0.1の実態のようです。
解除方法も講演では取り上げられ、きゃらめーるＴＭのベースとなっている「RoundCube」というメールシステムはオープンソースなので講演の技術もインターネットで公開しても構いませんとのことでしたので、さっそくこのブログを書いてみました。
RoundCubeでFireFoxでメールのリストのタイトルが長いと「…」になる問題の解決は
/skins/default/mail.css
#messagelist tbody tr td
{
height: 20px;
padding: 0;
font-size: 11px;
overflow: hidden;
vertical-align: middle;
white-space: nowrap;
/* FireFox don't work text-overflow, by communes */
/*text-overflow: ellipsis;*/ /* ← コメントアウト */
/*-o-text-overflow: ellipsis;*/ /* ← コメントアウト */
border-bottom: 1px solid #EBEBEB;
cursor: default;
}
と、コメントアウトすれば直るそうです。どうぞご参考までに。
私のメール事情は、いろいろ利用しているのでひとつにまとめたいなって思っていたのですが、敢えて毎月かなりのお金をかけてまで自分でレンタルサーバを何台も用意してメールシステムを組むほどのことも無かったので、そのままコミュネスの大きな専用サーバーでウエブメールサービスが提供されているRoundCubeカスタム版「きゃらめーるＴＭ」の無料利用サービスを申し込みました。
すごくかわいくて初心者でもわかりやすくて快適に使えますね。このウェブメール。ネットで検索してみたら初期デザインはグレーみたいでしたから、かわいいデザインなのはコミュネスさんのオリジナルデザインのようですね。。
きゃらめーるの無料申込みのリンクを紹介しておきますね。
http://shop.communes.jp/html/products/detail.php?product_id=15
Trackback URL: トラックバック用URLを生成するには、JavaScriptを有効にしてください。
No trackbacks
コメント（0）