Den text-combine-upright
CSS egendom kombinerar tecken i loppet av ett tecken. Specifikationen kallar denna "horisontell-i-vertikal" komposition vilket är ett trevligt sätt att beskriva användningsfallet: situationer där du kan behöva några tecken i ett vertikalt skrivläge för att visas horisontellt på samma rad.
span ( text-combine-upright: all; )
Tekniken för horisontell text inom vertikal text är en japansk som kallas tate-chū-yoko. Så här ser det ut:

writing-mode: vertical-rl;
), som till vänster i denna illustration, kan text-combine-upright
egenskapen ta flera tecken och visa dem horisontellt, i huvudsak dela upp teckenytan i lika delar beroende på hur många tecken som väljs. I det här exemplet visar höger sida två tecken som delar samma teckenutrymme i ett vertikalt skrivläge.
Syntax
text-combine-upright: none | all | ( digits ? )
- Ursprungligt värde:
none
- Gäller för: icke-ersatta integrerade element
- Ärvt: ja
- Procentandelar: ej tillämpligt
- Beräknat värde: specificerat nyckelord, plus heltal om
digits
- Animationstyp: inte animerbar
Värden
text-combine-upright
accepterar följande värden:
none
: Detta är det ursprungliga värdet. Inga tecken visas horisontellt i ett vertikalt skrivläge.all
: Alla på varandra följande typografiska tecken i den vertikalt innehållande rutan visas horisontellt på samma rad och tar upp platsen för ett enda tecken i den vertikala rutan.digits ?
: Alla på varandra följande ASCII-siffror i den vertikala innehållande rutan visas horisontellt på samma rad och tar upp ett enstaka tecken i den vertikala rutan upp till det angivna heltalet. Om inget heltal är specifikt är standard två siffror. Allt under 2 och över 4 är ogiltigt.
/* Keyword values */ text-combine-upright: none; text-combine-upright: all; /* Digits values */ text-combine-upright: digits; /* 2 digits */ text-combine-upright: digits 4; /* 4 digits */ /* Global values */ text-combine-upright: inherit; text-combine-upright: initial; text-combine-upright: unset;
Användande
Säg att vi tar exemplet som är direkt från specifikationen, vilket är ett element med ett vertikalt skrivläge.
平成20年4月16日に
date ( writing-mode: vertical-lr; )
OK, vi vill att siffror i datumet ska visas horisontellt. Det är logiskt att anta att lägga till text-combine-upright
direkt på elementet kommer att göra tricket:
date ( text-combine-upright: digits 2; /* ? */ writing-mode: vertical-lr; )
Buuuuut, nej så mycket. I skrivande stund måste vi använda fastigheten på siffrorna själva för att detta ska fungera. En span kommer att göra.
平成20年4月16日に
date ( writing-mode: vertical-lr; ) span ( text-combine-upright: digits 2; )
Där vi går!
Webbläsarstöd
Som vi just såg i exemplet är webbläsarstöd lite spridda just nu. Medan många webbläsare erbjuder åtminstone delvis stöd för text-combine-upright
, finns det mycket mindre stöd för digits
värdet än det finns för all
värdet.
IE | Kant | Firefox | Krom | Safari | Opera |
---|---|---|---|---|---|
11¹ | 12 + ¹ | 48 + ² | 48+ | 5,1 + ³ | 35+ |
Android Chrome | Android Firefox | Android-webbläsare | iOS Safari | Opera Mobile |
---|---|---|---|---|
86+ | 82 + ² | 81+ | 5 + ³ | 59+ |
- Använder det icke-standardnamn:
-ms-text-combine-horizontal
- Känner igen
digits
värdet bakom denlayout.css.text-combine-upright-digits.enabled
experimentella flaggan, men implementerar ännu inte layoutstöd för tate-chū-yoko - Använder det icke-standardnamn:
-webkit-text-combine
Specifikation
- CSS-skrivlägen nivå 4 (redaktionens utkast)
Relaterade egenskaper
Almanack den 5 januari 2021riktning
.element ( direction: rtl; )




skrivläge
.element ( writing-mode: vertical-rl; )

