前から不自然な空白が空いてるツイートを見ることがあって、なんだろう？と思ってたんですよ。
mac系IMEから変換した「～」なんですよ。
（下記画像参照。※メイリオは冤罪です）
下記ブログで説明されてるように、フォントによって見た目は同じでも、日本語の全角には、
「波ダッシュ」と「全角チルダ」があります。
「〜」と「～」は同じであって同じでないが、同じでなくても同じである:気まぐれブロマガ - すわとうさん -
windowsは全角チルダも波ダッシュも統一した文字に変換するようなんですが、
これが本来間違いらしくて、mac系が正しいと！（上のブロマガを読んでくれ）
デファクトスタンダードーーーーーー！！
つまりmac系のIMEで変換されている波ダッシュが、
windows10 chromeという環境から見る私には謎の空白に見えていたんですね。
でも上記のブロマガは両方見えてるわけですよ。
このブログを今書いてるのも、コピペじゃないと「〜」は入力できないけど見えている。
とすると、twitterのフォント設定で表示されないフォントを使用している可能性？と思いまして、
chromeにデフォルトでついているCSSとかを見るヤーツを使って検証しました。
twitterのツイート、デフォルトで表示されるように設定されているフォントがこちら。
「Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif」
半角英数字対応のみのフォントと日本語フォント入り混じってますが、
手前に書いてあるほど優先度が高いです。
要はwebデザイナが意図した通りに表示されるのが手前にあるやつで、
それ以降はそのフォントが入っていなかった時にその次に表示してほしいやつ…みたいな感じで記述されています。
で、これを一つ一つ消していって検証したところ、「〜」が表示されないのが、
「Osaka」だと以下のように分かりました。
（Osakaフォントが入っていない人にはフォントが変わって見えないです)
ヒラギノ角ゴ Pro W3：「〜」
Osaka：「〜」
ということで、原因が分かれば対策が打てます。
自分が表示しているサイトのCSSをブラウザ上でだけ変えて表示する、chrome用プラグインを入れました。
こちら→ Stylus -Chrome ウェブストア
前はStylishだったのですが、悪さをしでかしていたプラグインだったようなので、chromeに存在を消されました。
Stylusの安全性も保証できる訳ではないので、各自自己責任で使ってください。
使用した場合における不都合な事等は保証しません。
これを入れて、新規作成。
twitterフォント用とでも名前をつけて、コード欄に下記のように書きます。
body.ja {
font-family: Arial, "ヒラギノ角ゴ Pro W3",メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
2行目は好きなフォントがあるなら、好きなフォントにしてもいいです。
日本語のフォント名は半角ダブルクォーテーション「"」で囲んで、フォントごとに半角カンマ「,」で区切ってね。
上記は元のフォント一覧から「Osaka」を抜いただけです。
「適用先」は「次で始まるURL」を選択して、ツイッターの頭のURL「https://twitter.com」を入れればOK。
下図みたいな感じになります。
左側にある「保存」を押して完了。
ツイッターのページに行って、「〜」が表示されているか確認してみましょう。
mac系IMEから変換した「～」なんですよ。
（下記画像参照。※メイリオは冤罪です）
下記ブログで説明されてるように、フォントによって見た目は同じでも、日本語の全角には、
「波ダッシュ」と「全角チルダ」があります。
「〜」と「～」は同じであって同じでないが、同じでなくても同じである:気まぐれブロマガ - すわとうさん -
windowsは全角チルダも波ダッシュも統一した文字に変換するようなんですが、
これが本来間違いらしくて、mac系が正しいと！（上のブロマガを読んでくれ）
デファクトスタンダードーーーーーー！！
つまりmac系のIMEで変換されている波ダッシュが、
windows10 chromeという環境から見る私には謎の空白に見えていたんですね。
でも上記のブロマガは両方見えてるわけですよ。
このブログを今書いてるのも、コピペじゃないと「〜」は入力できないけど見えている。
とすると、twitterのフォント設定で表示されないフォントを使用している可能性？と思いまして、
chromeにデフォルトでついているCSSとかを見るヤーツを使って検証しました。
twitterのツイート、デフォルトで表示されるように設定されているフォントがこちら。
「Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif」
半角英数字対応のみのフォントと日本語フォント入り混じってますが、
手前に書いてあるほど優先度が高いです。
要はwebデザイナが意図した通りに表示されるのが手前にあるやつで、
それ以降はそのフォントが入っていなかった時にその次に表示してほしいやつ…みたいな感じで記述されています。
で、これを一つ一つ消していって検証したところ、「〜」が表示されないのが、
「Osaka」だと以下のように分かりました。
（Osakaフォントが入っていない人にはフォントが変わって見えないです)
ヒラギノ角ゴ Pro W3：「〜」
Osaka：「〜」
ということで、原因が分かれば対策が打てます。
自分が表示しているサイトのCSSをブラウザ上でだけ変えて表示する、chrome用プラグインを入れました。
こちら→ Stylus -Chrome ウェブストア
前はStylishだったのですが、悪さをしでかしていたプラグインだったようなので、chromeに存在を消されました。
Stylusの安全性も保証できる訳ではないので、各自自己責任で使ってください。
使用した場合における不都合な事等は保証しません。
これを入れて、新規作成。
twitterフォント用とでも名前をつけて、コード欄に下記のように書きます。
body.ja {
font-family: Arial, "ヒラギノ角ゴ Pro W3",メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
2行目は好きなフォントがあるなら、好きなフォントにしてもいいです。
日本語のフォント名は半角ダブルクォーテーション「"」で囲んで、フォントごとに半角カンマ「,」で区切ってね。
上記は元のフォント一覧から「Osaka」を抜いただけです。
「適用先」は「次で始まるURL」を選択して、ツイッターの頭のURL「https://twitter.com」を入れればOK。
下図みたいな感じになります。
左側にある「保存」を押して完了。
ツイッターのページに行って、「〜」が表示されているか確認してみましょう。
