Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

この記事は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の表示方法について解説したいと思います。
それでは

scrpgil
NEC→キネカのテックリード。 IonicとGoが得意分野です。 TechFeed ProでIonicのexpertです。 趣味はアスキーアート関連ツールの開発。 Ionic / Stencil / Vim / NEM / Go / Beego / Huel / Beer AAHub運営&開発
https://aahub.org
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away