HTML
CSS
アスキーアート
AsciiArt
Shift_JISArt

AA(Shift-JIS Art)をずれずに表示するCSS設定&はみ出し対策

この記事はAA(Shift-JIS Art)をずれずに表示するためのCSS設定&はみ出し対策について説明します。


失敗編:改行&ズレとは?

一般的にアスキーアートはテキストであるため、そのままコピペして使えると考えるかもしれません。

例えば下のような感じに

<div>

|     |\|/ |     |   |
| ∧ ∧  |/⌒ヽ、| ∧_∧ | ∧∧ |
|(,,゚Д゚)||,,゚ Θ゚)|(; ´Д`)|(=゚ω゚)|
</div>

しかし、これだと改行コードが含まれません。表示が大きく崩れます。

Screen Shot 2018-12-18 at 2.06.23.png

ならば、今度は改行タグを記述してみます。

<div>

|     |\|/ |     |   |<br>
| ∧ ∧  |/⌒ヽ、| ∧_∧ | ∧∧ |<br>
|(,,゚Д゚)||,,゚ Θ゚)|(; ´Д`)|(=゚ω゚)|<br>
</div>

これでちゃんと改行されますが、今度は、AAの表示が崩れてしまいます。

Screen Shot 2018-12-18 at 2.08.07.png

これは、AAのほとんどがMSPゴシック準拠で作成されているからです。なのでMacや各WebブラウザだとそのフォントがないためAAがずれてしまうのです。

この記事ではこのようなAAをずらさないためのCSS設定を書きます。


ズレないCSS設定

ズレなくするために必要な設定の勘所は以下です。


  • Webフォント

  • font-size&line-height

  • はみ出し対策


Webフォントの設定

まず、AA表示に対応したWebフォントを設定しましょう。手前味噌ですが、私のサイトでAA表示対応のWebフォントを紹介しています。

https://fonts.aahub.org

例えば、Saitamaarを利用する場合はい以下のCSSを記述しましょう。これでWebフォントの読み込みはOKです。

@font-face {

font-family: "Saitamaar";
src: url("https://fonts-aahub.netlify.com/assets/fonts/Saitamaar/Saitamaar.woff2") format("woff2"),
url("https://fonts-aahub.netlify.com/assets/fonts/Saitamaar/Saitamaar.woff") format("woff"),
url("https://fonts-aahub.netlify.com/assets/fonts/Saitamaar/Saitamaar.ttf") format("ttf");
font-display: swap;
}


font-size&line-heightの設定

FontSizeとLineHeightですが、ここ結構好みもあるかもしれませんが、基本的にFontSize + 2くらいのLineHeightを設定すればよいでしょう。

.Saitamaar {

font-family: "Saitamaar";
white-space: pre;
font-size: 16px;
line-height: 18px;
}

WebフォントとCSSを設定すれば AAがズレなくなります。ひとまずOK!

Screen Shot 2018-12-18 at 2.37.06.png


番外編:改行はwhite-space:preでもOK

本記事では、改行にbrタグを利用しましたが、CSSでwhite-spaceを指定すれば、コピペしたAAをそのまま利用できます。

<div class="Saitamaar-pre">

|     |\|/ |     |   |
| ∧ ∧  |/⌒ヽ、| ∧_∧ | ∧∧ |
|(,,゚Д゚)||,,゚ Θ゚)|(; ´Д`)|(=゚ω゚)|
</div>

.Saitamaar-pre {

font-family: "Saitamaar";
white-space: pre;
font-size: 16px;
line-height: 18px;
}


はみだし対策

上記の内容でAAのズレ問題はほぼ解決します。しかし、まだAAがはみ出した時、改行されてしまうという問題があります。

例えば以下のような横に長いAAの場合、横幅の小さいスマホ等だと表示が崩れます。

<div class="Saitamaar">

  ./  ̄/  ̄   / _|__ ___|_<br>
    ―/     /   |/   /|<br>
    _/   _/     |  ._/|<br>
<br>
                                  /\___/ヽ<br>
    (.`ヽ(`> 、                        /''''''   ''''''::::::\<br>
     `'<`ゝr'フ\                   +  |(●),   、(●)、.:| +<br>
  ⊂コ二Lフ^´  ノ, /⌒)                      |   ,,ノ(、_, )ヽ、,, .::::|<br>
  ⊂l二L7_ / -ゝ-')´                  + |   `-=ニ=- ' .:::::::| +<br>
       \_  、__,.イ\           +     \   `ニニ´  .:::/    +<br>
        (T__ノ   Tヽ        , -r'⌒! ̄ `":::7ヽ.`- 、   ./|<br>
         ヽ¬.   / ノ`ー-、ヘ<1´|  ヽ | :::::::::::::ト、 \ (  ./ヽ<br>
          \l__,./       i l.ヽ! |   .| ::::::::::::::l ヽ   `7ー.、‐'´ |\-、<br>
  .__________________________  __<br>
 │二│三│四│二│三│四│二│三│四│◎│◎│◎│伍│|伍|<br>
 │萬│萬│萬│萬│萬│萬│萬│萬│萬│◎│◎│◎│萬│|萬|<br>
 └─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┴─┘└─┘<br>

</div>


PC

Screen Shot 2018-12-18 at 2.45.09.png


スマホ

Screen Shot 2018-12-18 at 2.45.19.png

この問題を解決するためにoverflow、white-spaceを設定してはみ出してもスクロールできるようにしましょう。

.Saitamaar {

font-family: "Saitamaar";
font-size: 16px;
line-height: 18px;
overflow:auto;
white-space:nowrap;
}

これでスマホでの表示もOKです。

aa.gif


まとめ

以上、ずれないCSS設定&はみ出し対策についての記事でした。もし、WebサイトでAAを使いたいときは参考にしてみてください。

ただ、今回紹介した内容はCSS設定のみで、これだけだとスマホ対応等でまだ不便なところがあります。

明日以降、画像変換などレスポンシブ対応したAAの表示方法について解説したいと思います。

それでは