2019年10月25日(金)
iPhone Safari (iOS 13)で罫線が崩れた #■パソコン・通信 ブラウザの仕様変更は、予告無しで行われるので、気づくのに遅れる場合があり、ご了承願いたい。
等幅フォントと全角文字という概念は、英語圏文化には無い。特にSafariは悪い。iOSのバージョンアップ(12→13)に伴い、ブラウザSafariで、今まで全角扱いで表示されていた罫線が、半角扱いになっている。今日、iOS
13.1.3になったけど、同じ。
┌┬─┐
││ │…修正済み
└┴─┘
https://neconote.jp/prg/keisen.html つまり、全角文字を使った絵が崩れてしまった。
結論から言うと下記の通り。
①
style="font-family:monospace;"
では、罫線は半角扱い。自動的に行間は狭まるが、罫線が上下くっ付かず中途半端。
②
<pre></pre>
も①に同じ。
つまり、safari(iOS)では、style="font-family:monospace;"も<pre></pre>も、使用に値しなくなった。
文字絵を描く場合は、行間だけを指定して、全角文字で左詰めで描くしかない。等幅フォントの指定無しなので、全角文字でも組み合わせによりプロポーショナルが発生して多少ずれる可能性がある。
--
<p
style="line-height:1em;"></p>
--
このブラウザ仕様の変更により、全角半角混在の文字絵がほぼ不可能になった。２つほど手段が無いことは無いのだが、逆に副作用がありそうなので、やめておこう。
『子猫の手』でstyle="font-family:monospace;"を廃止して、ガレコレHPで地図などに利用している絵文字を<pre></pre>から<p></p>に変更して、少し面倒になるが、改行<br>を加えた。
style="line-height:1em;"の親から子への継承も今までと異なる。子でフォントサイズを変更した際には、伴って子で改めて設定する必要がある。『子猫の手』では、看板と見出しで、フォントサイズを大きくしているので、改めて
line-height:1em;
の追加が必要となった。追加しないと、親のbodyで設定した1em(12pt)で改行されることになる。
--
body
{
margin-left
:0px;
margin-right:0px;
font-size
:12pt;
line-height
:1em;
word-wrap
:break-word;
background
:#111111;
color
:#ffffff;
}
.sign
{
padding:4px
0px;
text-align:center;
font-size:24pt;
font-weight:bold;
line-height:1em;
color:#ff0040;
}
.headline
{
padding:4px
0px;
font-size:18pt;
line-height:1em;
color:#ff0040;
}
--
お問い合わせ