2012-01-22 17 views
8

HTML5 Canvasの2dコンテキストでfillText()メソッドを使用して、アラビア語で書かれた文字列を描画しようとしています。文字列の最後に句読点を置くまで、完全に動作します。その後、句読点は文字列の間違った側に現れます(最初の文字列ではなく、最後の文字列であるかのように)。私はContext.textAlignプロパティで演奏しましたが、文字列が実際のテキストの方向ではなく、指定された位置を基準にして描かれる方法にしか関係していないようです。誰かがこれに対する解決策を知っていますか?HTML5キャンバス右から左の文字列を含むfillText

ありがとうございました。

更新:私が見つけた答えは、ページ上のキャンバス要素に「dir」属性を追加することです。たとえば、

<canvas dir="rtl"> 

ただし、fillTextに送信される個々の文字列のdir属性を変更する方法はまだわかりません。何か案は?

+0

銃を飛ばして申し訳ありません。私は仕様で解決策を見つけました:http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-directionality 明らかに、 "dir"要素をオンに設定する必要がありますキャンバスを「rtl」、つまり「」に設定します。 – user1145886

+0

解決策を回答として追加してください。ありがとう! –

+0

どのようなフォントを使用しますか?フォントの名前は何ですか? –

答えて

1

dirオプションを設定するのはキャンバス全体です。ひどい振る舞いをする個々の文字列については、引用符の後にRTLマーカー(U + 200F)を手動で追加することを検討することもできます。

+0

これがどのように成し遂げられたか詳しく教えてください。 – omerkarj

9

個々の文字列ごとに方向を設定する必要はありません。また、適切な表示順序の暗黙的な双方向制御マークの適切な使用を示した次の例を参照してください:

<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> 

そして、ここでは、出力されます。 as rendered by Chrome <code>26.0.1410.64 m</code> on MS Windows XP SP3

+0

アラビア語の文字をキャンバスに一度に1つずつ描画する方法を知っていますか? – sq1020

+0

これは開発者にとって透過的でなければなりません。テキストレイアウトエンジンはそれを処理する必要があります。それは動作しない特定のシナリオがありますか? – Shervin

+0

私が従うアプローチはこれに似ています:http://stackoverflow.com/questions/7665342/can-i-do-by-character-text-color-in-html5-canvas - 概念的には、最初の解決策文字列全体ではなく文字ごとにcontext.fillTextを一度呼び出すため、アラビア語の文字を使用する場合は接続しません。 – sq1020

0

あなたはそれでそれを行うことができます。
CTXを。 textAlign = "end";
または
ctx.textAlign = "右"

そして、それは再び左から右にする:
ctx.textAlignは= "開始";

関連する問題