Estilos con el atributo lang

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

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.

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:

El punto que se debe destacar en esta sección es que esto no será 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.

El selector pseudo-clase :lang()

El fragmento XHTML:

<p>Es gentil darle la bienvenida a la gente en su propio idioma:</p>
<ul>
    <li xml:lang="zh-Hans" lang="zh-Hans">欢迎</li>
    <li xml:lang="zh-Hant" lang="zh-Hant">歡迎</li>
    <li xml:lang="el" lang="el">Καλοσωρίσατε</li>
    <li xml:lang="ar" lang="ar">اهلا وسهلا</li>
    <li xml:lang="ru" lang="ru">Добро пожаловать</li>
    <li xml:lang="din" 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: 1.2em;}
: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 asignados al 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 con 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 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: 1.2em;}
*[lang|="zh-Hant"] {font-family: PMingLiU,MingLiU, serif;}
*[lang|="zh-Hans"] {font-family: SimSum-18030,SimHei, serif;}
*[lang|="din"]     {font-family: "Doulos SIL", serif;}

Los selectores para chino usan valores específicos y sólo coincidirán con los valores indicados, mientras que los otros selectores del atributo de idioma son más genéricos. Por ejemplo, [lang|="en"] coincidirá satisfactoriamente con en-NZ.

Éste y el próximo selector funcionarán siempre y cuando indique el idioma del elemento al que quiere aplicarle estilo en el elemento en sí, a diferencia de .

Existe una diferencia significativa entre [lang="en"] y [lang|="en"]. El primer selector de idioma sólo coincidirá los elementos con un atributo de idioma igual a en, mientras que el segundo selector coincidirá cualquier elemento con un atributo de idioma que empiece con en. Por lo tanto, el segundo selector coincidirá con en-US, en-HK o en-CA. De hecho, lang(en) es una forma equivalente a [lang|="en"].

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.

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: 1.2em;}
*[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 deber ser exacta.

Selectores genéricos de identificación o clase

Actualmente, el método más compatible es utilizar un selector de CSS común de identificación o clase.

Funciona con la mayoría de los exploradores que admiten CSS. La desventaja es que agregar los atributos de clase consume tiempo y ancho de banda.

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

<p>Es gentil darle la bienvenida a la gente en su propio idioma:</p>
<ul>
    <li class="zhs" xml:lang="zh-Hans" lang="zh-Hans">欢迎</li>
    <li class="zht" xml:lang="zh-Hant" lang="zh-Hant">歡迎</li>
    <li xml:lang="el" lang="el">Καλοσωρίσατε</li>
    <li class="ar" xml:lang="ar" lang="ar">اهلا وسهلا</li>
    <li xml:lang="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: 1.2em;}
.zht 	{font-family: PMingLiU, MingLiU, serif;}
.zhs 	{font-family: SimSum-18030,SimHei, serif;}
.din	{font-family: "Doulos SIL", serif;}