ガレコレ
Garage Collection


ニュース
ガレコレ店舗
19:00~20:30
練習後はお雑煮を食べましょう。
 
ガレコレ店舗
19:00~20:30
練習後はカレーライスを食べましょう🍛
 
次回は、12月19日(木)@ガレコレ店舗です。

◆火曜日:ガレコレ店舗
◆木曜日:ガレコレ店舗
◆土曜日:加領郷小学校体育館

練習時間は、19時~20時半です。

2019年12月
┌──┬──┬──┬──┬──┬──┬──┐
│ 日│ 月│ 火│ 水│ 木│ 金│ 土│
├──┼──┼──┼──┼──┼──┼──┤
│ 1│ 2│ 3│ 4│ 5│ 6│ 7│
│  │  │ 画│  │ 画│  │ 画│
├──┼──┼──┼──┼──┼──┼──┤
│­­ 8│ 9│10│11│12│13│14│
│  │  │ 画│  │ 画│  │ 画│
├──┼──┼──┼──┼──┼──┼──┤
│15│16│17│18│19│20│21│
│  │  │ 忘│  │ 画│  │ 学│
├──┼──┼──┼──┼──┼──┼──┤
│22│23│24│25│26│27│28│
│  │  │ 画│  │ 画│  │ や│
├──┼──┼──┼──┼──┼──┼──┤
│29│30│31│  │  │  │  │
│  │  │ や│  │  │  │  │
└──┴──┴──┴──┴──┴──┴──┘

画:ガレコレ店舗
学:加領郷小学校体育館
や:休み
忘:忘年会

※公開練習の予定は、このブログでご確認下さい。

ご興味のある方は、お寄り下さい。
合気道流派、格闘技経験を問いません。
見学や体験は無料、お気軽にどうぞ。

https://neconote.jp/index.php?page=7#line1
 
【日時】12月17日(火)19:00~
【場所】ガレコレ
【会費】3,000円

参加希望の方は、15日(日)までにお知らせ下さい。

なお、当日の練習はありません。
 
本日関連のブログ
 岩瀬@ガレコレが、中芸ピカラのWi-Fiなどのセッティングにお伺いしますので、よろしくお願いします。
 
※完璧と言える仕様ができました。粘り勝ち。


 自分は、ちょっとした案内地図は、文字を組み合わせて描いています。言わゆる文字絵(文字地図)です。

 しかし、iPhone(iOS10~iOS12)のSafariできちんと表示される文字地図が、iPhone(iOS13)のSafariでは、崩れてしまいました。主な原因は、表示フォントの一部の文字が、全角から半角へ、勝手に変更されたためです。

 検証の末、<pre></pre>も、style="font-family:monospace;"も、フォント指定も、無意味になってしまったと判断しました。

 この環境が、今後も継続されるのかは不明ですが、対応せざるを得ません。地道に文字地図の作成作業を繰り返して、ついに仕様が整いましたのでご報告します。



1.<pre></pre>を、利用しません。



2.body(ページ全体)には、font-family:monospace;およびフォントを指定しません。



3.文字を下記のように分類して、それぞれにあった処理をします。

文字
 ├全角
 │ ├等幅→5章
 │ ├幅狭→6章(IB化)
 │ └幅広→7章(IB化…重なり配慮)
 │ 
 └半角
   ├半角スペース→8章(IB化)
   └半角一般→9章(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">&nbsp;</div>中<div
 
class="nbsp">&nbsp;</div>│<br>
└──┘
</div>


<div
 
class="adjust">
【半角一般】│km│<br>
┌─┐<br>
│<div
 
class="half">k</div><div
 
class="half">m</div>│<br>
└─┘
</div>

</body>
--



4.iPhoneにおいて横向きでレイアウトが崩れます。

 iPhoneでは、iOS13に限らず、横向きにすると、文字が大きく表示されます。しかし、インラインブロックにした文字は、そのままの大きさで小さく表示されます。どうやっても、文字が大きくなりませんでした。

 逆転の発想で、文字絵(文字地図)全体を、style="-webkit-text-size-adjust:100%;"で指定して、そのままの大きさで表示することにしました。文字地図では、横向き表示で、文字が大きくなる必要はありません。

<div
 
style="-webkit-text-size-adjust:100%;">
※ここに、文字絵(文字地図)を描きます。
</div>

 また、偶然ですが、テーブルタグ内では、そのままの大きさで表示することも分かりました。表では、文字が小さい方が、表全体が見えて便利なので、そのような仕様なのでしょう。

<table><tr><td>
※ここに、文字絵(文字地図)を描きます。
</td></tr></table>



5.基本的に、等幅の全角文字で、文字絵を作成します。

 罫線をはじめ、下記の文字が利用できます。一部の新しい罫線素片に不具合がありますが、それらを使わなくても構わないでしょう。子猫の手Ver.3用に地図文字パレットを作成するにあたり整理してみました。

┌┬┰─┐┏┳┯━┓ ̄_
├┼╂─┤┣╋┿━┫⌒~
┝┿╋┯┥┠╂┼┬┨/\
││┃⏆│┃┃⏀⏃┃=‖
└┴┸┴┘┗┻┷┷┛〓
┄┄┄┄ ┈┈┈┈ ╌╌╌╌
┅┅┅┅ ┉┉┉┉ ╍╍╍╍
┆┇   ┊┋   ╎╏DOUBLE
 
DASH
┆┇   ┊┋   ╎╏iPhoneで不具合
┆┇   ┊┋   ╎╏
┆┇   ┊┋   ╎╏
╭┳━╮
╞╪═╡
╰┻━╯
 ╷  ╻  ╿
╶ ╴╺ ╸╾ ╼ ←この行の罫線素片
 ╵  ╹  ╽   iPhoneで不具合
┍ ┑┎ ┒ 

┕ ┙┖ ┚

┞ ┮ ┧ ┵ これ以下の罫線素片
        Windowsで線の太さが不正確
┟ ┭ ┦ ┶ 文字サイズ、表示倍率に依存

┡ ┲ ┪ ┹ 

┢ ┱ ┩ ┺

╀ ┾ ╁ ┽

╄ ╆ ╅ ╃

╊ ╈ ╉ ╇

↖↑↗⤴ ⇧  △  ▲  :
←⇅→⇄⇦ ⇨◁ ▷◀ ▶‥・‥
↙↓↘⤵⏎⇩  ▽  ▼  :
○◎□◇☆♤♢♡♧☀☁☂☃
●@■◆★♠♦♥♣
+-*※・‥…:;†‡
(){}[]【】<>「」『』
¥$!?%&#♪㎞㎡㎥㎏ℓ㎐℃㍱
㈪㈫㈬㈭㈮㈯㈰㈷㈱㈲☎℡℻№
〶〒〠文幼小中大専㉆高役警消裁卍寺神
♨温灯電工食飛港駅バ山海丘川、。,.
0123456789
⓪①②③④⑤⑥⑦⑧⑨⑩
 ⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳
 ㉑㉒㉓㉔㉕㉖㉗㉘㉙㉚
 ㉛㉜㉝㉞㉟㊱㊲㊳㊴㊵
 ㊶㊷㊸㊹㊺㊻㊼㊽㊾㊿
⓿❶❷❸❹❺❻❼❽❾❿
 ⓫⓬⓭⓮⓯⓰⓱⓲⓳⓴
 ㊀㊁㊂㊃㊄㊅㊆㊇㊈㊉
 ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫ
 ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹⅺⅻ
ABCDEFGHIJKLM
ZYXWVUTSRQPON
abcdefghijklm
zyxwvutsrqpon
ⒶⒷⒸⒹⒺⒻⒼⒽⒾⒿⓀⓁⓂ
ⓏⓎⓍⓌⓋⓊⓉⓈⓇⓆⓅⓄⓃ
ⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜ
ⓩⓨⓧⓦⓥⓤⓣⓢⓡⓠⓟⓞⓝ
㋐㋑㋒㋓㋔
㋕㋖㋗㋘㋙
㋚㋛㋜㋝㋞
㋟㋠㋡㋢㋣
㋤㋥㋦㋧㋨
㋩㋪㋫㋬㋭
㋮㋯㋰㋱㋲
㋳ ㋴ ㋵
㋶㋷㋸㋹㋺
㋻㋼ ㋽㋾

 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



6.全角文字は、プロポーショナルフォントなので、日本語でも組み合わせ次第で、文字間が詰まります。

┌─────────┐
│ドライブインなぎさ│←iPhoneで少し凹。
└─────────┘

 下記のように、インラインブロックとして、文字列の幅を文字分にすると揃います。昔からあるやり方です。

<div
 
style="display:inline-block;
 
width:9em;">ドライブインなぎさ</div>

 インラインコンテンツである<span></span>は、以前は、幅や高さが指定できませんでした。しかし、今は、display:inline-block;を記述すれば幅と高さの指定ができて、そのままでも幅の指定が可能なようです。

<span
 
style="width:9em;">ドライブインなぎさ</span>

 幅狭の1文字の場合、中央揃えを指定しておくと、もっと良くなります。

<div
 
style="display:inline-block;
 
width:1em;
 
text-align:center;">∴</div>



7.幅広の文字を含む文字列の場合、次の文字と重なることがありますので、考慮して幅を指定して下さい。

┌─┐
│🚩│←Windows、iOS共に少し凸。
└─┘


8.半角スペースは特別扱いができて、下記の記述で全角1/2になります。&nbsp;は、無くてもいいのですが、コピー&ペーストのことを考えると、入れておいた方が無難でしょう。

<div
 
style="display:inline-block;
 
width:0.5em;">&nbsp;</div>



9.半角文字は、font-famiry:monospace;を指定して、等幅フォントにします。フォントサイズは、親コンテンツが12ptのところ、10ptに小さくします。下記の式が成り立っています。

全角12pt
 
1文字の幅
 
 
monospace半角10pt
 
2文字の幅



10.文字列を縦書きにする
 
style="writing-mode:vertical-rl;"
 
は、なるべく使いません。文字の高さが少し大きくなるため、行間ができてしまいます。heightで調整できますが、あまりお勧めしません。ちなみに、イコール[=]を縦書きにしたときに、フォントサイズ12pt(16px)のものが、height:13px;で文字の高さが揃いましたが、文字は下方にずれました。



11.『子猫の手』の入力作業ページにおいて、<input>と<textarea></textarea>に上位コンテンツの文字スタイルを継承させてみました。実値でも構いません。そのままでは、等幅フォントになってしまうんです。ブラウザの初期設定値に違和感を抱かないのかと、呆れます。

--
 
抜粋
 
--
<style>
input,
 
textarea
 
{
 
 
font-family:inherit;
 
 
line-height:inherit;
}
</style>
--



P.S.
 
地図3ページを、上記の仕様でリニューアルしましたので、ご参照下さい。
【地図】ガレコレ&海辺の自然学校
https://neconote.jp/index.php?page=304

【地図】加領郷小学校
https://neconote.jp/index.php?page=307

ゆずFeS:実生のゆず狩り体験
https://neconote.jp/index.php?page=326


P.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爆弾文字列も酷かったですよね。あまりにも恐ろしいバグなので、ブログにも掲載できず、ただただ大人しくしていました。雉も鳴かずば撃たれまいにですから。
 

過去のボレコ(ブログ)
2013 2012 2011 2010 2009 2008 2007

【地図】
🚩
【地図】ガレコレ&海辺の自然学校
【地図】加領郷小学校
ごめん・なはり線 時刻表/運賃表

【お仕事】
※ガレコレでは、各部署がいつでも独立できるように、部署名に将来の屋号を取り入れています👍
 
サンズイ
※サンズイ[SANZUI]は、ガレコレの海岸線事業部門です。
 
ネコノテ
※ネコノテ [NeCoNote]は、ガレコレのコンピューター部門です。
 
十畳合気道場
※十畳合気道場 [JuJo]は、ガレコレの合気道部門です。
 
その他の活動
ゆずFeS:実生のゆず狩り体験
※ガレコレは、松本崇人くんを応援しています。
活動記録

【ガレコレって?】
ガレコレ
・代表 岩瀬洋一郎
・2004年11月3日起業
・現在、海岸線事業/コンピューター/合気道場の3事業に絞って活動しています。
 

【情報集】
気象状況

Since 2015/11/26 総数195215 昨日118 今日123
お問い合わせ


by Network Communication Note