HTML5 Riempimento area di testo con stringa da destra a sinistra

Sto provando a utilizzare il metodo fillText() su un contesto 2Dd Canvas per disegnare una stringa scritta in arabo. Funziona perfettamente, finché non metto un segno di punteggiatura alla fine della stringa. Quindi il segno di punteggiatura appare sul lato sbagliato della stringa (all'inizio, piuttosto che alla fine, come se fosse una stringa ltr not rtl). Ho giocato con la proprietà Context.textAlign, ma sembra riguardare solo il modo in cui la stringa viene disegnata rispetto alla posizione specificata, non la direzione effettiva del testo. Qualcuno sa di una soluzione a questo?HTML5 Riempimento area di testo con stringa da destra a sinistra

Grazie.

Aggiornamento: La risposta che ho trovato è di aggiungere un attributo "dir" all'elemento canvas nella pagina. Ad esempio,

<canvas dir="rtl">

Tuttavia, ancora non so come cambiare l'attributo dir per le singole stringhe inviate a fillText. Qualche idea?

fonte

2012-01-22 user1145886

Siamo spiacenti per il salto della pistola. Ho trovato la soluzione nelle specifiche: http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-directionality Apparentemente, è necessario impostare l'elemento "dir" su la tela su "rtl", cioè "

Per favore aggiungi la tua soluzione come risposta. Grazie! –

quale font usi? Qual è il nome del carattere? –

L'impostazione dell'opzione dir è per l'intero canvas: per le singole stringhe che si comportano male, è possibile prendere in considerazione l'aggiunta manuale di un marcatore RTL (U + 200F) dopo la citazione.

fonte

2012-05-06 16:21:10 Ansari

potresti per favore elaborare o dare un esempio su come è fatto? – omerkarj

Non è necessario impostare la direzione per ogni singola stringa. Vedere l'esempio seguente che mostra anche l'uso corretto dei marchi di controllo bidi impliciti per una corretta ordine di visualizzazione:

<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.&lrm; و Bar Inc.&lrm;" 
     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>

Ed ecco l'output: as rendered by Chrome <code>26.0.1410.64 m</code> on MS Windows XP SP3

fonte

2013-04-12 19:57:39 Shervin

Sapresti come connettere le lettere arabe se le stai disegnando una alla volta su tela? – sq1020

Questo dovrebbe essere trasparente per lo sviluppatore. Il motore di layout del testo dovrebbe occuparsene. Avete uno scenario specifico in cui non funziona? – Shervin

L'approccio che sto seguendo è simile a questo: http://stackoverflow.com/questions/7665342/can-i-do-by-character-text-color-in-html5-canvas - Concettualmente, la prima soluzione funziona bene ma quando si usano le lettere arabe, non si connettono in questo caso perché invocate context.fillText una volta per ogni lettera anziché l'intera stringa. – sq1020

si può fare con questo:
CTX. textAlign = "fine";
o
ctx.textAlign = "right"

E per rendere ancora una volta da sinistra a destra:
ctx.textAlign = "start";

fonte

2018-01-28 18:14:04 mansim

HTML5 Riempimento area di testo con stringa da destra a sinistra

risposta

Problemi correlati