フォントセット
今までのPukiWikiスキンは英文フォントが日本語フォントの前に入っていたりする。おれはデザインの統一性から考えて?のような気がする1。とりあえず、英文フォントは、こうなる。
body{ font-family: 'Segoe UI', 'Trebuchet MS', Verdana, Arial, Sans-Serif; }
なお、preタグやcodeタグなどのコード文は等幅にしてある。あと、フォームも等幅フォントだ。どう考えたって等幅のほうが、編集時に文章の途中に単語を入れたい時に、テキストカーソルを合わせやすいでしょ。(特に英語)
pre, code, kbd, samp, textarea, select, option, input, var{ font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace; }
どうやって、言語ごとの設定にするか?それはhtmlタグのlang属性を使用する。Adv.や、Plus!のソースを見ればわかると思うが使っている言語によってここの値が変わっていることがわかるだろう。CSSの擬似セレクタを用いて
:lang(ja-JP){ font-family: "メイリオ", AquaKana, 'ヒラギノ角ゴ Pro W3', Osaka, 'MSP ゴシック', SunsSerif !important; }
のように入れれば、日本語のみ反映されるといった指定方法が可能である。また、もうひとつの問題として、Macだとどんなフォントでもアンチエイリアスが効くが、Windowsの場合この処理がいい加減なのか、フォントに原因があるのかは不明だが、少なくともMS Pゴシックではアンチエイリアスがきかない。こんなクオリティのCSSじゃあ使いものにならない。というわけで、デフォルトのフォントはメイリオにしてある。汚いMSP ゴシックは当然最後尾。2
等幅フォントは仕方がない。MS ゴシックを使ってやるか。
:lang(ja-JP) pre, :lang(ja-JP) code, :lang(ja-JP) kbd, :lang(ja-JP) samp, :lang(ja-JP) textarea, :lang(ja-JP) select, :lang(ja-JP) option, :lang(ja-JP) input :lang(ja-JP) var{ font-family:'Osaka−等幅', 'MS ゴシック' !important; }
CSSの多言語化
PukiWiki Plus! i18nはその名のとおり、多言語化を重視している。その派生系であるAdv.も例外ではない。しかし、そこで問題になってくるのが、他の言語のブラウザで見た場合、どのようにみえるか?である。ブラウザにもよるかもしれないが、中国語表記モードや韓国語表記モードで見た場合、フォントが当然ずれるばかりか、明朝体になったりしてしまう。というわけで、色々調整してみた結果以下のようになった。
言語 | フォント |
---|---|
英語 | 'Segoe UI', 'Trebuchet MS', Verdana, Arial |
日本語 | 'メイリオ', 'ヒラギノ角ゴ Pro W3', Osaka, 'MSP ゴシック' |
韓国語 | '맑은 고딕', Gulim, Dotum, AppleGothic |
繁体中国語 | 'Heiti TC', '微軟正黑體', '華康超黑體', '華康新特黑體', '華康粗黑體' |
簡体中国語 | 'Heiti SC', '微软雅黑' |
メイリオ、맑은 고딕、微軟正黑體は、おおむねデザイン的に近いので違和感がないが、微软雅黑は、明らかに書体のデザインが他の言語よりも劣る。どういう設定がいいだろうか?