Propiedad CSS font-variant-east-asian
La propiedad CSS font-variant-east-asian controla la sustitución y el tamaño de glifos para escrituras de Asia Oriental. Aprende sus valores con ejemplos.
La propiedad CSS font-variant-east-asian controla el uso de glifos alternativos para escrituras de Asia Oriental, como el chino, el japonés y el coreano (CJK). Permite seleccionar entre formas de caracteres históricas o regionales (por ejemplo, chino tradicional frente a simplificado, o diferentes estándares JIS japoneses) y controlar el ancho de las cifras, todo ello sin modificar el texto subyacente.
Es una de las propiedades de CSS3 y una de las propiedades individuales que conforman la propiedad abreviada font-variant.
Por qué usarla
Un mismo punto de código Unicode puede representarse con varios glifos diferentes en la tipografía de Asia Oriental. El mismo carácter puede tener una forma histórica (tradicional) y una forma moderna (simplificada), y las fuentes japonesas suelen incluir glifos que siguen un estándar JIS específico (jis78, jis83, jis90, jis04). font-variant-east-asian solicita a la fuente que seleccione la variante adecuada de sus características OpenType, de modo que se conservan los caracteres originales en el marcado mientras se muestra la forma deseada.
Úsala cuando:
- Muestres texto en chino y quieras forzar las formas tradicionales o simplificadas independientemente de los caracteres que haya escrito el autor.
- Apuntes a un estándar de glifos JIS japonés concreto para mantener la coherencia.
- Combines CJK con texto en latín y necesites cifras de ancho completo o proporcional para que las columnas queden alineadas.
- Renderices texto anotado y quieras las formas de glifos más pequeñas para ruby.
Dado que esto depende de las características de la fuente, solo tiene efecto visible cuando la fuente activa contiene realmente esos glifos alternativos. Si la fuente no tiene variante tradicional, por ejemplo, el texto se renderiza sin cambios.
| Valor inicial | normal |
|---|---|
| Se aplica a | Todos los elementos. También se aplica a ::first-letter y ::first-line. |
| Heredable | Sí. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.fontVariantEastAsian = "ruby"; |
Sintaxis
Sintaxis de la propiedad CSS font-variant-east-asian
font-variant-east-asian: normal | <east-asian-variant-values> | <east-asian-width-values> | ruby | initial | inherit ;Ejemplo de la propiedad font-variant-east-asian:
Ejemplo de la propiedad CSS font-variant-east-asian con el valor 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>Aquí se puede ver que la propiedad font-variant-east-asian está configurada con el valor traditional. Puedes cambiarla por cualquiera de los valores mencionados en la tabla más abajo en esta página, incluida la variante simplified. Nota: La compatibilidad del navegador con esta propiedad es limitada. El ejemplo depende de fuentes del sistema que incluyan variantes tradicionales de Asia Oriental.
Resultado
![Propiedad CSS font-variant-east-asian](/uploads/media/default/0001/04/b5335cfd42c67834e22ae4ebce451467997f57b6.png "Propiedad CSS font-variant-east-asian" =420x)
Combinación de valores de ancho y variante
Puedes establecer un valor de variante y un valor de ancho al mismo tiempo. Las palabras clave pueden listarse en cualquier orden:
<!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>Aquí simplified selecciona la variante de glifo simplificada, mientras que full-width fuerza las formas de ancho completo para los dígitos, de modo que ocupan el mismo ancho de celda que los caracteres CJK circundantes.
Valores
| Valor | Descripción |
|---|---|
| normal | El uso de glifos alternativos no está habilitado. |
<east-asian-variant-values> | Selecciona una variante de glifo logográfico. Uno de los siguientes: jis78, jis83, jis90, jis04, simplified o traditional. |
<east-asian-width-values> | Controla el tamaño de las cifras usadas para caracteres de Asia Oriental: proportional-width (espaciado proporcional) o full-width (formas de ancho completo). |
| ruby | Fuerza el uso de glifos especiales más pequeños diseñados para caracteres ruby (anotación). |
| initial | Hace que la propiedad utilice su valor predeterminado (normal). |
| inherit | Hereda la propiedad de su elemento padre. |
Un valor válido combina como máximo una palabra clave de variante y una palabra clave de ancho (por ejemplo, jis90 full-width), o las palabras clave únicas normal o ruby.
Propiedades relacionadas
font-variant— la propiedad abreviada que incluye esta propiedad individual.font-feature-settings— control de bajo nivel de las mismas características OpenType.font-family— elige una fuente que realmente contenga glifos de variantes de Asia Oriental.