writing-modeで縦書きにした時Windowsでは@付きフォントが必要な件→必要なくなった。

EPUB3.0に引っ張られる形で、10年くらい放置されてたCSSでの縦書きが徐々に使えるようになっていますが、Windows環境のChromeだとフォント名に@マークをつけた、いわゆる縦書きフォントを指定しないと、縦書きなのに文字が横倒しという謎の表現になってしまいます。そのことに関する疑問。 とりあえず備忘録的なまとめ。
5
後藤寿庵 @juangotoh

Windows版Chromeで縦書きすると文字が横倒しになるのって、バグだよねえ。Windowsではフォント名に@をつけるというのが正しい仕様ってこたあないよねえ。

2012-04-04 12:03:30
𝑛𝑖𝑡𝑒𝑐𝑟𝑢𝑖𝑠𝑒 @nitecruise

@juangotoh Windows環境ではフォント名に付ける@が縦書きグリフ(vert)への切り換えスイッチということです。例外なし。

2012-04-04 12:06:23
後藤寿庵 @juangotoh

なんと!今後IEやFirefoxでもそういう実装になるのでしょうか RT @nitecruise @juangotoh Windows環境ではフォント名に付ける@が縦書きグリフ(vert)への切り換えスイッチということです。例外なし。

2012-04-04 12:08:20
𝑛𝑖𝑡𝑒𝑐𝑟𝑢𝑖𝑠𝑒 @nitecruise

@juangotoh IEでもそうです。但しFirefoxは標準で縦書き対応していないのでフォント名の@スイッチは無視する仕様だったと思います。

2012-04-04 12:10:01
後藤寿庵 @juangotoh

そうすると、縦書きを使用する際は、デフォルトフォントを使わず必ずフォント名を指定をする必要がありますね。ユーザーがローカルCSSを指定している場合とかも問題になりそうな…。 RT @nitecruise @juangotoh IEでもそうです。

2012-04-04 12:28:29
𝑛𝑖𝑡𝑒𝑐𝑟𝑢𝑖𝑠𝑒 @nitecruise

@juangotoh 仰るとおり。ただしコンテンツ提供する側とすれば、それは当然の配慮ですし、さらに踏み込めば「こう見てもらいたい」という版面をフォント含めて(このためにウェブフォントの仕組みがある)表現できるのでプロダクトの質を向上させることも出来る訳ですね。

2012-04-04 12:40:34
後藤寿庵 @juangotoh

writing-modeで vertical-lrを指定する場合、普通に日本語の文字は正立で表示されることを意図してると思うので、プログラム内部で「@」つけちゃえばいいんじゃないかなあ。

2012-04-04 12:48:37
後藤寿庵 @juangotoh

スタイルシートでフォント名に@をつけるつけないというのは、フォント名の違いで「縦書きで日本語も横倒し」という表現をWindowsだけで実現していることになるわけで、なんか変じゃない?

2012-04-04 12:51:33
𝑛𝑖𝑡𝑒𝑐𝑟𝑢𝑖𝑠𝑒 @nitecruise

.@juangotoh 縦書き指示に連動してフォントの縦書きグリフが自動的に選ばれるという全うな対応ができているのはOS Xのみで、それぞれが影響し合わない独立・並列のオプションというのがWindowsの発想。なので@スイッチ付けて横書きとかもやれます。文章は左側頭にして寝ます。

2012-04-04 13:23:29
後藤寿庵 @juangotoh

.@nitecruise Windowsでも縦書き機能のあるワープロなどでは@スイッチをフォント一覧に出さず、現在のモードが縦書きか横書きかで判断するようになっているものが多いですよね。

2012-04-04 13:29:14
後藤寿庵 @juangotoh

まえにちょっと書いたけど、@付きフォントって、あれ、横書きしかできないソフトで年賀状の宛名書いたりして、用紙横向きで印刷すればいいじゃんというたぐいの古い解決方法だよねえ。

2012-04-04 13:30:30
𝑛𝑖𝑡𝑒𝑐𝑟𝑢𝑖𝑠𝑒 @nitecruise

エンドユーザー向けアプリのUI面を考えればそれが適切ですが、CSSのスタイル指定はプログラミングですから。@juangotoh Windowsでも縦書き機能のあるワープロなどでは@スイッチをフォント一覧に出さず、現在のモードが縦書きか横書きかで判断するようになっているものが多い。

2012-04-04 14:51:27

その後……

後藤寿庵 @juangotoh

最近のChrome、Windowsでフォント名に@付けなくても縦書きが正常に表示されるじゃん。だよねえ。これが普通の動作だよねえ。

2012-12-07 16:25:32
後藤寿庵 @juangotoh

Windows8上のChromeで縦書き表示。 -webkit-writing-mode:vertical-rl; font-family: "MS Pゴシック"; でこうなる@いらない。 http://t.co/yagxukco

2012-12-07 16:31:29
拡大