Text-kombinera-upprätt - CSS-tricks

Anonim

Den text-combine-uprightCSS 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:

När du arbetar med ett vertikalt skrivläge från vänster till höger ( writing-mode: vertical-rl;), som till vänster i denna illustration, kan text-combine-uprightegenskapen 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 omdigits
  • 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-uprightdirekt 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 digitsvärdet än det finns för allvä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+
Källa: caniuse
  1. Använder det icke-standardnamn: -ms-text-combine-horizontal
  2. Känner igen digitsvärdet bakom den layout.css.text-combine-upright-digits.enabledexperimentella flaggan, men implementerar ännu inte layoutstöd för tate-chū-yoko
  3. Använder det icke-standardnamn: -webkit-text-combine

Specifikation

  • CSS-skrivlägen nivå 4 (redaktionens utkast)

Relaterade egenskaper

Almanack den 5 januari 2021

riktning

.element ( direction: rtl; ) Jwahir Sundai Almanac den 5 januari 2021

skrivläge

.element ( writing-mode: vertical-rl; ) Robin Rendle