Testo-combina-verticale - Trucchi CSS

La text-combine-uprightproprietà CSS combina i caratteri nello spazio di un carattere. Le specifiche chiamano questa composizione "orizzontale in verticale", che è un bel modo di descrivere il caso d'uso: situazioni in cui potresti aver bisogno di alcuni caratteri in modalità di scrittura verticale per essere visualizzati orizzontalmente sulla stessa riga.

span ( text-combine-upright: all; )

La tecnica del testo orizzontale all'interno del testo verticale è una tecnica giapponese chiamata tate-chū-yoko. Ecco come appare:

Quando si lavora con una modalità di scrittura verticale da sinistra a destra ( `writing-mode: vertical-rl;`), come il lato sinistro di questa illustrazione, la `text-combine-upright`proprietà può prendere più caratteri e visualizzarli orizzontalmente, essenzialmente dividendo lo spazio del carattere in parti uguali in base al numero di caratteri selezionati. In questo esempio, il lato destro mostra due caratteri che condividono lo stesso spazio di caratteri all'interno di una modalità di scrittura verticale.

Sintassi

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

Valore iniziale: none
Si applica a: elementi inline non sostituiti
Ereditato: sì
Percentuali: n / a
Valore calcolato: parola chiave specificata, più intero sedigits
Tipo di animazione: non animabile

Valori

text-combine-upright accetta i seguenti valori:

none: Questo è il valore iniziale. Nessun carattere viene visualizzato orizzontalmente in modalità di scrittura verticale.
all: Tutti i caratteri tipografici consecutivi nel riquadro di contenimento verticale vengono visualizzati orizzontalmente sulla stessa riga, occupando lo spazio di un singolo carattere nel riquadro verticale.
digits ?: Tutte le cifre ASCII consecutive nella casella di contenimento verticale vengono visualizzate orizzontalmente sulla stessa riga, occupando lo spazio di un singolo carattere nella casella verticale, fino al numero intero specificato. Se nessun numero intero è specifico, il valore predefinito è di 2 cifre. Tutto ciò che è inferiore a 2 e superiore a 4 non è valido.

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

Utilizzo

Supponiamo di prendere l'esempio che è direttamente dalle specifiche, che è un elemento con una modalità di scrittura verticale.

平成20年4月16日に

date ( writing-mode: vertical-lr; )

OK, vogliamo che i numeri nella data vengano visualizzati orizzontalmente. È logico presumere che l'aggiunta text-combine-uprightdirettamente sull'elemento farà il trucco:

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

Buuuuut, non così tanto. Al momento della scrittura, dobbiamo applicare la proprietà alle cifre stesse affinché funzioni. Un arco basterà.

平成20年4月16日に

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

Ci siamo!

Supporto del browser

Come abbiamo appena visto nell'esempio, al momento il supporto del browser è un po 'sparpagliato. Sebbene molti browser offrano un supporto almeno parziale per text-combine-upright, c'è molto meno supporto per il digitsvalore rispetto a quello per il allvalore.

IE	Bordo	Firefox	Cromo	Safari	musica lirica
11¹	12 + ¹	48 + ²	48+	5.1 + ³	35+

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

Fonte: caniuse

Utilizza il nome non standard: -ms-text-combine-horizontal
Riconosce il digitsvalore dietro la layout.css.text-combine-upright-digits.enabledbandiera sperimentale, ma non implementa ancora il supporto del layout per tate-chū-yoko
Utilizza il nome non standard: -webkit-text-combine