三点リーダ問題

最近の悩みなのだが、ブラウザごとに三点リーダ（…）の見え方がまちまちで、とても困っている。

英語圏での、ellipsisが三点リーダと同じコードになっていることが原因のようだ。


言語の問題であれば、htmlでlang="ja"やlang="en"でどうにかなるのだろうか？

【test1】
[…] <span lang="ja">…</span>
[…] <span lang="en">…</span>

パソコンにて、Firefox、Chrome、IE、のいずれも中央に表示される。
HTC J(標準ブラウザ)、Nexus 7(2013)(Chrome)、のモバイルモード、パソコンモード、共にベースラインに表示される。

ならば、style="vertical-align: middle;"にしてみたらどうなるのだろうか？

【test2】
[…] <span lang="ja" style="vertical-align: middle;">…</span>
[…] <span lang="en" style="vertical-align: middle;">…</span>

style=では効かないのか？
ならば、
<style type="text/css">
span.test3 { vertical-align: middle !important; }
</style>

【test3】
[…] <span lang="ja" class="test3">…</span>
[…] <span lang="en" class="test3">…</span>


そもそも、パソコンのChromeと、Nexus7(2013)のパソコンモードのChromeで見え方が違うというのは、何が違うのだろうか。


font-familyを変えてみるか。

<style type="text/css">
span.test4 { font-family: sans-serif !important; }
</style>

【test4】
[…] <span lang="ja" class="test4">…</span>
[…] <span lang="en" class="test4">…</span>

お、パソコン側で変化があった。
Firefoxでは、jaが中央、enがベースライン
Chromeでは、ja、en、どちらも中央
IEでは、ja、en、どちらもベースライン
なんじゃこのまとまりのなさは。


ならば、三点リーダとされる文字コード（&hellip;、&#x2026;、&#8230;）とは別のものを使ってみる。


まずは、Midline horizontal ellipsis（&#x22EF;、&#8943;）から。

【test5】
[⋯] <span lang="ja">&#x22EF;</span>
[⋯] <span lang="en">&#x22EF;</span>
[⋯] <span lang="ja">&#8943;</span>
[⋯] <span lang="en">&#8943;</span>

パソコンでは、幅が狭まるし、Androidはフォントが存在していないようだ。


つぎは、縦書三点リーダ（&#xFE19;、&#65049;）を。

【test6】
[︙] <span lang="ja">&#xFE19;</span>
[︙] <span lang="en">&#xFE19;</span>
[︙] <span lang="ja">&#65049;</span>
[︙] <span lang="en">&#65049;</span>

これも、パソコンでは見えるが、Androidではフォントが存在していないとおもったら、Nexus7(2013)のchromeではモバイルモード、パソコンモードともにパソコンと同じ見え方だ。


つぎは、TRICOLON（&#x205D;、&#8285;）を。

【test7】
[⁝] <span lang="ja">&#x205D;</span>
[⁝] <span lang="en">&#x205D;</span>
[⁝] <span lang="ja">&#8285;</span>
[⁝] <span lang="en">&#8285;</span>

test6同様だが、パソコンで幅が狭まっているようだ。


もう、文字コードを変えるのはやめた。



文字を180°回転させてみる。

<style type="text/css">
span.test8 {
display: inline-block;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
</style>

【test8】
[…] <span lang="ja" class="test8">…</span>
[…] <span lang="en" class="test8">…</span>

パソコンでは、右に寄った？
Androidでは、見事上側にいった。


回っていることを明確にするために、90°回転させてみる。

<style type="text/css">
span.test9 {
display: inline-block;
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
</style>

【test9】
[…] <span lang="ja" class="test9">…</span>
[…] <span lang="en" class="test9">…</span>

パソコンは縦で中央になっている。
Androidでは、左よりだが縦になっている。





かきかけ