<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="9" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[9]</anchor-end> 
<code>text-combine-upright</code>
は、
特殊な<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">縦中横</anchor>の一種を実現するための
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSSプロパティー</anchor>です。</p><section><h1>仕様書</h1><refs xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:"><ul xmlns="http://www.w3.org/1999/xhtml"><li><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="1" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[1]</anchor-end> <cite xml:lang="en">CSS Writing Modes Level 4</cite>, <time>2020-09-05T23:08:25.000Z</time>, <time>2020-09-06T02:36:21.121Z</time> <anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="https://drafts.csswg.org/css-writing-modes/#propdef-text-combine-upright">https://drafts.csswg.org/css-writing-modes/#propdef-text-combine-upright</anchor-external></li></ul></refs></section><section><h1>メモ</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="2" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[2]</anchor-end> 
現状自動の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">縦中横</anchor>は使えません。
<code><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">digits</anchor> 2</code> のようにすると2桁以下の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">数字</anchor>列は<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">縦中横</anchor>と指示できますが、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Chrome</anchor> は対応してません。
<time>2020-09-27T05:28:50.400Z</time></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="3" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[3]</anchor-end> 
<code>all</code> と指定するとすべてが<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">横書き</anchor>で表示されます。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="4" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[4]</anchor-end> 
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">横書き</anchor>になるだけでなく横幅が圧縮されて<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">行</anchor>の幅に調整されます。
半角3文字<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">以上</anchor>の幅があると不自然になります。
2文字でも (<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">フォント</anchor>次第でしょうが) 字が潰れて不自然な表示になります。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="7" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[7]</anchor-end> 
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">紙媒体</anchor>でも、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Web</anchor> や <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">SNS</anchor> で使われている告知等の画像でも、
行の横幅に収めてあるのは2桁かせいぜい3桁の数字列のような、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">合字</anchor>が予め用意されていたと思しきものばかり。
それ以外、特に3文字以上の列の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">縦中横</anchor>で横幅圧縮した例は全然見かけません。
2桁の数字でも行の横幅からはみ出して自然な横幅で配置されるものが多い。
<sw-see xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:"> 実例のいくつかは<anchor>縦中横</anchor>に </sw-see></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="8" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[8]</anchor-end> 
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor> は何でこんな変な仕様にしてしまったんだろう?</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="11" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[11]</anchor-end> 
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor> の横圧縮仕様が役立ちそうな事例初めて見つけたよ!
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="42" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">縦中横</anchor>
の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">明</anchor>の時代の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">漢文</anchor>。
当時の書籍は<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">行間</anchor>なしに<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">漢字</anchor>がぎっしり詰め込まれているので、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">縦中横</anchor>部分もきっちり<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">全角</anchor>1文字のスペースに収めないといけなくて、
5文字くらいある<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">ラテン文字</anchor>列でも無理矢理1行の横幅になってる。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="12" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[12]</anchor-end> 
がんばって特殊な事例を探してこないと見つけられないような挙動をどうしてデフォルトにしちゃったんですかね?
そして普通の表示に変更する方法をどうして用意していないんですかね?
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS WG</anchor> は少しでも<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">現実世界</anchor>の用例を調査したんですかねえ?
一般的な用例はそんなに探すの難しくないから、少しでも用例を収集してればこんな変な仕様になるはずがないのに。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="13" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[13]</anchor-end> 
不思議なのはこれが<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">日本語</anchor>全然わからない<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">外人</anchor>さんがてきとーに決めた仕様ではなくて、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">ネイティブ</anchor>と思われる<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">日本人</anchor>が関わってるっぽいんですよね。
それも背後に<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">組版</anchor>業界の専門家っぽい人達が関わっているらしい。
なのにどうしてこうなった。
一般書籍の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">組版</anchor>だと文字数があんまり多いものは扱わないのかもしれないけど、
かといって一般書籍で横圧縮してる用例も全然出てこないから、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">組版</anchor>の世界では横圧縮が基本ってわけでもないだろうに。</p><hr></hr><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="5" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[5]</anchor-end> 
どうせ<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">縦中横</anchor>したい個所をすべて個別に <code>span</code>
か何かで囲まないといけないなら、
<code>text-combine-upright</code>
を使うより
<code><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">writing-mode</anchor>: <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">horizontal-tb</anchor></code>
にしてしまう方がいいかも。
横幅を調整したいときは他の <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor> の指定で個別にすればよい。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="6" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[6]</anchor-end> 
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">横書き</anchor>中では効果がありません。<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">横中縦</anchor>には使えません。
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">横中縦</anchor>したいときは
<code><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">writing-mode</anchor>: <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">vertical-rl</anchor></code>
を使えばよろしい。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="10" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[10]</anchor-end> <cite xml:lang="en">1242755 - text-combine-upright with text-indent does not work properly</cite>
(<time>2021-11-03T15:08:25.000Z</time>)
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="https://bugs.chromium.org/p/chromium/issues/detail?id=1242755">https://bugs.chromium.org/p/chromium/issues/detail?id=1242755</anchor-external></p></section></body></html>