Emacs Museでアスキーアート(AA)をhtml出力したけど、MacのFirefoxでAAが重なる。

今日やったことをメモ（一部追記）
- 「IPA モナー Pゴシック」ipagp-mona.ttfをMac OSX Tigerへインストール。Macがフォントに対するエラーを出すが、とりあえずそのままインストール。ちなみに、モナーフォントやMS Pゴシックは入れていない。
- Emacs Museのファイルを作成。アスキーアート部分は，Museのliteralタグで囲んで、その内側でhtmlのspanかdivタグでclass指定。そのclassに対してcssでフォントなどを指定。
- safariでは、cssの'IPAMonaPGothic'の指定が有効になり、アスキーアートが，ソレっぽくそろって見える。
- operaでも、safariと同様にそろっている。
- firefoxでは、cssの'IPA モナー Pゴシック'の指定が有効になり、アスキーアートが，崩れて見える。全角文字が前後で重なって詰まってしまうようだ。これならフォントの指定をしないほうがマシかも。
- 同じアスキーアートをはてなのaa記法にすると（下記）、safari, opera, firefoxいずれも，同様にそろわない。
5月10日にやったこと。
- フォントキャッシュがクリアされるらしいので、Mac OSXをセーフモードで起動してみた。FirefoxでのAAの重なりは変わらず。
- モナーフォントをインストールしてみた。Firefoxでは、逆に文字間が間延びするようになった。Safari, Operaでは揃っている。
- はてなのaa記法にすると（下記）、SafariとOperaで揃うようになった。
- 結局よく分からない。

Emacs Museのソース

<literal>
<pre class="aa">
　　　　　　　　　　 　 -‐ '´￣￣｀ヽ､
　　 　 　 　 　 　 ／　／" ｀ヽ ヽ　　＼
　　　　　　　　　//, '/　　　　 ヽﾊ 　､　ヽ　　　　　　 ス
　　　　　　　　 〃 {_{ノ　　　 ｀ヽﾘ| ｌ │ i|　　あ　チ　モ
　　　　　　　　 ﾚ!小ｌ●　　　 ● 从　|、i|　　 る　|　　|
　　　　　　　 　 ヽ|l⊃　､_,､_,　⊂⊃　|ﾉ│　　か ズ　ク
　 　 　 　 /⌒ヽ__|ﾍ　　 ゝ._）　 　j /⌒i !　　い　は
　　　　　　＼ /:::::|　l＞,､ __,　イァ/　 /│　　？
.　　　　　 　 /:::::/|　|　ヾ:::|三/::{ﾍ､__∧ |
　　　　　　　｀ヽ< |　|　　ヾ∨:::/ヾ:::彡'　|
</pre>
</literal>

<literal>
<span class="aa">
┌──────────────────┐
│┌────────────────┐│
││YUKI.N>また図書館に　　　　　　　　　　││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
│└────────────────┘│
│　　　　　　　　　　o o o o o　　　 　 　 　 　 　 │
└──────┬────┬──────┘
　 　 　 　 　 ┌─┴────┴─┐
　 　 　 　 　 └────────┘
</span>
</literal>

<literal>
<div class="aa">
　　　　　　　　　　 　 -‐ '´￣￣｀ヽ､　　　　　　　　 　 -‐ '´￣￣｀ヽ､　　　　　 　　　 -‐ '´￣￣｀ヽ､
　　 　 　 　 　 　 ／　／" ｀ヽ ヽ　　＼ 　 　 　 　 ／　／" ｀ヽ ヽ　　＼　　　　　 ／　／" ｀ヽ ヽ　　＼
　　　　　　　　　//, '/　　　　 ヽﾊ 　､　ヽ　　　　//, '/　　　　 ヽﾊ 　､　ヽ　 　 　//, '/　　　　 ヽﾊ 　､　ヽ
　　　　　　　　 〃 {_{ノ　　　 ｀ヽﾘ| ｌ │ i|　　 　 〃 {_{ノ　　　 ｀ヽﾘ| ｌ │ i|　　　〃 {_{　　　 　　　ﾘ| ｌ.│ i|
　　　　　　　　 ﾚ!小ｌ●　　　 ● 从　|、i|　　 　 ﾚ!小ｌ●　　　 ● 从　|、i|　　　ﾚ!小ｌノ　　　 ｀ヽ 从　|、i|
　　　　　　　 　 ヽ|l⊃　､_,､_,　⊂⊃　|ﾉ│　　 　 ヽ|l⊃　､_,､_,　⊂⊃　|ﾉ│. 　　ヽ|l　●　　　●　 |　.|ﾉ│
　 　 　 　 /⌒ヽ__|ﾍ　　 ゝ._）　 　j /⌒i !　 /⌒ヽ__|ﾍ　　 ゝ._）　 　j /⌒i !　　 　 |ﾍ⊃ ､_,､_,⊂⊃j 　|　, |
　　　　　　＼ /:::::|　l＞,､ __,　イァ/　 /│.　＼ /:::::|　l＞,､ __,　イァ/　 /│　　　 |　/⌒l,､ __,　イァト |/ |
.　　　　　 　 /:::::/|　|　ヾ:::|三/::{ﾍ､__∧ | 　 　/:::::/|　|　ヾ:::|三/::{ﾍ､__∧ |. 　 　 | /　 /::|三/::/／　 ヽ |
　　　　　　　｀ヽ< |　|　　ヾ∨:::/ヾ:::彡'　|. 　　｀ヽ< |　|　　ヾ∨:::/ヾ:::彡'　|　　　 | |　　l ヾ∨:::/ ヒ::::彡, |

　　　　　　　┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
　　　　　　　┃ちゅるやさんＡは、めがっさを唱えた！　　　　　　　　　　　　　　　　　　　　 　 　 　 ┃
　　　　　　　┃ちゅるやさんＢは、にょろ〜を唱えた！　　　　　　　　　　　　　　　　　 　 　 　 　 　 ┃
　　　　　　　┃ちゅるやさんＣは、スモークチーズを欲しがってる。　　　　 　 　 　 　 　 　 　 　 　 ┃
　　　　　　　┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
</div>
</literal>

使用したcss

.aa{
font-family :'Mona','IPAMonaPGothic','IPA モナー Pゴシック','MS PGothic',sans-serif;
font-size:16px;
line-height:18px;
white-space: pre;
}

Emacs Museが出力したhtml

<pre class="aa">
　　　　　　　　　　 　 -‐ '´￣￣｀ヽ､
　　 　 　 　 　 　 ／　／" ｀ヽ ヽ　　＼
　　　　　　　　　//, '/　　　　 ヽﾊ 　､　ヽ　　　　　　 ス
　　　　　　　　 〃 {_{ノ　　　 ｀ヽﾘ| ｌ │ i|　　あ　チ　モ
　　　　　　　　 ﾚ!小ｌ●　　　 ● 从　|、i|　　 る　|　　|
　　　　　　　 　 ヽ|l⊃　､_,､_,　⊂⊃　|ﾉ│　　か ズ　ク
　 　 　 　 /⌒ヽ__|ﾍ　　 ゝ._）　 　j /⌒i !　　い　は
　　　　　　＼ /:::::|　l＞,､ __,　イァ/　 /│　　？
.　　　　　 　 /:::::/|　|　ヾ:::|三/::{ﾍ､__∧ |
　　　　　　　｀ヽ< |　|　　ヾ∨:::/ヾ:::彡'　|
</pre>



<span class="aa">
┌──────────────────┐
│┌────────────────┐│
││YUKI.N>また図書館に　　　　　　　　　　││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
│└────────────────┘│
│　　　　　　　　　　o o o o o　　　 　 　 　 　 　 │
└──────┬────┬──────┘
　 　 　 　 　 ┌─┴────┴─┐
　 　 　 　 　 └────────┘
</span>


<div class="aa">
　　　　　　　　　　 　 -‐ '´￣￣｀ヽ､　　　　　　　　 　 -‐ '´￣￣｀ヽ､　　　　　 　　　 -‐ '´￣￣｀ヽ､
　　 　 　 　 　 　 ／　／" ｀ヽ ヽ　　＼ 　 　 　 　 ／　／" ｀ヽ ヽ　　＼　　　　　 ／　／" ｀ヽ ヽ　　＼
　　　　　　　　　//, '/　　　　 ヽﾊ 　､　ヽ　　　　//, '/　　　　 ヽﾊ 　､　ヽ　 　 　//, '/　　　　 ヽﾊ 　､　ヽ
　　　　　　　　 〃 {_{ノ　　　 ｀ヽﾘ| ｌ │ i|　　 　 〃 {_{ノ　　　 ｀ヽﾘ| ｌ │ i|　　　〃 {_{　　　 　　　ﾘ| ｌ.│ i|
　　　　　　　　 ﾚ!小ｌ●　　　 ● 从　|、i|　　 　 ﾚ!小ｌ●　　　 ● 从　|、i|　　　ﾚ!小ｌノ　　　 ｀ヽ 从　|、i|
　　　　　　　 　 ヽ|l⊃　､_,､_,　⊂⊃　|ﾉ│　　 　 ヽ|l⊃　､_,､_,　⊂⊃　|ﾉ│. 　　ヽ|l　●　　　●　 |　.|ﾉ│
　 　 　 　 /⌒ヽ__|ﾍ　　 ゝ._）　 　j /⌒i !　 /⌒ヽ__|ﾍ　　 ゝ._）　 　j /⌒i !　　 　 |ﾍ⊃ ､_,､_,⊂⊃j 　|　, |
　　　　　　＼ /:::::|　l＞,､ __,　イァ/　 /│.　＼ /:::::|　l＞,､ __,　イァ/　 /│　　　 |　/⌒l,､ __,　イァト |/ |
.　　　　　 　 /:::::/|　|　ヾ:::|三/::{ﾍ､__∧ | 　 　/:::::/|　|　ヾ:::|三/::{ﾍ､__∧ |. 　 　 | /　 /::|三/::/／　 ヽ |
　　　　　　　｀ヽ< |　|　　ヾ∨:::/ヾ:::彡'　|. 　　｀ヽ< |　|　　ヾ∨:::/ヾ:::彡'　|　　　 | |　　l ヾ∨:::/ ヒ::::彡, |

　　　　　　　┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
　　　　　　　┃ちゅるやさんＡは、めがっさを唱えた！　　　　　　　　　　　　　　　　　　　　 　 　 　 ┃
　　　　　　　┃ちゅるやさんＢは、にょろ〜を唱えた！　　　　　　　　　　　　　　　　　 　 　 　 　 　 ┃
　　　　　　　┃ちゅるやさんＣは、スモークチーズを欲しがってる。　　　　 　 　 　 　 　 　 　 　 　 ┃
　　　　　　　┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
</div>

上記htmlを、はてなのaa記法で

<pre class="aa">
　　　　　　　　　　 　 -‐ '´￣￣｀ヽ､
　　 　 　 　 　 　 ／　／" ｀ヽ ヽ　　＼
　　　　　　　　　//, '/　　　　 ヽﾊ 　､　ヽ　　　　　　 ス
　　　　　　　　 〃 {_{ノ　　　 ｀ヽﾘ| ｌ │ i|　　あ　チ　モ
　　　　　　　　 ﾚ!小ｌ●　　　 ● 从　|、i|　　 る　|　　|
　　　　　　　 　 ヽ|l⊃　､_,､_,　⊂⊃　|ﾉ│　　か ズ　ク
　 　 　 　 /⌒ヽ__|ﾍ　　 ゝ._）　 　j /⌒i !　　い　は
　　　　　　＼ /:::::|　l＞,､ __,　イァ/　 /│　　？
.　　　　　 　 /:::::/|　|　ヾ:::|三/::{ﾍ､__∧ |
　　　　　　　｀ヽ< |　|　　ヾ∨:::/ヾ:::彡'　|
</pre>



<span class="aa">
┌──────────────────┐
│┌────────────────┐│
││YUKI.N>また図書館に　　　　　　　　　　││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
││　　　　　　　　　　　　　　　　　 　 　 　 　 ││
│└────────────────┘│
│　　　　　　　　　　o o o o o　　　 　 　 　 　 　 │
└──────┬────┬──────┘
　 　 　 　 　 ┌─┴────┴─┐
　 　 　 　 　 └────────┘
</span>


<div class="aa">
　　　　　　　　　　 　 -‐ '´￣￣｀ヽ､　　　　　　　　 　 -‐ '´￣￣｀ヽ､　　　　　 　　　 -‐ '´￣￣｀ヽ､
　　 　 　 　 　 　 ／　／" ｀ヽ ヽ　　＼ 　 　 　 　 ／　／" ｀ヽ ヽ　　＼　　　　　 ／　／" ｀ヽ ヽ　　＼
　　　　　　　　　//, '/　　　　 ヽﾊ 　､　ヽ　　　　//, '/　　　　 ヽﾊ 　､　ヽ　 　 　//, '/　　　　 ヽﾊ 　､　ヽ
　　　　　　　　 〃 {_{ノ　　　 ｀ヽﾘ| ｌ │ i|　　 　 〃 {_{ノ　　　 ｀ヽﾘ| ｌ │ i|　　　〃 {_{　　　 　　　ﾘ| ｌ.│ i|
　　　　　　　　 ﾚ!小ｌ●　　　 ● 从　|、i|　　 　 ﾚ!小ｌ●　　　 ● 从　|、i|　　　ﾚ!小ｌノ　　　 ｀ヽ 从　|、i|
　　　　　　　 　 ヽ|l⊃　､_,､_,　⊂⊃　|ﾉ│　　 　 ヽ|l⊃　､_,､_,　⊂⊃　|ﾉ│. 　　ヽ|l　●　　　●　 |　.|ﾉ│
　 　 　 　 /⌒ヽ__|ﾍ　　 ゝ._）　 　j /⌒i !　 /⌒ヽ__|ﾍ　　 ゝ._）　 　j /⌒i !　　 　 |ﾍ⊃ ､_,､_,⊂⊃j 　|　, |
　　　　　　＼ /:::::|　l＞,､ __,　イァ/　 /│.　＼ /:::::|　l＞,､ __,　イァ/　 /│　　　 |　/⌒l,､ __,　イァト |/ |
.　　　　　 　 /:::::/|　|　ヾ:::|三/::{ﾍ､__∧ | 　 　/:::::/|　|　ヾ:::|三/::{ﾍ､__∧ |. 　 　 | /　 /::|三/::/／　 ヽ |
　　　　　　　｀ヽ< |　|　　ヾ∨:::/ヾ:::彡'　|. 　　｀ヽ< |　|　　ヾ∨:::/ヾ:::彡'　|　　　 | |　　l ヾ∨:::/ ヒ::::彡, |

　　　　　　　┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
　　　　　　　┃ちゅるやさんＡは、めがっさを唱えた！　　　　　　　　　　　　　　　　　　　　 　 　 　 ┃
　　　　　　　┃ちゅるやさんＢは、にょろ〜を唱えた！　　　　　　　　　　　　　　　　　 　 　 　 　 　 ┃
　　　　　　　┃ちゅるやさんＣは、スモークチーズを欲しがってる。　　　　 　 　 　 　 　 　 　 　 　 ┃
　　　　　　　┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
</div>