最近のブラウザでの3点リーダーや引用符の表示について

3点リーダー(…)や引用符(“、”)の表示のされ方を主要ブラウザで比べてみました(↑なんか下についてるの気になりますよね)。

和文と英文がサンセリフで表示され、3点リーダーは縦位置中央に、引用符は左右が異なる形になるのがとりあえずの理想です。

画像でかいので気をつけてね。

なるべく指定を少なくする方向で考えてみるとFireFoxとChromeは指定なし、Safariはヒラギノのみ指定、IEはMS Pゴシック(またはメイリオ)のみ指定、とするのが良さそうです。

これを実装するには……?(おい3点リーダー下についてるぞ)CSSハックだと面倒そうなので、CSSでは指定なしとしてJavascriptでなるべく短く書いてみました。

(function(){var n=navigator,f=function(p,u,s){if(n.platform.indexOf(p)!=-1&&n.userAgent.indexOf(u)!=-1){document.write('<style type="text/css">body{font-family:'+s+';}</style>');}};f("Win","MSIE",'"MS Pゴシック"');f("Mac","Safari",'"Hiragino Kaku Gothic Pro"');})();

伝統的なfont-familyの指定は

font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;

こんなでしたが、必要な部分のみ指定する方がスマートですよね。

当然ながら全部bodyへの指定です。bodyに指定してるのにいくつかの要素で継承しないアレなブラウザがあったような気もしますが、今後の案件で実際に使えるか試してみたいと思います。


エヴァっぽい輪番停電スケジュールを作ってみました

東電のPDFが見にくいなあと思って。 http://110chang.com/rinban/ と思ったらYahoo!の停電情報がちょっと見やすくなってる… 追記 今日はエヴァのおかげで想定外のたくさんの反応を頂きました。


路線/駅名/最寄駅データサービス×標高算出API×canvasタグ

CANVASタグにAPIで取ってきたデータを描画してみた。感覚としてはFlashのGraphicsクラスをいじるのに近いです。 APIまとめサイトみたいのを見ててちょっと遊んでみようかと思い立ち。路線データAPIと標高A


MAMP+WordPress+VMWare FusionでMacもWindowsも確認する

WordPressなどのツールは便利ですが、ローカルであらかた確認してからサーバーにアップすれば制作もスピードアップします。 MAMPでローカル開発できるだけでもすばらしいのですが、Windowsから見れたら便利だなーと


ドメインを統一しました

しばらく使っていたziyotoy.netドメインから110chang.comドメインに統一しました。また、このドメインでやっていこうかと。


最近のこと

前に書いたのは6月か。 ヘテムルにアカウント作ろうとしたら「110chang」が…


ダイニングテーブル兼作業台制作(3)

脚が届きました。 HIMCOという大阪のスチール脚専門店(?)で購入しました。こ…


ダイニングテーブル兼作業台制作(2)

今回は天板の塗装です。 …


ダイニングテーブル兼作業台制作(1)

新しい部屋に引っ越してから早半年。前から考えていたでかい作業台を作ります。 …


Javascriptでスクロールバーをつくる

Javascriptでスクロールバーを作ってみた。 …