PPPに直接関係ないけど縦書きCSSの話。



2023-04-12 00:28:47
Ver.0.9.3で縦書き時にiOSのsafariでダッシュ(―)が縦にならない問題に対応しました。

この問題は次のような原因で発生していました。

PPPでの縦書き表示はCSSの
 writing-mode: vertical-rl;
 text-orientation: upright;
を指定して行っています。

writing-mode: vertical-rl;は縦書きの指定。
text-orientation:upright;は縦書きの際、数字は横向きに表示する指定です。

text-orientation:upright;を指定すると、英数字は横向きに表示されます。
あいうえお
123
abc
―――――

text-orientation:upright;を指定しないと、英数字が横に倒れます。
あいうえお
123
abc

―――――

本来、ダッシュ(-)は英数字ではないためどちらの指定にかかわらず、縦向きに表示されるのが正しい動作なのですが、iOSのsafariではuprightを指定するとダッシュも横向きにされてしまいます。
このため、縦書きにならず横棒が並ぶような形で表示されてしまいます。

対策として、safariを利用してる場合はダッシュに関しては、text-orientation:upright;指定を外す挙動にしました。

また、safariのデフォルトフォントでは縦書きにした際にダッシュ同士を並べた際に隙間があきます。
この対策のため、ダッシュではなく罫線(─)に置換して表示しています。

この問題はユーザー様よりご指摘いただいて対応しました。
ありがとうございました。

いいね!


次へ | -