html5 - एचटीएमएल 5 कैनवास भर टेक्स्ट राइट टू वाम स्ट्रिंग के साथ




canvas arabic (2)

मैं अरबी में लिखी एक स्ट्रिंग ड्रॉ करने के लिए HTML5 केनवास के 2 डी संदर्भ पर भरत टेक्स्ट () विधि का उपयोग करने की कोशिश कर रहा हूं। यह पूरी तरह से काम करता है, जब तक मैं स्ट्रिंग के अंत में एक विराम चिह्न नहीं डालता। फिर विराम चिह्न का चिह्न स्ट्रिंग के गलत साइड पर दिखाई देता है (शुरुआत में, अंत के बजाय, जैसे कि यह एक एलटीआर नहीं rtl स्ट्रिंग था)। मैं प्रसंग .textAlign संपत्ति के साथ खेला जाता था, लेकिन ऐसा लगता है कि स्ट्रिंग को निर्दिष्ट स्थिति के मुताबिक खींचा जाता है, पाठ की वास्तविक दिशा में नहीं। क्या किसी को इस का समाधान पता है?

धन्यवाद।

अपडेट: मुझे पता चला है कि पृष्ठ पर कैनवास तत्व को "डायरे" विशेषता जोड़ना है। उदाहरण के लिए,

<canvas dir="rtl">

हालांकि, मुझे अभी भी पता नहीं है कि भरने के लिए भेजे गए व्यक्तिगत स्ट्रिंग्स के लिए dir विशेषता को कैसे बदलना है। कोई विचार?


आपको प्रत्येक व्यक्तिगत स्ट्रिंग के लिए दिशा सेट करने की आवश्यकता नहीं है। निम्नलिखित उदाहरण देखें जो उचित प्रदर्शन आदेश के लिए निहित बिड़ी नियंत्रण चिह्नों का उचित उपयोग भी दिखाता है:

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

और यहां आउटपुट है:


डीआईआर विकल्प सेट करना पूरे कैनवास के लिए है - व्यक्तिगत स्ट्रिंग के लिए जो बुरी तरह व्यवहार करते हैं, आप उद्धरण के बाद मैन्युअल रूप से आरटीएल मार्कर (यू + 200 एफ) जोड़ते हैं।





bidi