tag - justificar texto html
los soportes se muestran incorrectamente para el estilo de visualizaciĆ³n de derecha a izquierda (6)
El código html
<html dir="rtl">
<p>hello (world)</p>
</html>
Verás una página como esta:
(hello (world
Sin embargo, si cambio el código html en
<html dir="rtl">
<p>hello (world) again</p>
</html>
Entonces el texto se muestra normalmente:
hello (world) again
¿Alguien puede explicar por qué sucede esto? ¿Cómo arreglar el primer ejemplo?
Mi navegador es chrome
Agregar el carácter rlm especial en css antes y después de que su elemento resolviera todos los casos que he encontrado en Firefox y Chrome:
*:after {
content: "/200E";
}
*:before {
content: "/200E";
}
Esta es la representación correcta del corchete para el texto de derecha a izquierda (aparentemente). Este artículo da un poco más de información.
http://www.i18nguy.com/markup/right-to-left.html
El atributo dir
ahora está depreciado.
O mejor puedes probar en CSS.
*:after {
content: "/200E";
}
Si alguien tiene este problema en WordPress, puedes probar esta solución:
https://gist.github.com/dtbaker/b532e0e84a8cb7f22f26
function dtbaker_rtl_bracket_hack($content){
if(is_rtl()){
$content = preg_replace(''#<p>([^<]+)/)/s*</p>#'',''<p>$1)‎</p>'',$content);
$content = preg_replace(''#<p>/s*/(([^<]+)</p>#'',''<p>‎($1</p>'',$content);
}
return $content;
}
add_filter(''the_content'',''dtbaker_rtl_bracket_hack'',100,1);
Solo necesita agregar el carácter LRM después del último corchete. Entidad HTML: ‎
<html dir="rtl">
<body>
<p>hello (world)‎</p>
</body></html>
Esto le indica al navegador que interprete los corchetes como una lectura de izquierda a derecha.
Utilice ‏
antes (
. ej.
<html dir="rtl">
<body>
<p>hello ‏(world)</p>
</body></html>
si está utilizando javascript / svg Dom entonces
aText = $(''<span>'').html(aText.replace("(","‏(")).text();
$("<p>").html(aText);
para otros personajes especiales
function getRTLText(aText,aChar) {
if ( aText != undefined && aText.replace){
aChar = (aChar === undefined )?"(":aChar;
aText = $(''<span>'').html(aText.replace(aChar,"‏"+aChar)).text();
}
return aText;
}
y función de llamada
getRTLText("March / 2018","/");