text-combine-upright
text-combine-upright は CSS のプロパティで、一文字分の空間に挿入する文字の組み合わせを設定します。組み合わせたテキストが 1em の幅より広い場合、ユーザーエージェントはコンテンツを 1em の幅に収めなければなりません。合成結果は、レイアウトおよび装飾においてグリフ一文字として扱われます。このプロパティは、縦書きモードでのみ効果があります。
これは、日本語の縦中横、中国語の 直書橫向 として知られる効果をもたらすために使用されます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 48 | 79 | 48 | 15.4 | 48 | 15.4 | |
all | 48 | 79 | 48 | 15.4 | 48 | 15.4 |
none | 48 | 79 | 48 | 15.4 | 48 | 15.4 |
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
対応条件
- 以前は別名で対応していました: -webkit-text-combine (9)
実装メモ
- このプロパティは、CSS3 書き込みモード仕様の 2011 バージョンに従って、当初は「-webkit-text-combine」という名前が付けられ、「数字」のない値「none」および「horizontal」をサポートしていました。
注釈 2件
削除済み
- このバージョンで機能が削除されました (79)
対応条件
- 以前は別名で対応していました: -ms-text-combine-horizontal (12)
注釈 1件
実装メモ
- バージョン 81 より前の Firefox では、このプロパティがアニメーション可能として実装されていました。 これは81年に仕様に修正されました。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
対応条件
- 以前は別名で対応していました: -webkit-text-combine (5.1)
実装メモ
- このプロパティは、CSS3 書き込みモード仕様の 2011 バージョンに従って、当初は「-webkit-text-combine」という名前が付けられ、「数字」のない値「none」および「horizontal」をサポートしていました。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
対応条件
- 以前は別名で対応していました: -webkit-text-combine (18)
実装メモ
- このプロパティは、CSS3 書き込みモード仕様の 2011 バージョンに従って、当初は「-webkit-text-combine」という名前が付けられ、「数字」のない値「none」および「horizontal」をサポートしていました。
注釈 3件
制限事項
- このブラウザでは部分的にしか実装されていません
対応条件
- 以前は別名で対応していました: -webkit-text-combine (5)
実装メモ
- このプロパティは、CSS3 書き込みモード仕様の 2011 バージョンに従って、当初は「-webkit-text-combine」という名前が付けられ、「数字」のない値「none」および「horizontal」をサポートしていました。
基本構文
CSS
.vertical-text {
writing-mode: vertical-rl;
}
.tcy {
text-combine-upright: all;
}ライブデモ
実務での使いどころ
-
縦書き中の西暦表示
縦書きの日本語テキスト内で「2026」のような数字を横向きに組み合わせて自然に表示します。
注意点
- 組み合わせる文字数が多すぎると文字が極端に小さくなるため、一般的には2〜4文字程度に制限してください。
アクセシビリティ
- スクリーンリーダーは縦中横テキストを正しく読み上げられない場合があるため、aria-label での補足を検討してください。