La tecla de acceso 'n' lleva a la navegación de la página. Ir al inicio del contenido.

Este documento es una traducción. En caso de discrepancias o errores, la única versión normativa es el último original en inglés. Los derechos de autor originales corresponden al W3C, como puede verse al final de la página.

Traductor: English to Spanish Translation Team, Spanish Translation US.

s_gotoW3cHome Internacionalización
 

Estilos con atributos de idioma

Audiencia de destino: Los codificadores de XHTML/HTML (que usan editores o lenguaje de script), los desarrolladores scripts (PHP, JSP, etc.), los codificadores de CSS y todos aquellos que quieran utilizar información vinculada a los idiomas para aplicar estilos CSS a etiquetas.

Pregunta

¿Cuál es la forma más adecuada de asociar estilos CSS a un texto en un idioma particular dentro de un documento XML o HTML plurilingüe?

Información preliminar

Generalmente, se usan los estilos de presentación para controlar los cambios de fuente, los tamaños de fuente y las alturas de las líneas cuando se producen cambios de idioma en el documento. Esto puede resultar particularmente útil cuando se trata de chino simplificado frente al chino tradicional, en cuyo caso los usuarios tienden a preferir fuentes diferentes, aunque quizás estén usando muchos de los mismos caracteres. También puede servir para armonizar mejor el aspecto de las fuentes mezcladas específicas de un sistema de escritura, como cuando se combinan fuentes árabes y latinas.

En esta página se analizan las opciones disponibles para hacerlo de manera más eficaz.

Respuesta

Existen cuatro formas de aplicar diferentes estilos a diferentes idiomas en un documento plurilingüe mediante el uso de CSS. Se encuentran enumeradas aquí en orden de preferencia.

  1. el selector pseudo-clase :lang()
  2. un selector [lang |= "..."] que coincide con el comienzo del valor de un atributo de idioma
  3. un selector [lang = "..."] que coincide exactamente con el valor de un atributo de idioma
  4. un selector genérico de identificación o clase

Para obtener más información sobre la compatibilidad con estos selectores, consulte los resultados de la prueba.

El resto de esta página explica y brinda ejemplos de los modos en que difiere el uso de estos selectores.

Herencia de los valores de idioma

Una diferencia significativa entre :lang y los otros métodos es que reconoce el idioma del contenido del elemento aun si se indica el idioma fuera del elemento en cuestión.

Supongamos que, por ejemplo, en el futuro en un documento escrito en inglés, que contenga texto en japonés al que usted quisiera aplicar un estilo, se enfatiza el texto en japonés mediante propiedades CSS3 asiáticas, en lugar de usar letra cursiva (que no siempre funciona bien con los caracteres complejos del idioma japonés). Tal vez tenga las siguientes reglas en su hoja de estilo:

em           { font-style: italic; }
em:lang(ja)  { font-style: normal; font-emphasize: dot before; }

Ahora suponga que tiene el siguiente contenido, que el agente de usuario admite :lang y que la etiqueta html indica que se trata de un documento en inglés.

<p>Este es <em>inglés</em>, pero <span lang="ja">これは<em>日本語</em>です。</span></p>

Usted esperaría ver la palabra English enfatizada en cursiva y la palabra japonés enfatizada en texto regular con pequeños puntos sobre cada carácter, algo así como:

Imagen de lo que se acaba de describir.

El punto que se debe destacar en esta sección es que esto no sería posible si se utilizan los selectores [lang|="..."] o [lang="..."]. Para que funcionen, debe indicar el idioma de manera explícita en cada etiqueta em en japonés.

Es una diferencia importante entre la utilidad de estos distintos selectores.

¿Qué atributo de idioma?

El atributo lang se utiliza para identificar el idioma del texto que servido como HTML. El texto servido como XML debe utilizar el atributo xml:lang.

En el caso de que XHTML se sirva como texto/html, se le recomienda utilizar ambos atributos, dado que el analizador de HTML captará el atributo lang, mientras que si analiza el contenido como XML, su analizador de XML utilizará el atributo xml:lang.

En primer lugar, el artículo analizará las diferentes opciones de los estilos por idioma en HTML, con el atributo lang. Luego, sigue la sección que trata sobre cómo dar estilo a los documentos XML en función de xml:lang.

El selector pseudo-clase :lang()

El fragmento HTML:

<p>Es gentil darle la bienvenida a la gente en su propio idioma:</p>
<ul>
	<li lang="zh-Hans">欢迎</li>
	<li lang="zh-Hant">歡迎</li>
	<li lang="el">Καλοσωρίσατε</li>
	<li lang="ar">اهلا وسهلا</li>
	<li lang="ru">Добро пожаловать</li>
	<li lang="din">Kudual</li>
</ul>

podría tener los siguientes estilos:

body 		{font-family: "Times New Roman", serif;}
:lang(ar) 	{font-family: "Traditional Arabic", serif; font-size: 120%;}
:lang(zh-Hant) 	{font-family: PMingLiU,MingLiU, serif;}
:lang(zh-Hans) 	{font-family: SimSum-18030,SimHei, serif;}
:lang(din) 	{font-family: "Doulos SIL", serif;}

Observe que el griego y el ruso usan los estilos establecidos para el elemento body.

Ésta sería la manera ideal de aplicar estilo a los fragmentos de un idioma, pero es el único selector que puede aplicar estilos al contenido de un elemento cuando el idioma de ese contenido se indicó previamente en una página.

La regla para :lang(zh) coincidiría con elementos que incluyen un valor de idioma de zh. También podría coincidir con especificaciones más concretas del idioma, como zh-Hant, zh-Hans y zh-HK.

El selector :lang(zh-Hant) sólo coincidirá con elementos que tengan un valor de idioma de zh-Hant o que hayan heredado ese valor de idioma. Si la regla CSS especificó :lang(zh-HK), la regla no coincidiría con nuestro párrafo de muestra.

Un selector [lang|="..."] que coincide con el comienzo de un valor de un atributo

En el caso del ejemplo sobre etiquetas que vimos en la sección anterior, la hoja de estilo se podría escribir de la siguiente manera:

body 		   {font-family: "Times New Roman", serif;}
*[lang|="ar"] 	   {font-family: "Traditional Arabic", serif; font-size: 120%;}
*[lang|="zh-Hant"] {font-family: PMingLiU,MingLiU, serif;}
*[lang|="zh-Hans"] {font-family: SimSum-18030,SimHei, serif;}
*[lang|="din"]     {font-family: "Doulos SIL", serif;}

A diferencia de :lang, este selector funcionará únicamente para elementos que incluyen un atributo lang (consulte Herencia de los valores de idioma).

Existe una diferencia significativa entre este selector y [lang="..."]. Si bien [lang="..."] sólo coincidirá con los elementos cuando el valor del selector y del atributo sean idénticos, este valor del selector coincidirá con el valor del atributo de idioma que tenga otros valores separados por guiones. Por lo tanto, el selector [lang|="sl"] coincidiría con sl-IT, sl-nedis o sl-IT-nedis y el selector [lang|="zh-Hans"] también coincidiría con zh-Hans-CN.

Un selector [lang|="..."] que coincide con el valor de un atributo

El tercer método de especificación de reglas es usar un selector de atributos que coincida exactamente con el valor del atributo.

A diferencia de :lang, este selector funcionará únicamente para elementos que incluyen un atributo lang (consulte Herencia de los valores de idioma).

En el caso del ejemplo anterior sobre etiquetas, la hoja de estilo se podría escribir de la siguiente manera:

body                {font-family: "Times New Roman", serif; }
*[lang="ar"] 	    {font-family: "Traditional Arabic", serif; font-size: 120%;}
*[lang="zh-Hant"]   {font-family: PMingLiU,MingLiU, serif;}
*[lang="zh-Hans"]   {font-family: SimSum-18030,SimHei, serif;}
*[lang="din"] 	    {font-family: "Doulos SIL", serif;}

Tenga en cuenta que el uso de esta técnica en no coincidirá con en-AU. La coincidencia debe ser exacta.

Selectores genéricos de identificación o clase

Este método evita toda necesidad de hacer coincidir las identificaciones de idiomas y confía en las etiquetas de clase. El uso de un selector de CSS común de identificación o clase funciona con la mayoría de los navegadores que admiten CSS. La desventaja es que agregar los atributos de clase consume tiempo y ancho de banda.

En el caso del ejemplo previo sobre etiquetas, esto implicaría que cambiemos el código XHTML mediante el agregado de atributos de clase como se detalla a continuación:

<p>Es gentil darle la bienvenida a la gente en su propio idioma:</p>
<ul>
	<li class="zhs" lang="zh-Hans">欢迎</li>
	<li class="zht" lang="zh-Hant">歡迎</li>
	<li class="el" lang="el">Καλοσωρίσατε</li>
	<li class="ar" lang="ar">اهلا وسهلا</li>
	<li class="ru" lang="ru">Добро пожаловать</li>
	<li class="din" xml:lang="din" lang="din">Kudual</li>
</ul>

Luego podríamos tener los siguientes estilos:

body 	{font-family: "Times New Roman", serif;}
.ar 	{font-family: "Traditional Arabic", serif; font-size: 120%;}
.zht 	{font-family: PMingLiU, MingLiU, serif;}
.zhs 	{font-family: SimSum-18030,SimHei, serif;}
.din	{font-family: "Doulos SIL", serif;}

Uso de selectores de CSS con xml:lang

Tal como se mencionó anteriormente, en un documento que es analizado como XML, debe utilizar el atributo xml:lang (en lugar del atributo lang) a fin de expresar la información del idioma.

Uso de :lang

El uso de :lang es sencillo. Si se analiza el documento como HTML, el selector :lang buscará un valor del atributo lang. Sin embargo, si se analiza el documento como XML, el selector :lang buscará un valor del atributo xml:lang e ignorará cualquier valor del atributo lang.

Uso de attr= y attr|=

El uso de estos selectores implica tomar en cuenta algunas consideraciones adicionales.

La parte xml: del atributo xml:lang indica que éste es el atributo lang que se utiliza en el espacio de nombres XML. Espacios de nombres CSS3 describe la forma de manejar el xml:lang como un atributo en un espacio de nombres. Básicamente, debe indicar el espacio de nombres y luego reemplazar la coma por una barra vertical. Por ejemplo:

@namespace xml "http://www.w3.org/XML/1998/namespace"
*[xml|lang |= 'ar'] { ... }

o:

@namespace xml "http://www.w3.org/XML/1998/namespace"
*[xml|lang = 'ar'] { ... }

Las reglas @namespace deben seguir todas las reglas @charset y @import y preceder a todas las demás reglas tipo arroba no ignoradas y conjuntos de reglas en una hoja de estilo. Asimismo, tenga en cuenta que el URI de la identificación del espacio de nombres debe ser totalmente correcto.

Recursos alternativos

En el caso de los navegadores que desconocen los espacios de nombres, puede recurrir a los caracteres escapados. Sin embargo, observe que si intenta utilizar esta técnica con un navegador que tenga en cuenta los espacios de nombres, éste no funcionará. Al momento de la escritura, que incluye Firefox, Safari, Opera y Chrome (e Internet Explorer no admite la visualización de páginas XML), si considera que es necesario, debe utilizar este enfoque además de los selectores basados en los espacios de nombres.

Para realizar esto, no es necesario que cuente con ninguna indicación @namespace; simplemente debe contar con alguna de las indicaciones que aparecen a continuación:

*[xml\:lang |= '..'] { ... } 

o:

*[xml\:lang = '..'] { ... } 

A propósito

Utilicé los códigos de idioma "zh-Hant" y "zh-Hans". Estos códigos de idioma no representan idiomas específicos. "zh-Hant" indicaría chino escrito en el sistema de escritura chino tradicional. De manera similar, “zh-Hans” representa el chino escrito en el sistema de escritura chino simplificado. Esto podría hacer referencia al mandarín o a muchos otros idiomas chinos.

Hasta hace poco tiempo, los códigos "zh-TW" y "zh-CN" se usaban para indicar versiones tradicionales o simplificadas de escritura china, respectivamente. En realidad, "zh-TW" indicaría el chino hablado en Taiwán, aunque en Taiwán se habla más de un idioma chino. Del mismo modo, "zh-CN" representa el chino hablado en China (RPC). Esto podría hacer referencia al mandarín o a cualquier otro idioma chino.

Algunos de los exploradores web modernos usarán la presencia de las etiquetas de idioma "zh-CN" y "zh-TW" para seleccionar las fuentes predeterminadas para mostrar el texto cuando el diseñador de la página web no indique una fuente (para obtener más información, consulte los resultados de la prueba).

Si tiene que usar etiquetas de idioma para diferenciar entre los idiomas chinos, el registro de subetiquetas de idioma IANA tiene códigos de idioma más precisos para una serie de idiomas chinos.

Dinos qué piensas (en Inglés).

Suscripción a feed RSS.

Nuevos recursos

Noticias de la página de inicio

Twitter (Noticias de la página de inicio)

‎@webi18n

Lecturas complementarias

De: Andrew Cunningham, State Library of Victoria. Cambiado por: Richard Ishida, W3C. Traductor: English to Spanish Translation Team, Spanish Translation US..

XHTML 1.0 válido
CSS válido
Codificado en UTF-8

Traducido del inglés con fecha 2009-11-19. Traducción modificada por última vez el 2011-02-25 8:07 GMT.

Para ver el historial de cambios del documento, busque qa-css-lang en la bitácora de internacionalización.