Tekstcombinatie-rechtop - CSS-trucs

De text-combine-uprightCSS-eigenschap combineert tekens in de ruimte van één teken. De specificatie noemt deze "horizontaal-in-verticaal" compositie, wat een mooie manier is om de use case te beschrijven: situaties waarin je misschien enkele karakters in een verticale schrijfmodus nodig hebt om horizontaal op dezelfde regel weer te geven.

span ( text-combine-upright: all; )

De techniek van horizontale tekst binnen verticale tekst is een Japanse techniek die tate-chū-yoko wordt genoemd. Hier is hoe dat eruit ziet:

Wanneer u werkt met een verticale schrijfmodus van links naar rechts ( `writing-mode: vertical-rl;`), zoals de linkerkant van deze illustratie, kan de `text-combine-upright`eigenschap meerdere tekens bevatten en deze horizontaal weergeven, waarbij de tekenruimte in feite in gelijke delen wordt opgesplitst op basis van het aantal geselecteerde tekens. In dit voorbeeld toont de rechterkant twee tekens die dezelfde tekenruimte delen in een verticale schrijfmodus.

Syntaxis

text-combine-upright: none | all | ( digits ? )

Beginwaarde: none
Van toepassing op: niet-vervangen inline-elementen
Overgenomen: ja
Percentages: nvt
Berekende waarde: gespecificeerd trefwoord, plus geheel getal alsdigits
Animatietype: niet animeerbaar

Waarden

text-combine-upright accepteert de volgende waarden:

none Er worden geen tekens horizontaal weergegeven in een verticale schrijfmodus.
all
digits ? Als geen geheel getal specifiek is, is de standaardwaarde 2 cijfers. Alles onder 2 en boven 4 is ongeldig.

/* 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;

Gebruik

Stel dat we het voorbeeld nemen dat rechtstreeks uit de specificatie komt, een element met een verticale schrijfmodus.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

OK, we willen dat cijfers in de datum horizontaal worden weergegeven. Het is logisch om aan te nemen dat text-combine-uprightrechtstreeks toevoegen aan het element voldoende is:

date ( text-combine-upright: digits 2; /* ? */ writing-mode: vertical-lr; )

Buuuuut, niet zo veel. Op het moment van schrijven moeten we de eigenschap op de cijfers zelf toepassen om dit te laten werken. Een span is voldoende.

平成20年4月16日に

date ( writing-mode: vertical-lr; ) span ( text-combine-upright: digits 2; )

Daar gaan we!

Browser-ondersteuning

Zoals we zojuist in het voorbeeld hebben gezien, is de browserondersteuning momenteel een beetje verspreid. Hoewel veel browsers op zijn minst gedeeltelijke ondersteuning bieden text-combine-upright, is er veel minder ondersteuning voor de digitswaarde dan voor de allwaarde.

D.W.Z	Rand	Firefox	Chrome	Safari	Opera
11¹	12 + ¹	48 + ²	48+	5,1 + ³	35+

Android Chrome	Android Firefox	Android-browser	iOS Safari	Opera Mobile
86+	82 + ²	81+	5 + ³	59+

Bron: caniuse

Gebruikt de niet-standaard naam: -ms-text-combine-horizontal
Herkent de digitswaarde achter de layout.css.text-combine-upright-digits.enabledexperimentele vlag, maar implementeert nog geen lay-outondersteuning voor tate-chū-yoko
Gebruikt de niet-standaard naam: -webkit-text-combine