Studio TA Subsite の案内とお知らせ

ページャーをアレンジする(続1) / エキサイトブログ

2018年 02月 26日

問題のある「direction」プロパティ


非常に首尾よく導入出来たかに見えた「direction」プロパティですが、最初に対応が怪しいEdgeの問題に遭遇しました。 これは「unicode-bidi: plaintext;」を「unicode-bidi: embed;」に置き換えて改善したのですが、今度はまた別な問題が出て来ました。

下はChromeでの表示ですが、"」"(かぎ括弧)が変な所に表示され、ボタンの文字が左にズレています。

a0349576_19563299.png

「次のページ」のタイトルは、"「ブログ内検索」の検索ページを... >>"というものですが、ボタンにマウスを乗せて引用されたタイトルを見ると、頭の""がなくなっています。

a0349576_22154291.png

""は上図の場所に移動し、しかも向きが回転しています。 回転ではなく、""に対応する""の括弧に置き換わったと言うべきかも知れません。

この様な異常表示は、タイトル先頭に「括弧」がある場合らしく、場合はそう多くないでしょうが、放っておけません。



バグなのかと思ったが根は深く複雑な様子


下の様に DevToolsでタイトルを直接書き換え、色々なタイトルをテストすると、更に深刻な状況が判って来ました。

a0349576_20132421.png

●タイトルの先頭に半角の記号文字(アルファベットと数字を除いた全文字)があると、その文字はボタン側に飛ばされます。

a0349576_20235373.png

半角の括弧も同様に飛ばされますが、漢字の括弧と同様に対応する側の括弧に置き換わっています。

a0349576_20242762.png

●飛ばされるのは1文字ではなく、アルファベットと数字の半角、例えば"a""8"とかが出て来るまで、飛ばされてボタン上に現れます。

a0349576_20290218.png

上の真ん中は、本当のタイトルは "8+6=を計算する" というものです。 本来"8" で始まったものは飛ばされないはずが、これらが数式と判断されたのか、"=" "8+6"と何等かの基準で分断した上で飛ばされています。
また上の右端、半角括弧で挟まれた"123"は、本来は半角数字"1"から後は飛ばされないはずが、括弧でくくられているので纏めて飛ばされた様です。

こういった飛ばしには明らかな基準があり、「direction: rtl;」の機能に従っているらしく、単なるバグでは無いと思えます。

●全角文字(漢字)についても、ほぼ同様の基準がある様です。

a0349576_20395608.png

「ひらがな」「カタカナ」「数字」等は飛ばされませんが、タイトル先頭にある「記号文字」「括弧」等やその連続は、上図の様に飛ばされます。



タイトル先頭の飛ばしを引き起こす条件


下は先頭の "「" が飛ばされるタイトル例のHTMLです。

a0349576_20545003.png

「before擬似要素」は FontAwesomeの「>」マークを表示させ、「position: absolute;」でタイトル後方のボタン位置に移動します。「after擬似要素」は「Older」の文字をタイトル後方に表示させるコードです。

タイトル幅は色々と変わるので、「position: absolute;」を使用しないとボタンの定位置に「>」マークを置けません。 このコードで「absolute」指定は必須です。 しかし、この「absolute」指定を入れるとタイトル先頭文字の飛ばしが生じます。 何らかの関係がある様ですが、「direction」指定のある場で「position: absolute;」を使用すると、その文字配列に影響する事は事実です。

また、これを嫌って「before擬似要素」自体を削除しても、再び飛ばしが生じます。 どうも「absolute」指定が無くても「擬似要素」自体が相性が悪い様です。

これではどうにもならないのですが、Edgeの非対応で撤回した「unicode-bidi: plaintext;」を指定すると「direction: rtl;」の飛ばしが無くなり、全く問題なく使えます。 どうもこれが正しい指定の様に思え、遅れたブラウザ Edgeなどは無視したくなります。

とは言え、現在はコードを見直して、回避策、代案を練っている所です。




この記事はカテゴリ「スキン編集」にトラックバックしています。


[PR]
by Ataron | 2018-02-26 21:37 | ブログスキンのアレンジ | Trackback | Comments(0)
トラックバックURL : https://atstudiota.exblog.jp/tb/28161730
トラックバックする(会員専用) [ヘルプ]
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。