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

Sisällysluettelo

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-uprightominaisuus 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
  1. Käyttää epätyypillistä nimeä: -ms-text-combine-horizontal
  2. Tunnistaa kokeellisen lipun digitstakana olevan arvon layout.css.text-combine-upright-digits.enabled, mutta ei vielä toteuta tate-chū-yoko -asettelutukea
  3. Käyttää epätyypillistä nimeä: -webkit-text-combine

Erittely

  • CSS-kirjoitustilat, taso 4 (toimittajan luonnos)

Liittyvät ominaisuudet

Almanakka 5. tammikuuta 2021

suunta

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

kirjoitustila

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

Mielenkiintoisia artikkeleita...