まとめの限定公開に「リンク限定」が追加されました。URLを伝えてまとめを共有しよう!

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

EPUB3.0に引っ張られる形で、10年くらい放置されてたCSSでの縦書きが徐々に使えるようになっていますが、Windows環境のChromeだとフォント名に@マークをつけた、いわゆる縦書きフォントを指定しないと、縦書きなのに文字が横倒しという謎の表現になってしまいます。そのことに関する疑問。 とりあえず備忘録的なまとめ。
サイト制作 プログラミング 縦書き CSS
9832view 2コメント
5
後藤寿庵 @juangotoh
Windows版Chromeで縦書きすると文字が横倒しになるのって、バグだよねえ。Windowsではフォント名に@をつけるというのが正しい仕様ってこたあないよねえ。
Kazuya Yasui @nitecruise
@juangotoh Windows環境ではフォント名に付ける@が縦書きグリフ(vert)への切り換えスイッチということです。例外なし。
後藤寿庵 @juangotoh
なんと!今後IEやFirefoxでもそういう実装になるのでしょうか RT @nitecruise @juangotoh Windows環境ではフォント名に付ける@が縦書きグリフ(vert)への切り換えスイッチということです。例外なし。
Kazuya Yasui @nitecruise
@juangotoh IEでもそうです。但しFirefoxは標準で縦書き対応していないのでフォント名の@スイッチは無視する仕様だったと思います。
後藤寿庵 @juangotoh
そうすると、縦書きを使用する際は、デフォルトフォントを使わず必ずフォント名を指定をする必要がありますね。ユーザーがローカルCSSを指定している場合とかも問題になりそうな…。 RT @nitecruise @juangotoh IEでもそうです。
Kazuya Yasui @nitecruise
@juangotoh 仰るとおり。ただしコンテンツ提供する側とすれば、それは当然の配慮ですし、さらに踏み込めば「こう見てもらいたい」という版面をフォント含めて(このためにウェブフォントの仕組みがある)表現できるのでプロダクトの質を向上させることも出来る訳ですね。
後藤寿庵 @juangotoh
writing-modeで vertical-lrを指定する場合、普通に日本語の文字は正立で表示されることを意図してると思うので、プログラム内部で「@」つけちゃえばいいんじゃないかなあ。
後藤寿庵 @juangotoh
スタイルシートでフォント名に@をつけるつけないというのは、フォント名の違いで「縦書きで日本語も横倒し」という表現をWindowsだけで実現していることになるわけで、なんか変じゃない?
Kazuya Yasui @nitecruise
.@juangotoh 縦書き指示に連動してフォントの縦書きグリフが自動的に選ばれるという全うな対応ができているのはOS Xのみで、それぞれが影響し合わない独立・並列のオプションというのがWindowsの発想。なので@スイッチ付けて横書きとかもやれます。文章は左側頭にして寝ます。
後藤寿庵 @juangotoh
.@nitecruise Windowsでも縦書き機能のあるワープロなどでは@スイッチをフォント一覧に出さず、現在のモードが縦書きか横書きかで判断するようになっているものが多いですよね。
後藤寿庵 @juangotoh
まえにちょっと書いたけど、@付きフォントって、あれ、横書きしかできないソフトで年賀状の宛名書いたりして、用紙横向きで印刷すればいいじゃんというたぐいの古い解決方法だよねえ。
Kazuya Yasui @nitecruise
エンドユーザー向けアプリのUI面を考えればそれが適切ですが、CSSのスタイル指定はプログラミングですから。@juangotoh Windowsでも縦書き機能のあるワープロなどでは@スイッチをフォント一覧に出さず、現在のモードが縦書きか横書きかで判断するようになっているものが多い。
その後……
後藤寿庵 @juangotoh
最近のChrome、Windowsでフォント名に@付けなくても縦書きが正常に表示されるじゃん。だよねえ。これが普通の動作だよねえ。
後藤寿庵 @juangotoh
Windows8上のChromeで縦書き表示。 -webkit-writing-mode:vertical-rl; font-family: "MS Pゴシック"; でこうなる@いらない。 http://t.co/yagxukco
 拡大

コメント

Tsuyoshi CHO @tsuyoshi_cho 2012年5月5日
フォントファミリー的な指定はあっていいんだけど...どうなんだろうね。
後藤寿庵 @juangotoh 2012年12月7日
まとめを更新しました。
ログインして広告を非表示にする
ログインして広告を非表示にする