• Tutorials
3 July 2008

CSS que escribe nuevas idiomas

Usted puede los cambios de control de tamaños de fuente y la línea alturas. El cambio en lengua ocurre en el documento entonces que usted tendrá que incorporar estilos de la presentación.

Hay cuatro maneras de aplicar diversos estilos a diversos idiomas en un documento multilingüe usando CSS2. Son:

: selector a [lang de la pseudo-clase
del lang () |= “…”] selector que empareja el principio del valor de un selector de la cualidad
a [lang de la lengua = “…”] que empareje exactamente el valor de una cualidad de la lengua
una clase genérica o selector de la identificación

Herencia de los valores de la lengua
Una diferencia importante en medio: el lang y los otros métodos es que hace hacia fuera la lengua de contenido del elemento: Por ejemplo:

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

Ahora asuma que usted tiene el contenido siguiente que el agente del usuario apoya: el lang, y ése la etiqueta del HTML indica que esto es un documento inglés.
<p>This es <em> Inglés</em> but <span lang=”ja” xml:lang=”ja”>これは<em>日本語</em>です。</span></p>

Usted esperaba ver la palabra inglesa acentuada puesta en letra itálica, pero la palabra japonesa acentuada en texto regular con los puntos pequeños sobre cada carácter, algo similar:

Esto es una diferencia significativa entre la utilidad de estos diversos selectores.

: selector de la pseudo clase del lang ()

La mirada en este fragmento y usted de XHTML entenderá:
El fragmento de XHTML:

<p> Es cortés dar la bienvenida a la gente en su propia lengua:</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>

podía tener labrar siguiente:

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;}

A [lang|="..."] selector que empareja el principio de un valor de una cualidad

Por ejemplo:

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;}

A [lang="..."] selector that matches the value of an attribute

For the earlier example of markup, the stylesheet could be written as:
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 eso que usa este en del acercamiento no emparejará el en-AU. El fósforo tiene que ser exacto.

La clase genérica o los selectores de la identificación
por el ejemplo arriba, esto nos requeriría cambiar el código de XHTML agregando cualidades de la clase como sigue:
<p> Es cortés dar la bienvenida a la gente en su propia lengua:</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>

We could then have the following styling:
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;}

Tags:

Esta entrada fue publicada en3 July 2008a las14:36 y esta registrada en Tutorials. Puedes seguir cualquier comentario a esta entrada a través delRSS 2.0feed. Puedes dejar un comentario, o rastrear desde tu sitio web

Dejar un comentario

Name (*)
Mail (will not be published) (*)
URI
Comentario