IE/Edgeで縦書きにしたとき疑似両面ruby
が崩れる問題
なぜか一部の要素に書字方向が継承されなかった。参照先のCSSに以下の内容を加えたら解決した。
.vertical,
.vertical ruby rt,
.vertical ruby rtc,
.vertical ruby ruby,
.vertical ruby > rtc + rtc > span,
.vertical ruby > rtc + rp + rtc > span {
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
/* rtc > span > non-ruby-phrasing-content */
.vertical ruby > rtc + rtc > span,
.vertical ruby > rtc + rp + rtc > span {
display: table-cell;
}
A:流離の大俳人
B:流離の大俳人
一、Undinus sich winden
f(x, n) = ㏒₄xⁿ
- A: いまのところ「疑似両面ruby-CSSを適用しないFirefox」だけが正しく描画できる、両面rubyの例:
rtc > rt | さすらい | の | だいはいじん |
rb | 流離 | の | 大俳人 |
rtc | <span> グレイトハイカー</span> |
---|
Firefox (disabled CSS): ![Ruby-text1の上のrowにRuby-text2が描画される](img/20160404-fx-correct.png)
- B: 疑似両面ruby-CSSを適用すれば期待通りに描画される、入れ子のrubyの例:
ruby |
rtc > rt | さすらい | の | だいはいじん |
rb | 流離 | の | 大俳人 |
|
rt | グレイトハイカー |
---|
Firefox (disabled CSS): ![Ruby-text1とRuby-text2が同じrowに重なって描画される。まともに読めない。](img/20160404-fx-rubytext-override.png)
- 一、入れ子のrubyの応用例(ただしWHATWG HTML Standard仕様に違反しているかも):
ruby |
rtc > rt | ウンディヌス | ジッヒ | ヴィンデン |
rb | Undinus | sich | winden |
|
rt > ruby |
rtc > rt | ウンディヌス | よ | うね | くれ |
rb | 水精 | よ | 蜿 | くれ |
|
---|
Firefox (disabled CSS): ![まともに読めない。](img/20160404-fx-chaos.png)
![f(<var>x</var>, <var>n</var>) = ㏒<sub>₄</sub><var>x</var><sup><var>ⁿ</var></sup>](img/20160404-math.png)
Unicode codepoint | horizontal | vertical |
U+2061 | ![](img/20160404-u2061.png) | |
U+33D2 | ㏒ | ㏒ |
U+2084 | ₄ | ₄ |
U+207F | ⁿ | ⁿ |
- MS Edgeだけは'FUNCTION APPLICATION' (U+2061)を描画するが、書体がよくわからない。
- Plain HTMLならIE11もこの文字を描画する。WhatFont Toolいわく“Times New Roman”とのことだが、他のBrowsersで“Times New Roman”を指定してもこの文字は描画されない。
fileformat.info
によれば、“Segoe UI Symbol”であるらしい。これをPlain HTMLに対して書体として指定すると、IE11, Edge, Midori (WebKit1)でU+2061が描画される。
- Windows 10から、“Segoe UI Symbol”は“Segoe MDL2 Assets”に置き換えられているらしい。これをPlain HTMLに対して書体として指定すると、MidoriでもU+2061が描画されない。