Propriété CSS font-variant-east-asian
La propriété CSS font-variant-east-asian contrôle la substitution et le dimensionnement des glyphes pour les scripts d'Asie de l'Est. Exemples inclus.
La propriété CSS font-variant-east-asian contrôle l'utilisation de glyphes alternatifs pour les scripts d'Asie de l'Est tels que le chinois, le japonais et le coréen (CJK). Elle vous permet de choisir entre des formes de caractères historiques ou régionales (par exemple le chinois traditionnel ou simplifié, ou différentes normes JIS japonaises) et de contrôler la largeur des chiffres — sans modifier le texte sous-jacent.
C'est l'une des propriétés CSS3 et l'une des propriétés détaillées qui composent la propriété abrégée font-variant.
Pourquoi l'utiliser
Un seul point de code Unicode peut être rendu avec plusieurs glyphes différents dans la typographie d'Asie de l'Est. Le même caractère peut avoir une forme historique (traditionnelle) et une forme moderne (simplifiée), et les polices japonaises incluent souvent des glyphes conformes à une norme JIS spécifique (jis78, jis83, jis90, jis04). font-variant-east-asian demande à la police de choisir la variante appropriée parmi ses fonctionnalités OpenType, vous permettant ainsi de conserver les caractères originaux dans votre balisage tout en présentant la forme souhaitée.
Utilisez-la lorsque :
- Vous affichez du texte chinois et souhaitez forcer les formes traditionnelles ou simplifiées quelle que soit la forme saisie par l'auteur.
- Vous ciblez une norme de glyphes JIS japonaise particulière pour la cohérence.
- Vous mélangez du CJK avec du texte latin et avez besoin de chiffres en pleine largeur ou en largeur proportionnelle pour que les colonnes s'alignent.
- Vous rendez du texte annoté et souhaitez les formes de glyphes ruby plus petites.
Comme cela repose sur des fonctionnalités de police, l'effet n'est visible que si la police active contient réellement ces glyphes alternatifs. Si la police ne possède pas de variante traditionnelle, par exemple, le texte s'affiche sans modification.
| Valeur initiale | normal |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Héritée | Oui. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.fontVariantEastAsian = "ruby"; |
Syntaxe
Syntaxe de la propriété CSS font-variant-east-asian
font-variant-east-asian: normal | <east-asian-variant-values> | <east-asian-width-values> | ruby | initial | inherit ;Exemple de la propriété font-variant-east-asian :
Exemple de la propriété CSS font-variant-east-asian avec la valeur 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>On peut voir ici que la propriété font-variant-east-asian est définie sur traditional. Vous pouvez la remplacer par n'importe quelle valeur mentionnée dans le tableau ci-dessous, y compris la variante simplified. Remarque : la prise en charge de cette propriété par les navigateurs est limitée. L'exemple repose sur des polices système incluant des variantes d'Asie de l'Est traditionnelles.
Résultat
![Propriété CSS font-variant-east-asian](/uploads/media/default/0001/04/b5335cfd42c67834e22ae4ebce451467997f57b6.png "Propriété CSS font-variant-east-asian" =420x)
Combinaison de valeurs de largeur et de variante
Vous pouvez définir une valeur de variante et une valeur de largeur simultanément. Les mots-clés peuvent être listés dans n'importe quel ordre :
<!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>Ici, simplified sélectionne la variante de glyphe simplifiée tandis que full-width force les formes en pleine largeur pour les chiffres, de sorte qu'ils occupent la même largeur de cellule que les caractères CJK environnants.
Valeurs
| Valeur | Description |
|---|---|
| normal | L'utilisation de glyphes alternatifs n'est pas activée. |
<east-asian-variant-values> | Sélectionne une variante de glyphe logographique. L'une des valeurs suivantes : jis78, jis83, jis90, jis04, simplified ou traditional. |
<east-asian-width-values> | Contrôle le dimensionnement des chiffres utilisés pour les caractères d'Asie de l'Est : proportional-width (espacement proportionnel) ou full-width (formes en pleine largeur). |
| ruby | Force l'utilisation de glyphes spéciaux plus petits conçus pour les caractères ruby (annotation). |
| initial | Applique la valeur par défaut de la propriété (normal). |
| inherit | Hérite la propriété de son élément parent. |
Une valeur valide combine au maximum un mot-clé de variante et un mot-clé de largeur (par exemple jis90 full-width), ou les mots-clés uniques normal ou ruby.
Propriétés associées
font-variant— la propriété abrégée qui inclut cette propriété détaillée.font-feature-settings— contrôle de bas niveau des mêmes fonctionnalités OpenType.font-family— choisir une police qui contient réellement des glyphes de variantes d'Asie de l'Est.