PCとスマホでの表示の違いを見るテストです。このページはアスキーアート（AA）入り署名の見え方調査用なので、AAがズレていても気にしないよう願います。
末端で署名Webの表示は違う
(1)メモ帳で作った署名をHTMLで<pre> </pre>タグに挟む。
┏━━━┓
┃ ┃
┃ ╋╋━━━┫
┗┳┛┃◯ ◯┃
┃ ━━━━
┃ ┣━━━┫
┗━┫ ╋━┓
（ ○ ┃ ┃
┃ ┃ ┃
（ ○ ┃┏┻┓ ☆Osasao Kurkurton☆
┗┳━┳┛┃ ┃
┃ ┃ 【ポストマン】
┏━┻┏┻━┓ osaosa Tokyo Japan
┗━━┗━━┛ Postpet:kuro@byby,osaosa,ne,jp
◯◯◯ ◯◯◯ ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒
上の署名はブログ主のスマホとタブレット環境では、ほぼ下に近い署名の状態で表示されています。（<pre> </pre>タグを使用）
┏━━━┓
┃ ┃
┃ ╋╋━━━┫
┗┳┛┃◯ ◯┃
┃ ━━━━
┃ ┣━━━┫
┗━┫ ╋━┓
（ ○ ┃ ┃
┃ ┃ ┃
（ ○ ┃┏┻┓ ☆Osasao Kurkurton☆
┗┳━┳┛┃ ┃
┃ ┃ 【ポストマン】
┏━┻┏┻━┓ osaosa Tokyo Japan
┗━━┗━━┛ Postpet:kuro@byby,osaosa,ne,jp
◯◯◯ ◯◯◯ ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒
(2)メモ帳で作った署名(1)を、文字としてブログの作成編集で貼り付けました。行間が入り間延びしているけど、それにしてもこんなにズレが生じている。メモ帳では(1)の状態で表示されてるけど、これほどズレるのはブログの作成編集がHTMLとして特殊なんだろうと思います。（<pre> </pre>タグを不使用）
┏━━━┓
┃ ┃
┃ ╋╋━━━┫
┗┳┛┃◯ ◯┃
┃ ━━━━
┃ ┣━━━┫
┗━┫ ╋━┓
（ ○ ┃ ┃
┃ ┃ ┃
（ ○ ┃┏┻┓ ☆Osasao Kurkurton☆
┗┳━┳┛┃ ┃
┃ ┃ 【ポストマン】
┏━┻┏┻━┓ osaosa Tokyo Japan
┗━━┗━━┛ Postpet:kuro@byby,osaosa,ne,jp
◯◯◯ ◯◯◯ ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒
※PC版でWeb上で見れば、ブログ作成編集時に見えている見え方と同じ表示になっています。
(2)のソースを見ると半角スペースに半角スペースの文字コード『 』に置換されていました。確かにメモ帳で半角スペースを入れてこの署名は作成しています。
┏━━━┓<br />
┃ ┃<br />
┃ ╋╋━━━┫<br />
┗┳┛┃◯ ◯┃<br />
┃ ━━━━<br />
┃ ┣━━━┫<br />
┗━┫ ╋━┓<br />
（ ○ ┃ ┃<br />
┃ ┃ ┃<br />
（ ○ ┃┏┻┓ ☆Osasao Kurkurton☆<br />
┗┳━┳┛┃ ┃<br />
┃ ┃ 【ポストマン】<br />
┏━┻┏┻━┓ osaosa Tokyo Japan<br />
┗━━┗━━┛ Postpet:kuro@byby,osaosa,ne,jp<br />
◯◯◯ ◯◯◯ ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆<br />
〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒<br />
この にあわせて署名を作成しても、閲覧する環境のフォント種でまた違ってくるのでブログでのAAは難しいです。表示の違いを正す方法を何かご存知の方がいらしたらどうぞご教授願います。
それでもどの環境でも表示がズレない署名もあるので、そういった署名を作るようにするのが良いのかなとも思いますが、この署名はあくまでもTXTベースのメールなどの末尾に記すものなのでそこまで配慮する必要があるのかなという気もします。
(3)(2) をブログの作成でコピーしたものを、見かけを修正した状態。つまり(2)にスペースを入れて修正しました。
┏━━━┓
┃ ┃
┃ ╋╋━━━┫
┗┳┛┃◯ ◯┃
┃ ━━━━
┃ ┣━━━┫
┗━┫ ╋━┓
（ ○ ┃ ┃
┃ ┃ ┃
（ ○ ┃┏┻┓ ☆Osasao Kurkurton☆
┗┳━┳┛┃ ┃
┃ ┃ 【ポストマン】
┏━┻┏┻━┓ osaosa Tokyo Japan
┗━━┗━━┛ Postpet:kuro@byby,osaosa,ne,jp
◯◯◯ ◯◯◯ ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒
ブログの作成編集で間延びはしていますが、(1)の間延び版なだけで、作成編集中でズレは全く感じられません。間延び以外は完璧です。
しかし、パソコンでネットで見れば、(2)とも違う微妙なずれです。
(4)(3)をコピーしメモ帳に張り付けたものをHTML編集で、<pre> </pre>タグで挟みました。メモ帳で表示されていた通りに表示されています。高さを修正すればこんなズレのAAとなってしまいました。
┏━━━┓
┃ ┃
┃ ╋╋━━━┫
┗┳┛┃◯ ◯┃
┃ ━━━━
┃ ┣━━━┫
┗━┫ ╋━┓
（ ○ ┃ ┃
┃ ┃ ┃
（ ○ ┃┏┻┓ ☆Osasao Kurkurton☆
┗┳━┳┛┃ ┃
┃ ┃ 【ポストマン】
┏━┻┏┻━┓ osaosa Tokyo Japan
┗━━┗━━┛ Postpet:kuro@byby,osaosa,ne,jp
◯◯◯ ◯◯◯ ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒
以上のことから、ブログでアスキーアート（AA）を編集しても、それは見かけだけAA風に見えているだけで、テキスト的にはメモ帳という媒介を経ても、AA的には崩れています。
(5) (4)を<pre> </pre>タグに挟まれたまま修正してみました。
┏━━━┓
┃ ┃
┃ ╋╋━━━┫
┗┳┛┃◯ ◯┃
┃ ━━━━
┃ ┣━━━┫
┗━┫ ╋━┓
（ ○ ┃ ┃
┃ ┃ ┃
（ ○ ┃┏┻┓ ☆Osasao Kurkurton☆
┗┳━┳┛┃ ┃
┃ ┃ 【ポストマン】
┏━┻┏┻━┓ osaosa Tokyo Japan
┗━━┗━━┛ Postpet:kuro@byby,osaosa,ne,jp
◯◯◯ ◯◯◯ ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒
当然ですがこれは(1)と同じです。
(2)のソース一部
┏━━━┓<br />
┃ ┃<br />
┃ ╋╋━━━┫<br />
┗┳┛┃◯ ◯┃<br />
┃ ━━━━<br />
(2)のソースで先頭行の「 ┏」で、「 」の間にあるスペースのような間が空いているのは何だろう。
元のまま
A:「 ┏」⇒「 ┏」
スペース削除
B:「 ┏」⇒⇒「 ┏」
スペース削除 <pre> </pre>タグを使用。
C:「 ┏」⇒⇒「 ┏」
結果的にはBとCは同じ幅で表示され増し。Aは余分なスペース分で広くなっています。
(2)のソースからスペースのようなものを取り除いた状態。
┏━━━┓
┃ ┃
┃ ╋╋━━━┫
┗┳┛┃◯ ◯┃
┃ ━━━━
┃ ┣━━━┫
┗━┫ ╋━┓
（ ○ ┃ ┃
┃ ┃ ┃
（ ○ ┃┏┻┓ ☆OsasaoKurkurton☆
┗┳━┳┛┃ ┃
┃ ┃ 【ポストマン】
┏━┻┏┻━┓ osaosaTokyoJapan
┗━━┗━━┛ Postpet:kuro@byby,osaosa,ne,jp
◯◯◯◯◯◯☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒
HTML編集で貼り付けてみました。いやはや、どんどん不可思議な、これはもう一種芸術的ですw
┏━━━┓
┃ ┃
┃ ╋╋━━━┫
┗┳┛┃◯ ◯┃
┃ ━━━━
┃ ┣━━━┫
┗━┫ ╋━┓
（ ○ ┃ ┃
┃ ┃ ┃
（ ○ ┃┏┻┓ ☆OsasaoKurkurton☆
┗┳━┳┛┃ ┃
┃ ┃ 【ポストマン】
┏━┻┏┻━┓ osaosaTokyoJapan
┗━━┗━━┛ Postpet:kuro@byby,osaosa,ne,jp
◯◯◯◯◯◯☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒
これは上のソースです。「 」の間にあったスペースはもうありません。
┏━━━┓<br />
┃ ┃<br />
┃ ╋╋━━━┫<br />
┗┳┛┃◯ ◯┃<br />
┃ ━━━━<br />
┃ ┣━━━┫<br />
┗━┫ ╋━┓<br />
（ ○ ┃ ┃<br />
┃ ┃ ┃<br />
（ ○ ┃┏┻┓ ☆OsasaoKurkurton☆<br />
┗┳━┳┛┃ ┃<br />
┃ ┃ 【ポストマン】<br />
┏━┻┏┻━┓ osaosaTokyoJapan<br />
┗━━┗━━┛ Postpet:kuro@byby,osaosa,ne,jp<br />
◯◯◯◯◯◯☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆<br />
〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒<br />
<pre> </pre>囲いにしてみました。
┏━━━┓
┃ ┃
┃ ╋╋━━━┫
┗┳┛┃◯ ◯┃
┃ ━━━━
┃ ┣━━━┫
┗━┫ ╋━┓
（ ○ ┃ ┃
┃ ┃ ┃
（ ○ ┃┏┻┓ ☆OsasaoKurkurton☆
┗┳━┳┛┃ ┃
┃ ┃ 【ポストマン】
┏━┻┏┻━┓ osaosaTokyoJapan
┗━━┗━━┛ Postpet:kuro@byby,osaosa,ne,jp
◯◯◯◯◯◯☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒〒
これらからブログでAAするヒントはなにかありませんでしょうかね。
(2)のソースからスペースのようなものを取り除いた状態の頭の部分の中のスペースは全角スペースのようです。全角スペースは崩れていないので空白個所は全角スペースで署名を作るのが良いのかなとも思いますが、それでも半角記号なども使うので混在すると表示がズレる可能性があります。
┏━━━┓
┃ ┃
メモ帳でスペースを全角で作成してみました。使用する記号も全角のみです。メモ帳で作成しコピペで作成編集で貼り付けます。少し表示にゆがみがあります。
┏━━━┓
┃ ┃
┃ ╋╋━━━┫
┗┳┛┃◯ ◯┃
┃ ━━━━
┃ ┣━━━┫
┗━┫ ╋━┓
（ ○ ┃ ┃
とりあえず腹部の「（」と「○」は排除して<pre> </pre>囲いにしてみました。
┏━━━┓ ┃ ┃ ┃ ╋╋━━━┫ ┗┳┛┃◯ ◯┃ ┃ ━━━━ ┃ ┣━━━┫ ┗━┫ ╋━┓ ┃ ┃ ┃ ┃ ┃ ┃ ┗┳━┳┛ ┃ ┃ 【ポストマン】 ┏━┻┏┻━┓ osaosa Tokyo Japan ┗━━┗━━┛ ┏━┓ ┃ ┃ ┗━┛
✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄
スマホとタブレット
上のAAでタブレット Android 7.0 Chrome73.0で表示が崩れななくなりました。スマホなどのAndroid OS でAAが崩れないするには、全角フォントを用いてAAを作ればよかったようです。
念のためにとスマホでも閲覧してみました。下の画像がスクリーンショット画像です。激しくズレまくっていますね (/ДT)
左画像はスマートフォンAndroid 6.0 Chrome73.0 で閲覧したものです。
Android 7.0 でAAが崩れないするには、全角フォントを用いてAAを作ればよかったのですが、その努力もスマートフォン Android 6.0 の前には足蹴にされてしまいました (´▽｀;)
これはChromeのせいではありません。クロームはHTMLで指定しているか、そうでなければその機種内にある標準として使われるフォントで表示しているに過ぎません。
Android 7.0 では四角い升もちゃんと四角く表示されていましたが、Android 6.0 ではその升も表示が崩れていますがこれはタブレットとスマホのメーカーが違うことによる使用するフォントが違っているからでしょう。
タブレットはワールドワイドなメーカータブですから日本向けにはパソコンと同じような表示のできるフォントをインストールして販売しているはずです。
今回のスマホの方は、純国産と言っても国内で作っているかどうかは分かりませんが国産メーカースマホですから、Windows系からの束縛を離れ自由にフォントをチョイスしたものをインストールしているのでしょう。その結果がスマホでTXTが乱れるということだと思います。
以上のことはブログ主は技術者でもなんでもなく経験上の想定で書いているだけなので、信憑性には乏しいところがあると思いますので鵜呑みにしないようご注意願います。
✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄
等角フォントとプロポーショナルフォント
参考までに全角フォントでは「ＷⅠＮ」ＷもⅠもＮもと同じ幅ですが、プロポーショナルフォントの「WIN」では一つ一つのフォントの文字幅が同じではないのです。
「ＷⅠＮ」・・・全角フォント
「WIN」・・・プロポーショナルフォント
上のようにするとその違いが分かりますね。
これらフォント種の違いを組み合わせることでAAことアスキーアートは表現力が豊かになるのですが、PC/AT互換機（パソコンなど）とAndroid OS間での見え方が違うという問題も発生します。
PC/AT互換機でありながらブラウザの問題でTXT（テキスト）が正しく表示できないのは、そのブラウザが少しおバカ系なのかもです。いやこれ嘘じゃなくフォントの話ｗ
おバカ系とは言い過ぎましたけど、WebでTXTを意図したとおりに表示するなんてことは、最早古い技術としてサポートすることを無視しているのだろうと思います。昔のレコード盤を再生することが難しいのと同じような問題なのかもしれません。
お利巧ブラウザでもスマホでは機種によって使用しているフォントが違うためにTXTが崩れているのではないかと考えているのは先に記したとおりです。
なので末端によって見え方を統一することはAAでは不可能だと考えます。けっきょくはAAを画像で掲載するのが一番という結果が出てしまいましたけどしばらくは現状のままブログを続けて行こうと思います。
✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄✄
今回はこれまでにしますが、今後もパソコンとスマホでのＡＡの共通性を模索していきたいと思います。
 |
| Amazon メイドインアビス ナナチ |
(∵)署名Web ブログ版
誤字脱字は後日修正
誤字脱字は後日修正
✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂✂
0 件のコメント:
コメントを投稿
他の方を中傷するような記述は避けてください。