html - style - ¿Por qué se representa un signo de puntuación al principio con la dirección: rtl?

title tag html

Question

Esto es más una especie de curiosidad. Mientras trabajaba en una aplicación web multilingüe, noté que ciertos caracteres como los signos de puntuación (!?.;,) Al final de un elemento de bloque se representan como si se colocaran al principio, en lugar de eso, cuando la dirección de escritura es de derecha a izquierda (como es el caso de ciertos idiomas asiáticos que no hablo).

En otras palabras, la cuerda.

Hello, World!

se representa como

!Hello, World

cuando se coloca en un bloque div con direction: rtl

Esto se vuelve aún más evidente si el texto se divide en dos partes y se le dan colores diferentes: una parte contigua de texto al final se representa en dos regiones separadas:

http://jsfiddle.net/22Qk9/

¿Cuál es el punto de este comportamiento? Supongo que esto debe ser una peculiaridad de (¿todos?) Idiomas de derecha a izquierda que son manejados automáticamente por el navegador, por lo que no necesito preocuparme por eso, ¿o debería?

Answer 1

Esto es solo una especulación de por qué sucedería esto.

Mi conjetura es que la propiedad direction: rtl agrega un fenómeno de "bidireccionalidad", donde también afecta la puntuación. Esto se usa para los scripts en árabe o hebreo, donde la puntuación relacionada se mueve al principio de la línea.

fuente: http://www.w3.org/TR/2013/WD-css-writing-modes-3-20131126/#text-direction

Pero ¿por qué la palabra está al final?

Mi conjetura es que este Unicode no se ve como uno de los idiomas compatibles que tiene efecto.

jsFiddle

Como puede ver, el texto árabe tiene efecto.

Por lo tanto, se debe a que originalmente está destinado para el árabe, el hebreo o cualquier otro "idioma mixto", donde solo vio la última puntuación como uno de los UNICODES admitidos, ya que la palabra en sí no era uno de los idiomas admitidos de UNICODE.

Answer 2

La razón es que el signo de exclamación "!" Tiene la clase BiDi EN [Otros puntos neutrales], lo que significa efectivamente que se adapta a la direccionalidad del texto circundante. En el caso de ejemplo, por lo tanto, se coloca a la izquierda del texto anterior. Esto es bastante correcto para los idiomas escritos de derecha a izquierda: el signo de puntuación final aparece al final , es decir, a la izquierda.

Normalmente, utiliza la direction: rtl código CSS direction: rtl o, preferiblemente, el atributo HTML dir=rtl para textos en un idioma que se escribe de derecha a izquierda, y solo para ellos. Para ellos, este comportamiento es una solución, no un problema.

Si, en cambio, usa direction: rtl o dir=rtl solo para efectos especiales, como hacer columnas de tablas de derecha a izquierda, debe considerar las implicaciones. Por ejemplo, en el caso de la tabla, necesitaría establecer la dirección a ltr para cada celda de la tabla (a menos que desee que se representen como texto principalmente de derecha a izquierda).

Si tiene, digamos, una oración en inglés citada dentro de un bloque de texto en árabe, entonces necesita establecer la direccionalidad de un elemento que contiene el texto en inglés a ltr , por ejemplo

<blockquote dir=ltr>Hello, World!</blockquote>

Un caso similar (solo con texto en árabe en inglés) se discute como caso de uso 6 en el documento W3C. Lo que necesita saber sobre el algoritmo bidi y el marcado en línea (que tiene algunas rarezas, como el uso del marcado de cita para el texto citado). contra las recomendaciones del W3C).

Answer 3

La respuesta aceptada https://.com/a/20799360/477420 funciona si puede controlar el marcado / CSS del valor, si no tiene control sobre HTML, podría funcionar el enfoque siguiente.

Si no sabe si la página se procesará como RTL o LTR pero algún texto es definitivamente LTR (es decir, solo en inglés), puede ajustar el valor con marcas LRE / PDF para indicar que es la región LTR. El texto se convertirá en LTR independientemente de la dirección LTR o RTL de la página.

Esto funciona cuando tiene algún código que intenta representar texto sin la capacidad de cambiar el marcado de cómo se mostrará exactamente en la página. Es decir, el valor de representación para el campo "mosaico de canción" o "nombre de la compañía" en algún componente secundario anidado (o en el lado del servidor) sin la capacidad de controlar los elementos HTML circundantes.

Un inconveniente de este y otros enfoques similares (como la propuesta de LRM en esta pregunta) con la adición de marcas al texto es que copiar y pegar dicho valor de la página HTML resultante generalmente conservará las marcas pero no son visibles / ancho cero. Mientras que para la mayoría de los casos está bien considerar si ese es un problema para usted.

Código de muestra aproximado (algunas compañías tienen "Inc." al final que terminará con un punto al principio cuando se muestre como está en la página RTL):

 // comanyName = "Alphabet Inc." - really likes dot at the end including RTL
 if(stringIsDefinitelyAscii(companyName))
 {
     companyName = "/u202A" + companyName + "/u202C"
 }
 return companyName;

Los detalles sobre los símbolos LRE / PDF se pueden encontrar en https://unicode.org/reports/tr9/#Explicit_Directional_Embeddings :

LRE U + 202A INCORPORACIÓN IZQUIERDA A DERECHA Trate el siguiente texto como incrustado de izquierda a derecha.

PDF U + 202C FORMATO DIRECCIONAL POP Finalice el alcance del último LRE, RLE, RLO o LRO.

Algunos métodos para averiguar si la cadena tiene caracteres RTL se pueden encontrar en ¿Cómo detectar si un personaje pertenece a un idioma de derecha a izquierda? , JavaScript: ¿cómo comprobar si el carácter es RTL? , ¿Cómo detectar si una cadena contiene algún carácter de derecha a izquierda? .

Answer 4

Si desea corregir este comportamiento, agregue el carácter LRM ‎ en el final. Es un carácter no = imprimible.

Fuente: http://dotancohen.com/howto/rtl_right_to_left.html

Ejemplo: http://jsfiddle.net/yobjj6ed/