なぜTumblrではAAがずれるのかの続き
一つ前のエントリ なぜTumblrではAAがずれるのか - saitamanodoruji の続き。
（※注：一つ前のエントリは、自分がブラウザのフォントに関する設定を間違えていたので全然役に立たない内容になってて、このエントリの前半は、それのどこがどう間違っていたのかの説明です。だから一つ前のエントリを読んで「何言ってんのコイツ」と思った方以外は、このエントリの「本題：」から読むと時間が無駄にならなくてよいと思います。）
Post内のテキストに対してフォントが指定できなかった件
tumblr365n2 - re Firefoxでスレ開いてキャプ
フォント名の「ＭＳ Ｐゴシック」のＭＳとＰは(いわゆる)全角文字ですよ。間の空白は「半角」でないとだめです。これが原因じゃないのかなあ。(Firefoxの場合、日本語表記のフォント名でないと適用されないとかなんとか)
id:as365n2さんありがとう。さっそくTumblrのcustom CSSからフォントを指定しなおしてみた。だけど全くAAの見え方が変わらないので、変だなあと思ったらFirefoxの[オプション]→[フォントと配色]→[詳細設定]→[Webページが指定したフォントを優先する]のチェックが外れてた…orz
ここにチェックを入れたら、AAはちゃんとＭＳ Ｐゴシックで表示されました（図１）。英語表記の'MS PGothic'のみで指定してもおｋでした（Firefox3.0.3, XP Home SP2）。
図１．2chのAAのキャプをPhotoで投稿して、説明文にそのソースをコピペして比較したTumblrのエントリのキャプチャ。上下ともにＭＳ Ｐゴシックで表示したものになっている。元ページはここ→Firefoxでスレ開いてキャプ
htmlタグの属性をいじったらフォントが変わった件
同じページについて、「Tumblr上ではAAがずれてた（画像）けど、ソースをメモ帳にコピペして
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
という部分を
<html>
に書き換えてから保存してFirefoxで開いたら、指定したフォントが適用された。だからこのズレはXHTMLに関係してるんじゃないだろうか。」というようなことを書いたんだけど、たぶんまったくの的外れで、ズレが直ったように見えたのは lang="en" を削除したからみたいだ。タグの中の lang="en" だけを消しても同じ結果になった。
どうして lang="en" を削除したらズレが直ったように見えたのか、それはきっとこういうことだと思う。自分のFirefoxの設定では、Webページが指定してきたフォントを無視して、西欧の文字をArialで、日本語の文字をMS UI Gothicで表示するようになっていた。だから、
- lang="en" でページの言語に英語が指定されたときには、記号などのArialで表示できる文字はArialで、残った日本語はMS UI Gothicで表示された結果、AAがずれていた（この画像のキャプションの状態）。
- 一方 lang="en" を削除したときには、ページの言語が日本語だと判定されて、すべての文字がMS UI Gothicで表示された結果、ある程度ずれが解消された。
ということが起きていたんじゃないかなと。
本題: なぜ Tumblr では AA がずれるのか → Tumblr が文字を置換するから
フォントを正しく指定していても、投稿した文章に含まれる特定の文字（および文字の組合せ）を Tumblr が別の文字の数値文字参照に置換しちゃうから AA がずれてしまうみたい。どういう文字が置換されるのかは、上で示した図 1 でもわかるけど、54kan さんの比較だともっとわかりやすい。
遊び場
表 1 から表 3 に置換される文字の例を挙げる。
| 投稿前 | 投稿後 |
|---|---|
| ' | ’ |
| [半]引用符（始），アポストロフィ (0x0027) | [全]引用符（終），アポストロフィ (0x2019) |
| ' | ’ |
| 投稿前 | 投稿後 |
|---|---|
| . . . | … |
| ( [半]ピリオド (0x002E) + [半]空白 (0x0020) ) の 3 回繰返し | 三点リーダ |
| ... | … |
| 投稿前 | 投稿後 | |
|---|---|---|
| ,, | „ | |
| [半]コンマ (0x002C) の 2 回繰返し | double low-9 quotation (0x201E) *4 | |
| ,, | „ | „ |
また、id:as365n2 さんによれば、空白文字（など）も  （0x00A0）などの文字参照に置換されたりするらしい。
せるくま。あとでg:tumblrあたりでいろいろ整理する。tumblr内では空白文字(など)が一部＆#160;などの文字参照に置換されるっぽい。ぶち厄介。
本文で触れなかったけど役立つと思うリンク
http://d.hatena.ne.jp/log-storage/20070526#p1 … AA 用の font-family 指定について。
空白・特殊記号 - ニコニコ動画まとめwiki … ニコニコ動画のコメント用にまとめられた、各種空白の解説。
（2008/12/23 ちょっと追記: ページ内ジャンプと細かい表現とか）
（2011/11/29 修正: 表 1, 2, 3 と文章も少し。）
*2:Unicode … 日下部氏による Unicode Plane 0 (0000–FFFF): Basic Multilingual Plane (BMP) の一覧表。
*3:code.cside.com … 文字と文字参照の変換をやってくれる。IE のみ。
*4:Quotation mark - Wikipedia …ページ下部の表。
