根本的に見てる所が違うのかもしれないけど、やや強引に解決しています。
問題
Firefoxで、[ツール]→[オプション]→[コンテンツ]→[フォントと配色]の[詳細設定]→“Web ページが指定したフォントを優先する”のチェックを外した状態だと、PRE要素の中身が [ツール]→中略→[詳細設定]→“等幅(Monospace)”で指定したフォントで表示されず、プロポーショナルフォントで表示されてしまう。気持ち悪い。
“Web ページが指定したフォントを優先する”にチェックを入れていれば問題ないのだが、それだとメイリオでアンチエイリアスな気分に浸っているところを、Webページ作成者が指定する、古式ゆかしいＭＳ Ｐゴシックや胸糞悪いＭＳ Ｐ明朝、あるいは存在の抹消を願う MS UI Gothic でぶち壊されてしまい、こちらの方がストレスが大きい(ＭＳ ゴシックとFixedSys はかつての友)。
まとめると、
- 俺はお前の思う通りのフォントでWebサイトを閲覧するぜ! → 不愉快だわ
- 俺は俺の思う通りのフォントでWebサイトを閲覧したい! → PRE要素の中身だけが思い通りにならない!
となる。この問題を解決し、全てのウェブページをアンチエイリアスなフォントで、等幅でいて欲しいところは等幅で、プロポーショナルでいて欲しいところはプロポーショナルで優雅に楽しみたいのだ。
実例をあげるとすれば、RBOのチーム運営画面。秋データなどがプロポーショナルフォントで表示されてしまうのだ(RBOサイトに問題があるわけではない)。
解決法
- ツール→オプション→コンテンツ→フォントと配色の詳細設定→“Web ページが指定したフォントを優先する”のチェックを外す
- Firefoxのユーザースタイルシート(デフォルトでは、C:\Documents and Settings\ユーザ名\Application Data\Mozilla\Firefox\Profiles\プロファイル名\chrome\userContent.css)に、以下の記述を追加し、Firefoxを再起動する。
* {font-family : sans-serif !important;}pre, pre * {font-family : monospace !important;}
ただし、これだとWebサイト製作者が「ここは等幅」と意図していても、PRE要素の中身以外は全部プロポーショナルフォントになってしまいます。また、PRE要素以外にも等幅で表示して欲しいような要素…例えば上記でも使用しているCODE要素やフォーム入力欄の中など、何もかもがプロポーショナルになってしまいます。それが気になる人は、CODE要素などの等幅で表示されて欲しい要素を全てfont-family : monospace !important;としておく必要があります。
近ごろは、XPでもメイリオが使えるようです。ただし、ありとあらゆる個所に適用しようとするとダイアログボックスに設定項目が入りきらず、操作しづらくなったりします(見えないだけで項目は存在しているので、何があるか分かっていればTabキーやカーソルキーで何とかならないこともないが、それは何とかなるとは言わない)。全てをアンチエイリアスにしたければ別のフォントを使用するか、ブラウザだけメイリオにするとかした方がいいでしょう。
Macのフォントや有料のフォントはキレイですよね。だから、メイリオごときでキレイとか何をほざくか…と思う方もいらっしゃるかもしれません。でも俺にはメイリオしかないんだ。だからメイリオが一番いいんだ。
いちおう、MeiryoKeとかMS-GothicExPlusの名前を出さずに本文を構成してみた。
Firefox3.0b4でも確認しましたので、おそらくFirefox3.0でもこの問題は継続すると思います。
(Firefoxはβになってからでも、インタフェースが変わる凄いプロダクトなので、断言はできませんが (笑))
>デフォルトでは、C:\Documents and Settings\ユーザ名\Application Data\Mozilla\Firefox\Profiles\プロファイル名\chrome\userContent.css
Vistaユーザのためにもアプリケーションデータフォルダを、シンボリック表示にすると、汎用的な表記になるかも。
%AppData%\Mozilla\Firefox\Profiles\プロファイル名\chrome\userContent.css
ついでに、Windows以外のシステムの場合
http://www.mozilla-japan.org/support/firefox/edit#profile
>ただし、これだとWebサイト製作者が「ここは等幅」と意図していても、PRE要素の中身以外は全部プロポーショナルフォントになってしまいます。
そういう時は、tt要素を使ってもらうよう、Web製作者にお願いすることになると思います。
ちなみに、tt要素はstrict系のX/HTMLでも使えます。
>それが気になる人は、CODE要素などの等幅で表示されて欲しい要素を全てfont-family : monospace !important;としておく必要があります。
pre、tt、codeに加えて、個人的にはvar、kbd、sampあたりを推奨。なんというか、気持ちの問題ですが。
バージョンも書いておくべきでしたね。いくつからは覚えてませんが、とりあえず2.x。
＞Vistaユーザのためにも
ツッコまれて、あれ? と思ったんですよ。自分VistaだからVista前提で書いてるはずなのに。…この記事はXP上で書いてましたというオチ。
シンボリック表示は分かりやすさのために犠牲にしました。逆に分かりにくい人もいるでしょうが、たぶん読者多数にはこの方が分かりやすい、はず。
でも、こういうツッコミがあると自分で書かなくて済むのでありがたいです。併記しとけば済む話なんですけど、その一手間を惜しむというか気が回らないというか。
＞tt要素はstrict系のX/HTMLでも使えます
実は今まで使えないと思い込んでました。
＞等幅で表示されて欲しい要素
そのへんの、テキストエディタの中身やコードをそのまま見て欲しい(見たい)系は必要ですね。くやしいから何かもう1個くらい追加してやろうと思ったんですが、それらの他に自分が等幅でいて欲しい要素が思いつきません(笑)。
期を逸しましたが、気になって仕様読んでみたので遅レス。
PRE要素についてはHTML4.01の仕様では
・May render text with a fixed-pitch font.
(固定ピッチフォントで表示「してもよい」)
なので「PRE要素だからといって、固定ピッチフォントとは限らない」ため、「固定ピッチフォントでなければならない」ならTT要素を使わねばならないようです。
2chのアスキーアートのようにプロポーショナルフォントを前提とした整形済みテキストもありますが、つまり特定フォント依存なので「PRE要素は固定ピッチフォント固定」でいいと思うのですが…… (って言うか画像埋め込みができるフォーマット=HTMLなら本来アスキーアートはいらないはずなのですが……)。
言われて私も読んでみました。空白や改行についても May ～ だったんですね。恥ずかしながら知りませんでした。
ということは、 Firefoxはフォントの設定が等幅でもPRE要素を等幅で表示しなければならない、なんてことはない? と思って、実験してみました。
この記事で行った操作をナシにして…
P要素 : プロポーショナル
PRE要素 : プロポーショナル
TT要素 : 固定ピッチ
となりました。「PRE要素だからといって、固定ピッチフォントとは限らない」「「固定ピッチフォントでなければならない」ならTT要素」の通りになってしまいました。
＞AA
文字のみの掲示板に手軽に書き込めるから使用されているのであって、画像で投稿するようになったら誰も使わないと思…
テキストのAA投稿→サーバ側で画像に変換→画像として表示
にすればいいのか。でもこれだとコピペできません。
なんだかAAが、音楽用カセットテープにプログラムを埋め込む、みたいな話に思えてきました。