Edit

Page

Page title:

Page body:

[9] 
[CODE[text-combine-upright]]
は、
特殊な[[縦中横]]の一種を実現するための
[[CSSプロパティー]]です。

* 仕様書

[REFS[
- [1] [CITE@en[CSS Writing Modes Level 4]], [TIME[2020-09-05T23:08:25.000Z]], [TIME[2020-09-06T02:36:21.121Z]] <https://drafts.csswg.org/css-writing-modes/#propdef-text-combine-upright>
]REFS]

* メモ

[2] 
現状自動の[[縦中横]]は使えません。
[CODE[[[digits]] 2]] のようにすると2桁以下の[[数字]]列は[[縦中横]]と指示できますが、
[[Chrome]] は対応してません。
[TIME[2020-09-27T05:28:50.400Z]]

[3] 
[CODE[all]] と指定するとすべてが[[横書き]]で表示されます。

[4] 
[[横書き]]になるだけでなく横幅が圧縮されて[[行]]の幅に調整されます。
半角3文字[[以上]]の幅があると不自然になります。
2文字でも ([[フォント]]次第でしょうが) 字が潰れて不自然な表示になります。

[7] 
[[紙媒体]]でも、
[[Web]] や [[SNS]] で使われている告知等の画像でも、
行の横幅に収めてあるのは2桁かせいぜい3桁の数字列のような、
[[合字]]が予め用意されていたと思しきものばかり。
それ以外、特に3文字以上の列の[[縦中横]]で横幅圧縮した例は全然見かけません。
2桁の数字でも行の横幅からはみ出して自然な横幅で配置されるものが多い。
[SEE[ 実例のいくつかは[[縦中横]]に ]]

[8] 
[[CSS]] は何でこんな変な仕様にしてしまったんだろう?

[11] 
[[CSS]] の横圧縮仕様が役立ちそうな事例初めて見つけたよ!
[[縦中横]>>42]
の[[明]]の時代の[[漢文]]。
当時の書籍は[[行間]]なしに[[漢字]]がぎっしり詰め込まれているので、
[[縦中横]]部分もきっちり[[全角]]1文字のスペースに収めないといけなくて、
5文字くらいある[[ラテン文字]]列でも無理矢理1行の横幅になってる。

[12] 
がんばって特殊な事例を探してこないと見つけられないような挙動をどうしてデフォルトにしちゃったんですかね?
そして普通の表示に変更する方法をどうして用意していないんですかね?
[[CSS WG]] は少しでも[[現実世界]]の用例を調査したんですかねえ?
一般的な用例はそんなに探すの難しくないから、少しでも用例を収集してればこんな変な仕様になるはずがないのに。

[13] 
不思議なのはこれが[[日本語]]全然わからない[[外人]]さんがてきとーに決めた仕様ではなくて、
[[ネイティブ]]と思われる[[日本人]]が関わってるっぽいんですよね。
それも背後に[[組版]]業界の専門家っぽい人達が関わっているらしい。
なのにどうしてこうなった。
一般書籍の[[組版]]だと文字数があんまり多いものは扱わないのかもしれないけど、
かといって一般書籍で横圧縮してる用例も全然出てこないから、
[[組版]]の世界では横圧縮が基本ってわけでもないだろうに。

-*-*-

[5] 
どうせ[[縦中横]]したい個所をすべて個別に [CODE[span]]
か何かで囲まないといけないなら、
[CODE[text-combine-upright]]
を使うより
[CODE[[[writing-mode]]: [[horizontal-tb]]]]
にしてしまう方がいいかも。
横幅を調整したいときは他の [[CSS]] の指定で個別にすればよい。

[6] 
[[横書き]]中では効果がありません。[[横中縦]]には使えません。
[[横中縦]]したいときは
[CODE[[[writing-mode]]: [[vertical-rl]]]]
を使えばよろしい。

[10] [CITE@en[1242755 - text-combine-upright with text-indent does not work properly]]
([TIME[2021-11-03T15:08:25.000Z]])
<https://bugs.chromium.org/p/chromium/issues/detail?id=1242755>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Errors

Page name(s)