2012-06-22 18 views
11

No hablo árabe, pero necesito soporte específico para árabe en nuestra web. Necesito partes de palabras en árabe para estar en un <span> con un estilo diferente que el resto de la palabra. Cuando escribo dos personajes y شس, que se componen en la palabra شس, pero cuando se utiliza el formato HTMLPalabra árabe parcialmente coloreada en HTML

<span>ش</span>س 

estas letras no se concatenan justo en la salida.

enter image description here

En la imagen, salida deseada es en segunda línea, de salida real está en primera línea.

EDIT: Funciona en Firefox, pero no funciona en Chrome/Safari.

+0

Se ve bien aquí: http://jsbin.com/edimiq/2 –

+0

sus luces tienen la pantalla configurada en línea, ¿o no? – techfoobar

+0

Los tramos están en línea.Ahora veo que funciona en Firefox, pero no funciona en Chrome/Safari en mi Mac :( – Ondra

Respuesta

14

Inserte un ensamblador de ancho cero (por ejemplo, utilizando la referencia de entidad &zwj;) al final del contenido del elemento span: <span>ش&zwj;</span>س.

De manera más general, los carpinteros de ancho cero al principio y al final de cada elemento span, así como (sólo para estar más seguro) antes y después de cada elemento span, en situaciones en que el texto debe tener cursiva (unión) el comportamiento y span puede romperlo.

El problema se discutió e ilustró en la página Bidirectional text de Andreas Prilop.

Actualización: Desafortunadamente, parece que incluso &zwj; no ayuda en las versiones actuales de los navegadores WebKit. Parecen tratar el marcado de HTML como un comportamiento de ruptura de unión, sin importar qué.

Actualización 2: Como se describe en el comentario de @NasserAl-Wohaibi, el nuevo problema se puede resolver usando &zwj; dos veces. Sin embargo, en Safari actual (5.1.7) para Windows, no ayuda; de hecho, muestra incluso ش&zwj;س incorrecto mientras que sin el carpintero, muestra شس correctamente.

+0

+1, muy bueno. @Ondra, esto parece ser un candidato más elegible para la * respuesta aceptada *, fíjese –

+0

gracias por la respuesta! – Ondra

+0

Wow ... aprendí algo nuevo todos los días. Parecía una especie de problema de ligadura para mí, así que asumí que no había solución –

2

Esto es realmente un reported bug in WebKit, por lo tanto, presumiblemente afecta a todos los navegadores basados ​​en WebKit.

+0

Wow, un error del 2005. ¡Antes de que Chrome existiera! –

0

Como Jukka K. Korpela indicado, Esto es principalmente un error en la mayoría de los navegadores web basado en WebKit (cromo, safari, etc.).

Un simple truco que no sea el carbón TAMDEED o conseguir formas contextuales de las letras árabes sería poner la de anchura cero-Joiner (&zwj; o &#x200d;) antes/después de la letra que desea ser tratado como un solo árabe ligature - dos caracteres que componen otro. p.ej.

<p>عرب&#x200d;<span style="color: Red;">&#x200d;ي</span></p> 

demo: jsfiddle
ver también el informe webkit bug.

Cuestiones relacionadas