2010年02月17日
AAが崩れる件についての考察
昨日のブログをあげるに当たって、実は随分苦戦(一時間位かな)をしてました。というのは貼り付けた
AA(アスキーアート)が思いっきり崩れていたのです。
例
, r==ー-
, -─‐ メx
/ ´⌒ Y⌒ヽ
,ィ´/-‐/,/ / /l!⌒ヽ \
// / /゙´ /∧/ / / l\ \ 〉、
' 〃 / //^/∧// l/| | ヽ`ヽ、 `ー - 、 マ=ィ=x、
j! ル'´/〃 //'⌒ ト l | Y ヘ`ヽ、\ \ マ=/ / \
/ / /レ'/ィ行ト、 ヽト、 リ 〉 ! \ヽ 、 マ=/ / ,/=マ
/∧ ヽ.r∧k| 弋ソ ィ行ト、 〃j /`ヽj、 〉ハ 〉 ノ/ /=マ
! l ∨ j{ ゙ム"" , 弋,ソ /人//!ヽ. ハハ / /><.>'=マ
ソ乂._八 (`ヽ ""/乂 ヽ.} /)イー ─ - - ─-----─ァ⌒j/></
∠\\ _´ ,... イ\.::`ヽ. ,ル'.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:〃 ,不ヽ>ーゥ
j´.:.:.:.:`\`Yヾ-x、.:.:\ヽ.:.:レ '.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.: jl/><(ヽY´
人.:.:.:.:.:.:.:.:.:`{{、}}ノノ.:ヾノヽ 、_.:. -‐―ー--――――゚、.:/></一 '
{.:.::` ー.:.:_.:.Ⅶノハヾx..:く´ \、 /></
乂.:.:.:.:.:.:.:.:.:.:.: ̄`ヽ.:))::゛::ヘ ヾ、 /></
入.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.: \():.ノ \、 ........_ /></
ヽ:.:ヽ、:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.`\ ,ィ'´ x‐。 ヽ /></
∨ヽ.:.:`.:‐.:、...:.:.:.:.:.:.:.:.:.:.:.:\i/ ゝィ /></
∨ ',.:.:.:.:.:.:.:^.:ー-.、.:.:.:.:.:.:.:.:.:\ X./></
∨j.:.:.:.:.:.:.:.:.:.:.: ():.ヽ、.:.:.:.:.:.:.:.:゙</></ ||
. ∨.:.:.:.:.:.:.: ,xr<゛ \.:.:.:.:.:.:.:.:.:X > 入_,、
, <.:∨.:.:.:,x/ `>、゚。.:.:,//⌒又 ノ
<.: /.:.:.:.:.∨:// 。 く./X ヽ.:」厶 ㍉ ィ"
/.:ヽ、.:.:.:.:ト.ィ′ (o、/><></ ゚ \ 了
. 〃//\.:.:.||j `ヽヾx´/ ゚、 。 /ゝ、 孑
∧/.:.:.:.:.:/\!!! ヽo) \ / `'
r― /.:/.:.:.:.:.:.f.:.:.:.:爪 `}
j//.:/.:.:.:.:.:.:.:ト、.:.:.:.∧ (o) (o) リ
<.: く:<:「`ヽ.:.:.:.:|.:.:ヽ|.:.:心 (o) (o) /
 ̄ l ` ー 、.:.:.!.:.:|.:|ヾト、 /
,r=x ! ヽ!.:.:!.:|.:.:.:.:.:>ー--x‐ ' ´
!{/⌒ヽ._ { l ` ー‐< ', ,ィ=.、
!l{ `', ! ∨ 'k.:.:..:)
》`¨ヘ、 ∧ l ∨ ト、ヽ|
!.:.:.:.:.〈\ | j. ∨ 人 Y.:!
ゝ、__,ノ \! ,' ∨ /.:.}
\ / ∨ ∠..ノ
` 一 '´ ` 一 '
こんな感じ、先ず思いついたのが行間を狭くする事と、太字を解除する事です。
<span style="line-height:1.1;font-weight:normal;">AA本体</span>
で、こんな感じ
, r==ー-
, -─‐ メx
/ ´⌒ Y⌒ヽ
,ィ´/-‐/,/ / /l!⌒ヽ \
// / /゙´ /∧/ / / l\ \ 〉、
' 〃 / //^/∧// l/| | ヽ`ヽ、 `ー - 、 マ=ィ=x、
j! ル'´/〃 //'⌒ ト l | Y ヘ`ヽ、\ \ マ=/ / \
/ / /レ'/ィ行ト、 ヽト、 リ 〉 ! \ヽ 、 マ=/ / ,/=マ
/∧ ヽ.r∧k| 弋ソ ィ行ト、 〃j /`ヽj、 〉ハ 〉 ノ/ /=マ
! l ∨ j{ ゙ム"" , 弋,ソ /人//!ヽ. ハハ / /><.>'=マ
ソ乂._八 (`ヽ ""/乂 ヽ.} /)イー ─ - - ─-----─ァ⌒j/></
∠\\ _´ ,... イ\.::`ヽ. ,ル'.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:〃 ,不ヽ>ーゥ
j´.:.:.:.:`\`Yヾ-x、.:.:\ヽ.:.:レ '.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.: jl/><(ヽY´
人.:.:.:.:.:.:.:.:.:`{{、}}ノノ.:ヾノヽ 、_.:. -‐―ー--――――゚、.:/></一 '
{.:.::` ー.:.:_.:.Ⅶノハヾx..:く´ \、 /></
乂.:.:.:.:.:.:.:.:.:.:.: ̄`ヽ.:))::゛::ヘ ヾ、 /></
入.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.: \():.ノ \、 ........_ /></
ヽ:.:ヽ、:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.`\ ,ィ'´ x‐。 ヽ /></
∨ヽ.:.:`.:‐.:、...:.:.:.:.:.:.:.:.:.:.:.:\i/ ゝィ /></
∨ ',.:.:.:.:.:.:.:^.:ー-.、.:.:.:.:.:.:.:.:.:\ X./></
∨j.:.:.:.:.:.:.:.:.:.:.: ():.ヽ、.:.:.:.:.:.:.:.:゙</></ ||
. ∨.:.:.:.:.:.:.: ,xr<゛ \.:.:.:.:.:.:.:.:.:X > 入_,、
, <.:∨.:.:.:,x/ `>、゚。.:.:,//⌒又 ノ
<.: /.:.:.:.:.∨:// 。 く./X ヽ.:」厶 ㍉ ィ"
/.:ヽ、.:.:.:.:ト.ィ′ (o、/><></ ゚ \ 了
. 〃//\.:.:.||j `ヽヾx´/ ゚、 。 /ゝ、 孑
∧/.:.:.:.:.:/\!!! ヽo) \ / `'
r― /.:/.:.:.:.:.:.f.:.:.:.:爪 `}
j//.:/.:.:.:.:.:.:.:ト、.:.:.:.∧ (o) (o) リ
<.: く:<:「`ヽ.:.:.:.:|.:.:ヽ|.:.:心 (o) (o) /
 ̄ l ` ー 、.:.:.!.:.:|.:|ヾト、 /
,r=x ! ヽ!.:.:!.:|.:.:.:.:.:>ー--x‐ ' ´
!{/⌒ヽ._ { l ` ー‐< ', ,ィ=.、
!l{ `', ! ∨ 'k.:.:..:)
》`¨ヘ、 ∧ l ∨ ト、ヽ|
!.:.:.:.:.〈\ | j. ∨ 人 Y.:!
ゝ、__,ノ \! ,' ∨ /.:.}
\ / ∨ ∠..ノ
` 一 '´ ` 一 '
人物は綺麗に出ていますが、ギターが崩れています。ここからが随分悩みまして・・・結果
, r==ー-
, -─‐ メx
/ ´⌒ Y⌒ヽ
,ィ´/-‐/,/ / /l!⌒ヽ \
// / /゙´ /∧/ / / l\ \ 〉、
' 〃 / //^/∧// l/| | ヽ`ヽ、 `ー - 、 マ=ィ=x、
j! ル'´/〃 //'⌒ ト l | Y ヘ`ヽ、\ \ マ=/ / \
/ / /レ'/ィ行ト、 ヽト、 リ 〉 ! \ヽ 、 マ=/ / ,/=マ
/∧ ヽ.r∧k| 弋ソ ィ行ト、 〃j /`ヽj、 〉ハ 〉 ノ/ /=マ
! l ∨ j{ ゙ム"" , 弋,ソ /人//!ヽ. ハハ / /><.>'=マ
ソ乂._八 (`ヽ ""/乂 ヽ.} /)イー ─ - - ─-----─ァ⌒j/></
∠\\ _´ ,... イ\.::`ヽ. ,ル'.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:〃 ,不ヽ>ーゥ
j´.:.:.:.:`\`Yヾ-x、.:.:\ヽ.:.:レ '.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.: jl/><(ヽY´
人.:.:.:.:.:.:.:.:.:`{{、}}ノノ.:ヾノヽ 、_.:. -‐―ー--――――゚、.:/></一 '
{.:.::` ー.:.:_.:.Ⅶノハヾx..:く´ \、 /></
乂.:.:.:.:.:.:.:.:.:.:.: ̄`ヽ.:))::゛::ヘ ヾ、 /></
入.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.: \():.ノ \、 ........_ /></
ヽ:.:ヽ、:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.`\ ,ィ'´ x‐。 ヽ /></
∨ヽ.:.:`.:‐.:、...:.:.:.:.:.:.:.:.:.:.:.:\i/ ゝィ /></
∨ ',.:.:.:.:.:.:.:^.:ー-.、.:.:.:.:.:.:.:.:.:\ X./></
∨j.:.:.:.:.:.:.:.:.:.:.: ():.ヽ、.:.:.:.:.:.:.:.:゙</></ ||
. ∨.:.:.:.:.:.:.: ,xr<゛ \.:.:.:.:.:.:.:.:.:X > 入_,、
, <.:∨.:.:.:,x/ `>、゚。.:.:,//⌒又 ノ
<.: /.:.:.:.:.∨:// 。 く./X ヽ.:」厶 ㍉ ィ"
/.:ヽ、.:.:.:.:ト.ィ′ (o、/><></ ゚ \ 了
. 〃//\.:.:.||j `ヽヾx´/ ゚、 。 /ゝ、 孑
∧/.:.:.:.:.:/\!!! ヽo) \ / `'
r― /.:/.:.:.:.:.:.f.:.:.:.:爪 `}
j//.:/.:.:.:.:.:.:.:ト、.:.:.:.∧ (o) (o) リ
<.: く:<:「`ヽ.:.:.:.:|.:.:ヽ|.:.:心 (o) (o) /
 ̄ l ` ー 、.:.:.!.:.:|.:|ヾト、 /
,r=x ! ヽ!.:.:!.:|.:.:.:.:.:>ー--x‐ ' ´
!{/⌒ヽ._ { l ` ー‐< ', ,ィ=.、
!l{ `', ! ∨ 'k.:.:..:)
》`¨ヘ、 ∧ l ∨ ト、ヽ|
!.:.:.:.:.〈\ | j. ∨ 人 Y.:!
ゝ、__,ノ \! ,' ∨ /.:.}
\ / ∨ ∠..ノ
` 一 '´ ` 一 '
綺麗になったでしょ。上と見比べると分かるかと思いますが、フォントのサイズが違います。パラメーターは
<span style="line-height:1.1;font-weight:normal;font-size:16px;">AA本体</span>
標準ではフォントサイズが14pxなので、2pxしか違わないんですが、それでも上記のようなズレが発生するんですね、勉強になりました。多分フォントの文字(空白含む)によって文字幅の拡大率が微妙に違うのだと思います。
みんカラ標準のスタイルシート(580px)では大きいAAは貼れませんが、その場合フォントサイズを小さくして無理矢理貼ると崩れる場合がありそうです。ただAAの使用文字によっては、崩れない、若しくは崩れ方が少ない場合もあると思います。
最後に中学生?Ver.行間を縮めただけなら崩れない見本、勿論広げるのも可。
<span style="line-height:0.7;font-weight:normal;font-size:16px;">
, r==ー-
, -─‐ メx
/ ´⌒ Y⌒ヽ
,ィ´/-‐/,/ / /l!⌒ヽ \
// / /゙´ /∧/ / / l\ \ 〉、
' 〃 / //^/∧// l/| | ヽ`ヽ、 `ー - 、 マ=ィ=x、
j! ル'´/〃 //'⌒ ト l | Y ヘ`ヽ、\ \ マ=/ / \
/ / /レ'/ィ行ト、 ヽト、 リ 〉 ! \ヽ 、 マ=/ / ,/=マ
/∧ ヽ.r∧k| 弋ソ ィ行ト、 〃j /`ヽj、 〉ハ 〉 ノ/ /=マ
! l ∨ j{ ゙ム"" , 弋,ソ /人//!ヽ. ハハ / /><.>'=マ
ソ乂._八 (`ヽ ""/乂 ヽ.} /)イー ─ - - ─-----─ァ⌒j/></
∠\\ _´ ,... イ\.::`ヽ. ,ル'.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:〃 ,不ヽ>ーゥ
j´.:.:.:.:`\`Yヾ-x、.:.:\ヽ.:.:レ '.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.: jl/><(ヽY´
人.:.:.:.:.:.:.:.:.:`{{、}}ノノ.:ヾノヽ 、_.:. -‐―ー--――――゚、.:/></一 '
{.:.::` ー.:.:_.:.Ⅶノハヾx..:く´ \、 /></
乂.:.:.:.:.:.:.:.:.:.:.: ̄`ヽ.:))::゛::ヘ ヾ、 /></
入.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.: \():.ノ \、 ........_ /></
ヽ:.:ヽ、:.:.:.:.:.:.:.:.:.:.:.:.:.:.:.`\ ,ィ'´ x‐。 ヽ /></
∨ヽ.:.:`.:‐.:、...:.:.:.:.:.:.:.:.:.:.:.:\i/ ゝィ /></
∨ ',.:.:.:.:.:.:.:^.:ー-.、.:.:.:.:.:.:.:.:.:\ X./></
∨j.:.:.:.:.:.:.:.:.:.:.: ():.ヽ、.:.:.:.:.:.:.:.:゙</></ ||
. ∨.:.:.:.:.:.:.: ,xr<゛ \.:.:.:.:.:.:.:.:.:X > 入_,、
, <.:∨.:.:.:,x/ `>、゚。.:.:,//⌒又 ノ
<.: /.:.:.:.:.∨:// 。 く./X ヽ.:」厶 ㍉ ィ"
/.:ヽ、.:.:.:.:ト.ィ′ (o、/><></ ゚ \ 了
. 〃//\.:.:.||j `ヽヾx´/ ゚、 。 /ゝ、 孑
∧/.:.:.:.:.:/\!!! ヽo) \ / `'
r― /.:/.:.:.:.:.:.f.:.:.:.:爪 `}
j//.:/.:.:.:.:.:.:.:ト、.:.:.:.∧ (o) (o) リ
<.: く:<:「`ヽ.:.:.:.:|.:.:ヽ|.:.:心 (o) (o) /
 ̄ l ` ー 、.:.:.!.:.:|.:|ヾト、 /
,r=x ! ヽ!.:.:!.:|.:.:.:.:.:>ー--x‐ ' ´
!{/⌒ヽ._ { l ` ー‐< ', ,ィ=.、
!l{ `', ! ∨ 'k.:.:..:)
》`¨ヘ、 ∧ l ∨ ト、ヽ|
!.:.:.:.:.〈\ | j. ∨ 人 Y.:!
ゝ、__,ノ \! ,' ∨ /.:.}
\ / ∨ ∠..ノ
` 一 '´ ` 一 '
別人みたい・・・それに、背は小さくなっているのに真横に伸ばした腕が短くなっていない罠・・・
ブログ一覧 | 日記
Posted at
2010/02/17 11:42:27
タグ
今、あなたにおすすめ