Webフォントを使って三点リーダーを表現する際の注意点
半年ぶりの更新がバグネタってのが情けないね。
この記事は CSS珍100景 Advent Calender2014に合わせて記事投稿してます。
貯蓄したバグネタと被っていないか色々とググッた結果、8割ぐらいが既に報告があがっていたので、引き出しの少なさを実感する次第。
Webフォント（Webフォントサービス）を使うとCSS3の三点リーダーが表示されない
Fonts.comのAixsフォントを使っていた時に起きた現象をご紹介。
CSS3を使って三点リーダーによる文言省略を実現するには、
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
と記述するが、（ここや、ここのサイトのほうが詳しく紹介している）
WEBフォントを適用している文字列に対して、このCSSを設定しても省略記号（...）がでない。なんぞ...?と思い、色々と試行錯誤してみたが、Webフォントを読み込まないとうまくいくことが判明。
結論を言ってしまうとなんてことはなく、Webフォントを読み込む際に、ベンダーが支給しているフォント読み込み用JSが、ページ内にどんな文字が使われているかを判定して、読み込むグリフだけをサブセット化している仕組みの盲点から起きる問題っぽい。上記CSSで作成する三点リーダー文字「…」は、読み込みの対象外のようです。
解決策
一番簡単な方法は、省略文字に対してWebフォント（Webフォントサービス）を使わないこと。
他の方法としてはJSで無理やりやるとか、3点リーダを画像化して、省略文字の前にかならず表示されるようにセットする、どこかに「…」文字を表示させておく....といったトリッキーな方法があるけど、どれも費用対効果に見合わない対策なので、あんまりオススメはしないです。こわい。
現場からは以上です。
次世代WebデザインツールMacawがそろそろリリースされるらしいよ。
ベトナム縦断のレポート記事まとめで唸っている中、あの噂の新Webデザインツールがついに、ついにリリースされる模様です。 「来月末（3/31）までにリリースされるよ」とアナウンスされていますが、はたして無事リリースされるのか。
というか、もう事前予約しているのでリリースされないと困ります。
Macaw: The Code-Savvy Web Design Tool
2013年にWebサイト制作をする上で最も多く使用した補助アプリ5選
今年もジェットコースターのように過ぎて行きました。。
で、今年を振り返って、Web制作（デザイン・コーディング・納品）をする上で 最も多く使用した
デザインツール以外のアプリを5つ、まとめてみました。
補助的な位置づけのソフトですが、これらがないと 自分の仕事は立ちいかなくなったことでしょう。
