Menu
I am trying to use the fillText() method on an HTML5 Canvas' 2d Context to draw a string written in Arabic. It works perfectly, until I put a punctuation mark at the end of the string. Then the punctuation mark appears on the wrong side of the string (at the beginning, rather than the end, as if it were a ltr not rtl string). I played with the Context.textAlign property, but that seems to concern only the way the string is drawn relative to the specified position, not the actual direction of the text. Does anyone know of a solution to this?
Thanks.
Update: The answer I found is to add a "dir" attribute to the canvas element on the page. For example,
<canvas dir="rtl">
However, I still don't know how to change the dir attribute for individual strings sent to fillText. Any ideas?
975
To align HTML5 Canvas text, we can use the textAlign property of the canvas context, which can be set to start, end, left, center, or right. The alignment is relative to an imaginary vertical line at the x position of the text defind by fillText() or strokeText().
To draw text on a canvas, the most important property and methods are: font - defines the font properties for the text. fillText(text,x,y) - draws "filled" text on the canvas. strokeText(text,x,y) - draws text on the canvas (no fill)
To center canvas in HTML 5, include the canvas tag in div tag. Then we can center align the div tag. By doing so, the canvas is also center aligned.
You don't need to set the direction for each individual string. See the following example which also shows the proper use of implicit bidi control marks for proper display order:
<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>
And here is the output:
67
Setting the dir option is for the whole canvas - for individual strings that behave badly, you might consider manually adding an RTL marker (U+200F) after the quote.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
