読者です 読者をやめる 読者になる 読者になる

anti scroll

ブラウザと小説の新しい関係を模索する

Unicode Hyphen覚え書き

例えばHTMLで「F-15」のような「-」(ハイフン)を含むboxを90度回転して表示させようとすると、ハイフンの後で改行されてしまいます。

f:id:convertical:20151231091605p:plain

なぜこんなことが起きてしまうのでしょうか。

理由

フォントサイズが16と仮定して「F-15」というwordの横幅が32で、高さが16だとします。

これを90度回転させると、このwordを囲むボックスの横幅は、32から16になります。

このときFの後のハイフンが、回転前の横幅(32)ではなく、回転後の横幅(16)を前提にして解釈されるため「F-」まで描画したところでインラインレベルの描画位置が横幅いっぱいの位置、すなわち16に届きます。

インラインの行末で発生したハイフンは、line-break-pointとブラウザに判断されるため、改行が発生してしまうわけです。

Unicodeの中でline-break-pointと解釈されるハイフンは他にも色々(*注1)ありますが、よく使われるのはHYPHEN MINUS(U+002D)や、HYPHEN(U+2010)です。

*注1 U+002D, U+2010, U+2012, U+2013とかもそう。調べたらもっとあるかも。

というわけで、nehan.js内では英数字を縦書き用に回転させるときだけ、U+002DU+2010(U+2012,U+2013なども)を、あらかじめnon-breaking-hyphen(U+2011)に変換して、この問題を回避しています。

white-space:preでも解決できるかもしれないです。

もちろんこれはベストな解決方法ではありません。

こうしたHyphenの動きをコントロールするため、CSSにはhyphensというプロパティが定義されているのですが、なぜかChromeではまだ未実装(その他のブラウザは殆ど実装されている)なので、仕方なくこういう回避策をとっています。