Teksti-yhdistää-pystyssä - CSS-temppuja

text-combine-uprightCSS omaisuus yhdistää merkkiä tilaan yhden merkin. Spesifikaattori kutsuu tätä "vaaka-pystysuoraan" -koostumukseksi, joka on hyvä tapa kuvata käyttötapausta: tilanteita, joissa saatat tarvita joitain merkkejä pystysuorassa kirjoitustilassa näyttämään vaakasuunnassa samalla rivillä.

span ( text-combine-upright: all; )

Pystysuorassa tekstissä olevan vaakasuoran tekstin tekniikka on japanilainen nimeltään tate-chū-yoko. Näin se näyttää:

Kun työskentelet pystysuunnassa vasemmalta oikealle -kirjoitustilan ( `writing-mode: vertical-rl;`) kanssa, kuten tämän kuvan vasen puoli, `text-combine-upright`ominaisuus voi viedä useita merkkejä ja näyttää ne vaakasuunnassa jakamalla merkkitilan olennaisesti yhtä suureen osaan sen mukaan, kuinka monta merkkiä on valittu. Tässä esimerkissä oikealla puolella on kaksi merkkiä, jotka jakavat saman merkkitilan pystysuorassa kirjoitustilassa.

Syntaksi

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

Alkuarvo: none
Koskee seuraavia: korvaamattomat sisäelementit
Peritty: kyllä
Prosenttiosuudet: n / a
Laskettu arvo: määritetty avainsana, plus kokonaisluku, josdigits
Animaatiotyyppi: ei animoitava

Arvot

text-combine-upright hyväksyy seuraavat arvot:

none: Tämä on alkuarvo. Mitään merkkejä ei näytetä vaakasuorassa pystysuorassa kirjoitustilassa.
all: Kaikki pystysuoraan sisältävän ruudun peräkkäiset typografiset merkit näytetään vaakasuunnassa samalla rivillä, jolloin pystyruudussa on yksi merkki.
digits ?: Kaikki pystysuoraan sisältävän ruudun peräkkäiset ASCII-numerot näytetään vaakasuunnassa samalla rivillä, jolloin pystysuorassa ruudussa vie vain yksi merkki määritettyyn kokonaislukuun asti. Jos mikään kokonaisluku ei ole tarkka, oletusarvo on 2 numeroa. Kaikki alle 2 ja yli 4 ovat virheellisiä.

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

Käyttö

Oletetaan, että otamme esimerkin, joka on suoraan spesifikaatiosta, joka on elementti, jolla on pystysuuntainen kirjoitustila.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

OK, haluamme päivämäärän numeroiden näkyvän vaakasuunnassa. On loogista olettaa, että lisääminen text-combine-uprightsuoraan elementtiin tekee temppun:

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

Buuuuut, ei niin paljon. Kirjoittaessamme meidän on sovellettava ominaisuutta itse numeroihin, jotta tämä toimisi. Span tekee.

平成20年4月16日に

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

Siellä mennään!

Selaimen tuki

Kuten juuri näimme esimerkissä, selaintuki on tällä hetkellä hieman hajallaan. Vaikka monet selaimet tarjoavat ainakin osittaista tukea kohteelle text-combine-upright, digitsarvoa tuetaan paljon vähemmän kuin allarvoa.

IE	Reuna	Firefox	Kromi	Safari	Ooppera
11¹	12 + 1	48 + ²	48+	5,1 + 3	35+

Android Chrome	Android Firefox	Android-selain	iOS Safari	Opera Mobile
86+	82 + ²	81+	5 + 3	59+

Lähde: caniuse

Käyttää epätyypillistä nimeä: -ms-text-combine-horizontal
Tunnistaa kokeellisen lipun digitstakana olevan arvon layout.css.text-combine-upright-digits.enabled, mutta ei vielä toteuta tate-chū-yoko -asettelutukea
Käyttää epätyypillistä nimeä: -webkit-text-combine