2019年11月25日(月)
文字絵（文字地図）の作成（疑似等幅フォント） #■パソコン・通信※完璧と言える仕様ができました。粘り勝ち。
自分は、ちょっとした案内地図は、文字を組み合わせて描いています。言わゆる文字絵（文字地図）です。
しかし、iPhone(iOS10～iOS12)のSafariできちんと表示される文字地図が、iPhone(iOS13)のSafariでは、崩れてしまいました。主な原因は、表示フォントの一部の文字が、全角から半角へ、勝手に変更されたためです。
検証の末、<pre></pre>も、style="font-family:monospace;"も、フォント指定も、無意味になってしまったと判断しました。
この環境が、今後も継続されるのかは不明ですが、対応せざるを得ません。地道に文字地図の作成作業を繰り返して、ついに仕様が整いましたのでご報告します。
１．<pre></pre>を、利用しません。
２．body（ページ全体）には、font-family:monospace;およびフォントを指定しません。
３．文字を下記のように分類して、それぞれにあった処理をします。
文字
├全角
│ ├等幅→５章
│ ├幅狭→６章（IB化）
│ └幅広→７章（IB化…重なり配慮）
│
└半角
├半角スペース→８章（IB化）
└半角一般→９章（IB化＋MS化）
IB化：inline-block化
MS化：monospace化
先に、今回の集大成ともいえるCSSを提示しておきます。勝手にご利用頂いても構いません。むしろ、試してみて、いろいろとアイデアを頂ければ幸いです。フォントサイズの単位にCSS3のremを使用せずptを使用しているのは、古いブラウザの為なので、あしからず。
--
抜粋
--
<head>
<style>
body
{
font-size:12pt;
line-height:1em;
}
.adjust
{
-webkit-text-size-adjust:100%;
margin:12pt
0pt;
}
.full
{
display:inline-block;
font-size:12pt;
line-height:1em;
width:1em;
text-align:center;
}
.nbsp
{
display:inline-block;
font-size:12pt;
line-height:1em;
width:0.5em;
}
.half
{
display:inline-block;
font-family:monospace;
font-size:10pt;
line-height:1em;
width:6pt;
text-align:center;
}
</style>
</head>
<body>
<div
class="adjust">
【全角等幅】│■│<br>
┌─┐<br>
│■│<br>
└─┘
</div>
<div
class="adjust">
【全角幅狭】│∴│<br>
┌─┐<br>
│<div
class="full">∴</div>│<br>
└─┘
</div>
<div
class="adjust">
【半角スペース】│
中
│<br>
┌──┐<br>
│<div
class="nbsp"> </div>中<div
class="nbsp"> </div>│<br>
└──┘
</div>
<div
class="adjust">
【半角一般】│km│<br>
┌─┐<br>
│<div
class="half">k</div><div
class="half">m</div>│<br>
└─┘
</div>
</body>
--
４．iPhoneにおいて横向きでレイアウトが崩れます。
iPhoneでは、iOS13に限らず、横向きにすると、文字が大きく表示されます。しかし、インラインブロックにした文字は、そのままの大きさで小さく表示されます。どうやっても、文字が大きくなりませんでした。
逆転の発想で、文字絵（文字地図）全体を、style="-webkit-text-size-adjust:100%;"で指定して、そのままの大きさで表示することにしました。文字地図では、横向き表示で、文字が大きくなる必要はありません。
<div
style="-webkit-text-size-adjust:100%;">
※ここに、文字絵（文字地図）を描きます。
</div>
また、偶然ですが、テーブルタグ内では、そのままの大きさで表示することも分かりました。表では、文字が小さい方が、表全体が見えて便利なので、そのような仕様なのでしょう。
<table><tr><td>
※ここに、文字絵（文字地図）を描きます。
</td></tr></table>
５．基本的に、等幅の全角文字で、文字絵を作成します。
罫線をはじめ、下記の文字が利用できます。一部の新しい罫線素片に不具合がありますが、それらを使わなくても構わないでしょう。子猫の手Ver.3用に地図文字パレットを作成するにあたり整理してみました。
┌┬┰─┐┏┳┯━┓￣＿
├┼╂─┤┣╋┿━┫⌒～
┝┿╋┯┥┠╂┼┬┨／＼
││┃⏆│┃┃⏀⏃┃＝‖
└┴┸┴┘┗┻┷┷┛〓
┄┄┄┄ ┈┈┈┈ ╌╌╌╌
┅┅┅┅ ┉┉┉┉ ╍╍╍╍
┆┇ ┊┋ ╎╏DOUBLE
DASH
┆┇ ┊┋ ╎╏iPhoneで不具合
┆┇ ┊┋ ╎╏
┆┇ ┊┋ ╎╏
╭┳━╮
╞╪═╡
╰┻━╯
╷ ╻ ╿
╶ ╴╺ ╸╾ ╼ ←この行の罫線素片
╵ ╹ ╽ iPhoneで不具合
┍ ┑┎ ┒
┕ ┙┖ ┚
┞ ┮ ┧ ┵ これ以下の罫線素片
Windowsで線の太さが不正確
┟ ┭ ┦ ┶ 文字サイズ、表示倍率に依存
┡ ┲ ┪ ┹
┢ ┱ ┩ ┺
╀ ┾ ╁ ┽
╄ ╆ ╅ ╃
╊ ╈ ╉ ╇
↖↑↗⤴ ⇧ △ ▲ ：
←⇅→⇄⇦ ⇨◁ ▷◀ ▶‥・‥
↙↓↘⤵⏎⇩ ▽ ▼ ：
○◎□◇☆♤♢♡♧☀☁☂☃
●＠■◆★♠♦♥♣
＋－＊※・‥…：；†‡
（）｛｝［］【】＜＞「」『』
￥＄！？％＆＃♪㎞㎡㎥㎏ℓ㎐℃㍱
㈪㈫㈬㈭㈮㈯㈰㈷㈱㈲☎℡℻№
〶〒〠文幼小中大専㉆高役警消裁卍寺神
♨温灯電工食飛港駅バ山海丘川、。，．
０１２３４５６７８９
⓪①②③④⑤⑥⑦⑧⑨⑩
⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳
㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚
㉛㉜㉝㉞㉟㊱㊲㊳㊴㊵
㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿
⓿❶❷❸❹❺❻❼❽❾❿
⓫⓬⓭⓮⓯⓰⓱⓲⓳⓴
㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉
ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫ
ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹⅺⅻ
ＡＢＣＤＥＦＧＨＩＪＫＬＭ
ＺＹＸＷＶＵＴＳＲＱＰＯＮ
ａｂｃｄｅｆｇｈｉｊｋｌｍ
ｚｙｘｗｖｕｔｓｒｑｐｏｎ
ⒶⒷⒸⒹⒺⒻⒼⒽⒾⒿⓀⓁⓂ
ⓏⓎⓍⓌⓋⓊⓉⓈⓇⓆⓅⓄⓃ
ⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜ
ⓩⓨⓧⓦⓥⓤⓣⓢⓡⓠⓟⓞⓝ
㋐㋑㋒㋓㋔
㋕㋖㋗㋘㋙
㋚㋛㋜㋝㋞
㋟㋠㋡㋢㋣
㋤㋥㋦㋧㋨
㋩㋪㋫㋬㋭
㋮㋯㋰㋱㋲
㋳ ㋴ ㋵
㋶㋷㋸㋹㋺
㋻㋼ ㋽㋾
Unicode
5.2.0
(August
2009)の一部は、iPhoneで表示できません。コミュニティに質問したところ、表示できないと分かりました。iOSは、何ていい加減な仕様なんだろう。まだ、Windowsの方がマシと、気づきました。
⛔
U+26D4
進入禁止（表示可能）
⛣
U+26E3
官公署
⛨
U+26E8
病院
⛩
U+26E9
神社（表示可能）
⛪
U+26EA
教会（表示可能）
⛫
U+26EB
城跡
⛬
U+26EC
史跡・名勝・天然記念物
⛭
U+26ED
工場
⛮
U+26EE
発電所など
⛯
U+26EF
灯台
⛺
U+26FA
テント［キャンプ場］（表示可能）
⛻
U+26FB
銀行
⛼
U+26FC
墓地
⛽
U+26FD
給油所（表示可能）
⛾
U+26FE
コーヒーカップ［カフェ］
⛿
U+26FF
自衛隊
⭖
U+2B56
都道府県庁
⭗
U+2B57
市役所
⭘
U+2B58
町村役場
⭙
U+2B59
警察署
https://ja.wikipedia.org/wiki/ARIB%E5%A4%96%E5%AD%97６．全角文字は、プロポーショナルフォントなので、日本語でも組み合わせ次第で、文字間が詰まります。
┌─────────┐
│ドライブインなぎさ│←iPhoneで少し凹。
└─────────┘
下記のように、インラインブロックとして、文字列の幅を文字分にすると揃います。昔からあるやり方です。
<div
style="display:inline-block;
width:9em;">ドライブインなぎさ</div>
インラインコンテンツである<span></span>は、以前は、幅や高さが指定できませんでした。しかし、今は、display:inline-block;を記述すれば幅と高さの指定ができて、そのままでも幅の指定が可能なようです。
<span
style="width:9em;">ドライブインなぎさ</span>
幅狭の１文字の場合、中央揃えを指定しておくと、もっと良くなります。
<div
style="display:inline-block;
width:1em;
text-align:center;">∴</div>
７．幅広の文字を含む文字列の場合、次の文字と重なることがありますので、考慮して幅を指定して下さい。
┌─┐
│🚩│←Windows、iOS共に少し凸。
└─┘
８．半角スペースは特別扱いができて、下記の記述で全角1/2になります。 は、無くてもいいのですが、コピー＆ペーストのことを考えると、入れておいた方が無難でしょう。
<div
style="display:inline-block;
width:0.5em;"> </div>
９．半角文字は、font-famiry:monospace;を指定して、等幅フォントにします。フォントサイズは、親コンテンツが12ptのところ、10ptに小さくします。下記の式が成り立っています。
全角12pt
1文字の幅
＞
monospace半角10pt
2文字の幅
１０．文字列を縦書きにする
style="writing-mode:vertical-rl;"
は、なるべく使いません。文字の高さが少し大きくなるため、行間ができてしまいます。heightで調整できますが、あまりお勧めしません。ちなみに、イコール［＝］を縦書きにしたときに、フォントサイズ12pt(16px)のものが、height:13px;で文字の高さが揃いましたが、文字は下方にずれました。
１１．『子猫の手』の入力作業ページにおいて、<input>と<textarea></textarea>に上位コンテンツの文字スタイルを継承させてみました。実値でも構いません。そのままでは、等幅フォントになってしまうんです。ブラウザの初期設定値に違和感を抱かないのかと、呆れます。
--
抜粋
--
<style>
input,
textarea
{
font-family:inherit;
line-height:inherit;
}
</style>
--
P.S.
地図３ページを、上記の仕様でリニューアルしましたので、ご参照下さい。
【地図】ガレコレ＆海辺の自然学校
https://neconote.jp/index.php?page=304【地図】加領郷小学校
https://neconote.jp/index.php?page=307ゆずFeS：実生のゆず狩り体験
https://neconote.jp/index.php?page=326P.S.2
今年9月にリリースされたiOS13はバグだらけで、勝手に悪変されて、本当に困っています。Windowsも酷いけど、iOSもいい加減に作っているんだなあと実感しています。ガレコレのお客さんのiPhoneユーザには、iOSをバージョンアップせず、しばらくiOS12で使っていてと呼びかけています。
--
「バグだらけ」iOS
13をアップルが反省、iOS
14で開発方法を変更か
Kiyoshi
Tane
2019年11月22日,
午後02:30
in
Apple
https://japanese.engadget.com/2019/11/22/ios-13-ios-14/--
P.S.2-2
iOS13サポートのiPhoneは下記の通りです。
【iOS13サポート対象】
・iPhone
11
・iPhone
11
Pro
・iPhone
11
Pro
Max
・iPhone
XS
・iPhone
XS
Max
・iPhone
XR
・iPhone
8
・iPhone
8
Plus
・iPhone
7
・iPhone
7
Plus
・iPhone
6s
・iPhone
6s
Plus
・iPhone
SE
※執筆開始時点で13.2.3。自分のiPhoneXは12月14日に13.3にアップデート。罫線素片の不具合、Unicode
5.2.0の完全対応は、もちろんそのままです。まあ、それどころじゃないんでしょうね。
【iOS13サポート対象外】
・iPhone
6
・iPhone
6
Plus
・iPhone
5s
※現時点でiOS12.4.3が最新版。
P.S.2-3
我が古機iPhone
5cは、iOS10.3.3止まり。iPhone
5sにしておくんだったなあとの思いから、現機はiPhone
XS
Maxにしております。それにしても、iPhone
SEはiOS13サポート対象とは凄いですね。
P.S.2-4
iOSにおけるUnicode爆弾文字列も酷かったですよね。あまりにも恐ろしいバグなので、ブログにも掲載できず、ただただ大人しくしていました。雉も鳴かずば撃たれまいにですから。
お問い合わせ