Proprietà CSS font-variant-east-asian
La proprietà CSS font-variant-east-asian controlla la sostituzione e il dimensionamento dei glifi per i caratteri dell'Asia orientale.
La proprietà CSS font-variant-east-asian controlla l'uso di glifi alternativi per i caratteri dell'Asia orientale come il cinese, il giapponese e il coreano (CJK). Permette di scegliere tra forme di caratteri storiche o regionali (ad esempio cinese tradizionale vs. semplificato, o diversi standard JIS giapponesi) e di controllare la larghezza delle cifre, tutto senza modificare il testo sottostante.
È una delle proprietà di CSS3 e una delle proprietà longhand che compongono la proprietà shorthand font-variant.
Perché usarla
Un singolo punto di codice Unicode può essere reso con diversi glifi nella tipografia dell'Asia orientale. Lo stesso carattere può avere una forma storica (tradizionale) e una moderna (semplificata), e i font giapponesi spesso includono glifi che seguono uno standard JIS specifico (jis78, jis83, jis90, jis04). font-variant-east-asian chiede al font di selezionare la variante appropriata dalle sue funzionalità OpenType, mantenendo i caratteri originali nel markup e presentando la forma desiderata.
Usala quando:
- Visualizzi testo cinese e vuoi forzare le forme tradizionali o semplificate indipendentemente dai caratteri digitati dall'autore.
- Hai come target uno specifico standard di glifico JIS giapponese per garantire coerenza.
- Mescoli testo CJK con testo Latino e hai bisogno di cifre a larghezza intera o proporzionali affinché le colonne si allineino.
- Stai renderizzando testo annotato e desideri le forme di glifico più piccole per ruby.
Poiché si basa sulle funzionalità del font, ha un effetto visibile solo quando il font attivo contiene effettivamente quei glifi alternativi. Se il font non ha una variante tradizionale, ad esempio, il testo viene renderizzato invariato.
| Valore iniziale | normal |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditato | Sì. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.fontVariantEastAsian = "ruby"; |
Sintassi
Sintassi della proprietà CSS font-variant-east-asian
font-variant-east-asian: normal | <east-asian-variant-values> | <east-asian-width-values> | ruby | initial | inherit ;Esempio della proprietà font-variant-east-asian:
Esempio della proprietà CSS font-variant-east-asian con il valore traditional
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
font-variant-east-asian: traditional;
}
</style>
</head>
<body>
<h2>Font-variant-east-asian property example</h2>
<h2>大学 → 大學</h2>
</body>
</html>Come si può vedere, la proprietà font-variant-east-asian è impostata su traditional. È possibile cambiarla con uno qualsiasi dei valori menzionati nella tabella in fondo a questa pagina, inclusa la variante simplified. Nota: il supporto del browser per questa proprietà è limitato. L'esempio si basa su font di sistema che includono varianti tradizionali dell'Asia orientale.
Risultato
![Proprietà CSS font-variant-east-asian](/uploads/media/default/0001/04/b5335cfd42c67834e22ae4ebce451467997f57b6.png "Proprietà CSS font-variant-east-asian" =420x)
Combinazione di valori di larghezza e variante
È possibile impostare contemporaneamente un valore di variante e un valore di larghezza. Le parole chiave possono essere elencate in qualsiasi ordine:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.cjk {
font-variant-east-asian: simplified full-width;
}
</style>
</head>
<body>
<p class="cjk">図書館 1234</p>
</body>
</html>Qui simplified seleziona la variante di glifico semplificata, mentre full-width forza le forme a larghezza intera per le cifre, in modo che occupino la stessa larghezza di cella dei caratteri CJK circostanti.
Valori
| Valore | Descrizione |
|---|---|
| normal | L'uso di glifi alternativi non è abilitato. |
<east-asian-variant-values> | Seleziona una variante di glifico logografico. Uno tra jis78, jis83, jis90, jis04, simplified o traditional. |
<east-asian-width-values> | Controlla il dimensionamento delle cifre usate per i caratteri dell'Asia orientale: proportional-width (spaziatura proporzionale) o full-width (forme a larghezza intera). |
| ruby | Forza l'uso di glifi speciali più piccoli progettati per i caratteri ruby (annotazione). |
| initial | Imposta la proprietà al suo valore predefinito (normal). |
| inherit | Eredita la proprietà dall'elemento padre. |
Un valore valido combina al massimo una parola chiave di variante e una parola chiave di larghezza (ad esempio jis90 full-width), oppure le singole parole chiave normal o ruby.
Proprietà correlate
font-variant— la proprietà shorthand che include questa longhand.font-feature-settings— controllo di basso livello delle stesse funzionalità OpenType.font-family— scegli un font che contenga effettivamente glifi varianti dell'Asia orientale.