text-combine-upright
text-combine-upright は縦書きレイアウトで日付や略称などのラテン文字列を横向きに組み合わせて1文字分のスペースに収める「縦中横」機能です。東アジアの文書で西暦年やアルファベットの略語を自然に表示するために不可欠です。主に日本語や中国語の縦書きコンテンツで使用されます。
概要
text-combine-upright は縦書きレイアウトで日付や略称などのラテン文字列を横向きに組み合わせて1文字分のスペースに収める「縦中横」機能です。東アジアの文書で西暦年やアルファベットの略語を自然に表示するために不可欠です。主に日本語や中国語の縦書きコンテンツで使用されます。
対応ブラウザ
デスクトップ
Chrome 48+
Edge 79+
Safari 15.4+
Firefox 48+
モバイル
Chrome Android 48+
Safari iOS 15.4+
Firefox Android 48+
基本構文
CSS
.vertical-text {
writing-mode: vertical-rl;
}
.tcy {
text-combine-upright: all;
}実務での使いどころ
-
縦書き中の西暦表示
縦書きの日本語テキスト内で「2026」のような数字を横向きに組み合わせて自然に表示します。
注意点
- 組み合わせる文字数が多すぎると文字が極端に小さくなるため、一般的には2〜4文字程度に制限してください。
アクセシビリティ
- スクリーンリーダーは縦中横テキストを正しく読み上げられない場合があるため、aria-label での補足を検討してください。