例えばHTMLで「F-15」のような「-」(ハイフン)を含むboxを90度回転して表示させようとすると、ハイフンの後で改行されてしまいます。
なぜこんなことが起きてしまうのでしょうか。
理由
フォントサイズが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+002D
とU+2010
(U+2012,U+2013なども)を、あらかじめnon-breaking-hyphen(U+2011)
に変換して、この問題を回避しています。
white-space:pre
でも解決できるかもしれないです。
もちろんこれはベストな解決方法ではありません。
こうしたHyphenの動きをコントロールするため、CSSにはhyphens
というプロパティが定義されているのですが、なぜかChromeではまだ未実装(その他のブラウザは殆ど実装されている)なので、仕方なくこういう回避策をとっています。