anti scroll

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

Unicode Hyphen覚え書き

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

f:id:convertical:20151231091605p:plain

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

理由

フォントサイズが16と仮定して「F-15」という横書きのwordを囲むサイズが、32x16(横x縦)だとします。

これを縦書き用に90度回転させると、このwordを囲むサイズは、32x16から16x32になります。

このとき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ではまだ未実装(その他のブラウザは殆ど実装されている)なので、仕方なくこういう回避策をとっています。