sirven - etiquetas html5 pdf
HTML de HTML5 texto de relleno con cadena de derecha a izquierda (2)
Establecer la opción dir es para todo el lienzo: para cadenas individuales que se comportan mal, puede considerar agregar manualmente un marcador RTL (U + 200F) después de la cita.
Estoy tratando de usar el método fillText () en un Contexto 2D de Canvas Canvas para dibujar una cadena escrita en árabe. Funciona perfectamente, hasta que pongo un signo de puntuación al final de la cadena. Luego, el signo de puntuación aparece en el lado equivocado de la cadena (al principio, en lugar de al final, como si fuera una cadena ltr no rtl). Jugué con la propiedad Context.textAlign, pero eso parece referirse solo a la forma en que se dibuja la cadena en relación con la posición especificada, no a la dirección real del texto. ¿Alguien sabe de una solución a esto?
Gracias.
Actualización: la respuesta que encontré es agregar un atributo "dir" al elemento canvas en la página. Por ejemplo,
<canvas dir="rtl">
Sin embargo, todavía no sé cómo cambiar el atributo dir para cadenas individuales enviadas a fillText. ¿Algunas ideas?
No necesita establecer la dirección para cada cadena individual. Consulte el siguiente ejemplo que también muestra el uso adecuado de las marcas de control bidi implícitas para el orden de visualización correcto:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<canvas id="myCanvas" width="700" dir="rtl" height="250" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script type="text/javascript" charset="utf-8">
var c = document.getElementById("myCanvas");
var cArabic = c.getContext("2d");
cArabic.font="25px Arial";
// Simple Sentence with punctuation.
var str1 = "این یک آزمایش است.";
// Few sentences with punctuation and numerals.
var str2 = "۱ آزمایش. 2 آزمایش، سه آزمایش & Foo آزمایش!";
// Needs implicit bidi marks to display correctly.
var str3 = "آزمایش برای Foo Ltd. و Bar Inc. باشد که آزموده شود.";
// Implicit bidi marks added; "Foo Ltd.‎ و Bar Inc.‎"
var str4 = "آزمایش برای Foo Ltd. و Bar Inc. باشد که آزموده شود.";
cArabic.fillText(str1, 600, 60);
cArabic.fillText(str2, 600, 100);
cArabic.fillText(str3, 600, 140);
cArabic.fillText(str4, 600, 180);
</script>
</body>
</html>
Y aquí está el resultado: