AA記法

いつのまにか、はてなAA記法なんてものが実装されてた。
どれどれ……

                                                       、_
     .     .     .    .、           .     ,          .         .・
                   ゙/`                |       .       .      .’
         .         、,   .   .、..’       、!     .  _ ._             ゙1
                   .i  .  . . ., . ・     、, .1      , 1             ゙}
                   .|   .   、i . __ ’  . . ., .’     l 、’             .|
                   .’     .  ・゛`.``\   . i   1     .} .、’      .      、|
                   ゙’_        .ー。、\、...; . .’、   .’ ....’         .    i
                    .\_     .、─‐x、 `...’    \_  ゙}  .-・_   ;        ,
           .          、` ..,...r^..../¨・\        `.、-・・ナ〜、\ ゙|        ,
      .     .     .     .ji ゙}    i´ ..., }  . _   , .、~ ..../´、゜_..`.‥    ゙-、 ノ
                     ./´ ゙、   . ’__/   /=i ′    .!  / 、’.、,  ’  ゙}、l
                    ゙ソ’、_ .’    .`   ゙/    ’  .  、’-‐’ . ../   .l . ..} .!
                   、/`...ア  \。、 _  ._、r¨   .  .\_  .  .  ._.″   | .、/..1
         .         、/ ゙ア`.、/.ッ’゜r^/´         ゙`>-∴._・^ _.} . ..i、/  ゙1
             .      /`../’   .′..´ ´     .>       ゙・`ィ^ ./...┛ .、,´   、’
         .        、; /  .  、!                     .` 、,  ./      ’
      .      .     .i ,     .’     --、   .  、_        ゙, .,       ゙1
                  .′       .\      .?━…・ ̄`     .、 ゙ノ  /    .    .1
                  ¨        、`-.   .   .   .   ._.・´...., ツ`   .   .  .`
                   .’      .      .・-ニ.....=-‐?゛   ..、・   .  .  .  .,
     .     .    .    .・.                          .´        .    ′

あれ? 横につぶれてる気がする。
おいらのAAStroker用に調整したスタイルシートでは……

                                                       、_
     .     .     .    .、           .     ,          .         .・
                   ゙/`                |       .       .      .’
         .         、,   .   .、..’       、!     .  _ ._             ゙1
                   .i  .  . . ., . ・     、, .1      , 1             ゙}
                   .|   .   、i . __ ’  . . ., .’     l 、’             .|
                   .’     .  ・゛`.``\   . i   1     .} .、’      .      、|
                   ゙’_        .ー。、\、...; . .’、   .’ ....’         .    i
                    .\_     .、─‐x、 `...’    \_  ゙}  .-・_   ;        ,
           .          、` ..,...r^..../¨・\        `.、-・・ナ〜、\ ゙|        ,
      .     .     .     .ji ゙}    i´ ..., }  . _   , .、~ ..../´、゜_..`.‥    ゙-、 ノ
                     ./´ ゙、   . ’__/   /=i ′    .!  / 、’.、,  ’  ゙}、l
                    ゙ソ’、_ .’    .`   ゙/    ’  .  、’-‐’ . ../   .l . ..} .!
                   、/`...ア  \。、 _  ._、r¨   .  .\_  .  .  ._.″   | .、/..1
         .         、/ ゙ア`.、/.ッ’゜r^/´         ゙`>-∴._・^ _.} . ..i、/  ゙1
             .      /`../’   .′..´ ´     .>       ゙・`ィ^ ./...┛ .、,´   、’
         .        、; /  .  、!                     .` 、,  ./      ’
      .      .     .i ,     .’     --、   .  、_        ゙, .,       ゙1
                  .′       .\      .?━…・ ̄`     .、 ゙ノ  /    .    .1
                  ¨        、`-.   .   .   .   ._.・´...., ツ`   .   .  .`
                   .’      .      .・-ニ.....=-‐?゛   ..、・   .  .  .  .,
     .     .    .    .・.                          .´        .    ′

おお、これこれ!
ちょっと縦幅が違うんだね。
AA記法の方は何を基準にした設定なんだろう?


これがAA記法の設定で……

div.ascii-art{
  font-size:12pt;
  line-height:18px;
  font-family: "Mona","IPA MONAPGOTHIC","MS PGothic","MS Pゴシック","MS Pゴシック","MS Pゴシック",sans-serif;
}

これが、おいらがAAStroker用にこのページでそれらしく表示されるよう調整したもの。
もともとのblockquoteタグ用のスタイルシート設定を一部いじって調整しただけなので、必要ない設定も混じってると思う。

div.section blockquote {
 font-size:85%;
 font-family:"MS Pゴシック","Arial","Helvetica",sans-serif;
 line-height:110%;
 border-style:dotted;
 border-color:#C4AA97;
 border-width:2px 0px 2px 0px;
 margin:1em 1em 1em 50px;
 padding:0.5em 0 0.5em 0;
 _width:100%;
}

なるほど、フォントサイズやline-heightは固定のほうがいいよね。極力環境に左右されずに見え方を固定するには。私のは%指定だし、別の環境だと思ったようには見えてないんだろうな……。
しかしMonaフォントなんてものがあるのか……。Mac用か。


そしてこれが、AAStrokerのreadmeで推奨されているスタイルシート

.aa{
font-family:'MS Pゴシック','MSPゴシック','MSPゴシック','MS Pゴシック';
font-size:16px;
line-height:18px;
letter-spacing:0px;
}

これで表示すると……


                                                       、_
     .     .     .    .、           .     ,          .         .・
                   ゙/`                |       .       .      .’
         .         、,   .   .、..’       、!     .  _ ._             ゙1
                   .i  .  . . ., . ・     、, .1      , 1             ゙}
                   .|   .   、i . __ ’  . . ., .’     l 、’             .|
                   .’     .  ・゛`.``\   . i   1     .} .、’      .      、|
                   ゙’_        .ー。、\、...; . .’、   .’ ....’         .    i
                    .\_     .、─‐x、 `...’    \_  ゙}  .-・_   ;        ,
           .          、` ..,...r^..../¨・\        `.、-・・ナ〜、\ ゙|        ,
      .     .     .     .ji ゙}    i´ ..., }  . _   , .、~ ..../´、゜_..`.‥    ゙-、 ノ
                     ./´ ゙、   . ’__/   /=i ′    .!  / 、’.、,  ’  ゙}、l
                    ゙ソ’、_ .’    .`   ゙/    ’  .  、’-‐’ . ../   .l . ..} .!
                   、/`...ア  \。、 _  ._、r¨   .  .\_  .  .  ._.″   | .、/..1
         .         、/ ゙ア`.、/.ッ’゜r^/´         ゙`>-∴._・^ _.} . ..i、/  ゙1
             .      /`../’   .′..´ ´     .>       ゙・`ィ^ ./...┛ .、,´   、’
         .        、; /  .  、!                     .` 、,  ./      ’
      .      .     .i ,     .’     --、   .  、_        ゙, .,       ゙1
                  .′       .\      .?━…・ ̄`     .、 ゙ノ  /    .    .1
                  ¨        、`-.   .   .   .   ._.・´...., ツ`   .   .  .`
                   .’      .      .・-ニ.....=-‐?゛   ..、・   .  .  .  .,
     .     .    .    .・.                          .´        .    ′


なるほど、こうなるのか……。見え方は全部違うけど、私が調整したのとAAStrokerの推奨のやつはイメージの大きさが違うだけでタテヨコ比はあってる気がする。……でもそれもおいらの環境でそう見えてるだけなのかもなー。うちはそもそも「大きいフォント」(120dpi)で使ってるし。
あ、ブラウザのフォントサイズを変えていくとタテヨコ比も多少崩れてくるね。推奨ので使うのが一番かな。でも推奨のだとAAStrokerで描いた絵の大きさとAAの大きさが違うんだよね。これも「大きいフォント」で使ってるからかなー。私の調整したものは描いた絵とほぼ同じ大きさで表示されるようにしてる。でもこれもブラウザのフォントサイズの調整ひとつでずれてくるだろうし……。なかなか難しいなー。