Added in support for RTL text in the Text Game Object.

Author: photonstorm

v3/src/gameobjects/text/TextStyle.js

@@ -90,11 +90,6 @@ var TextStyle = new Class({
 
     syncFont: function (canvas, context)
     {
-        if (this.rtl)
-        {
-            canvas.dir = 'rtl';
-        }
-
         context.font = this.font;
         context.textBaseline = 'alphabetic';
 

v3/src/gameobjects/text/static/Text.js

@@ -1,11 +1,12 @@
-
+var AddToDOM = require('../../../dom/AddToDOM');
+var CanvasPool = require('../../../display/canvas/CanvasPool');
 var Class = require('../../../utils/Class');
-var GameObject = require('../../GameObject');
 var Components = require('../../components');
-var CanvasPool = require('../../../display/canvas/CanvasPool');
+var GameObject = require('../../GameObject');
+var GetTextSize = require('../GetTextSize');
+var RemoveFromDOM = require('../../../dom/RemoveFromDOM');
 var TextRender = require('./TextRender');
 var TextStyle = require('../TextStyle');
-var GetTextSize = require('../GetTextSize');
 
 var Text = new Class({
 
@@ -78,6 +79,8 @@ var Text = new Class({
         this.canvasTexture = null;
         this.dirty = false;
 
+        this.initRTL();
+
         this.setText(text);
 
         var _this = this;
@@ -89,6 +92,32 @@ var Text = new Class({
         });
     },
 
+    initRTL: function ()
+    {
+        if (!this.style.rtl)
+        {
+            return;
+        }
+
+        //  Here is where the crazy starts.
+        //  
+        //  Due to browser implementation issues, you cannot fillText BiDi text to a canvas
+        //  that is not part of the DOM. It just completely ignores the direction property.
+
+        this.canvas.dir = 'rtl';
+
+        //  Experimental atm, but one day ...
+        this.context.direction = 'rtl';
+
+        //  Add it to the DOM, but hidden within the parent canvas.
+        this.canvas.style.display = 'none';
+
+        AddToDOM(this.canvas, this.scene.sys.canvas);
+
+        //  And finally we set the x origin
+        this.originX = 1;
+    },
+
     setText: function (value)
     {
         if (Array.isArray(value))
@@ -249,13 +278,20 @@ var Text = new Class({
                 linePositionY += (textSize.lineSpacing * i);
             }
 
-            if (style.align === 'right')
+            if (style.rtl)
             {
-                linePositionX += textSize.width - textSize.lineWidths[i];
+                linePositionX = w - linePositionX;
             }
-            else if (style.align === 'center')
+            else
             {
-                linePositionX += (textSize.width - textSize.lineWidths[i]) / 2;
+                if (style.align === 'right')
+                {
+                    linePositionX += textSize.width - textSize.lineWidths[i];
+                }
+                else if (style.align === 'center')
+                {
+                    linePositionX += (textSize.width - textSize.lineWidths[i]) / 2;
+                }
             }
 
             if (this.autoRound)
@@ -309,7 +345,18 @@ var Text = new Class({
         out.data = data;
 
         return out;
+    },
+
+    preDestroy: function ()
+    {
+        if (this.style.rtl)
+        {
+            RemoveFromDOM(this.canvas);
+        }
+
+        CanvasPool.remove(this.canvas);
     }
+
 });
 
 module.exports = Text;