10 Replies Latest reply on Jan 13, 2011 2:14 PM by ozDiGennaro

    Right-to-Left text - Flex 3 and 4 problems with TextField

    ozDiGennaro Level 1

      I have an application that requires exact location of mouse clicks in text.  TextField support this, but I cannot find another text class that does.

      The application also requires European languages and Semitic languages (right-to-left).

       

      Usin Flex 3 or Flex 4, I can display right-to-left text and find the click locations, although I have to add a workaround in Flex 3 (at least) for locating the char index from the mouse click location (x,y).

       

      Problem:  If the TextField is selectable (which is desirable for my application) and the user selects text, the sequence of characters is scrambled.

       

      Problem:  If the method setTextFormat is used on a subset of the characters, the sequence of characters is scrambled.

       

      Big Problem:  There were verbal promises that this would be fixed in Flex 4, but it fails for me.  Failing code:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/mx"
                     creationComplete="creationComplete()"
                     minWidth="955" minHeight="600">
         
          <fx:Script>
              <![CDATA[
                  import mx.charts.BubbleChart;
                  import mx.containers.Canvas;
                  import mx.controls.Button;
                  import mx.core.UIComponent;
                 
                  var tf:TextField = new TextField();
                 
                  public function creationComplete():void {
                     
                      tf.x = 100;
                      tf.y = 50;
                     
                      tf.width = 500;
                     
                      tf.text = "א בְּרֵאשִׁית בָּרָא אֱלֹהִים אֵת הַשָּׁמַיִם וְאֵת הָאָרֶץ";
                     
                      var tformat:TextFormat = new TextFormat();
                      tformat.size = 30;
                      tformat.align = "right";
                     
                      var l:int = tf.getLineLength(0);
                      tf.setTextFormat(tformat,0,l);

       

                      var tb:UIComponent = new UIComponent;
                      tb.addChild(tf);
                     
                      var c:Canvas = new Canvas();
                      c.addChild(tb);
                     
                      this.addElement(c);
                     
                      var b:Button = new Button();
                      b.label = "switch";
                      b.x = b.y = 20;
                      b.addEventListener(MouseEvent.CLICK,buttonSwitch);
                     
                      c.addChild(b);
                     
                  }
                 
                  private function buttonSwitch(e:MouseEvent):void {
                      trace("button");

       

                      var tformat:TextFormat = new TextFormat();
                      tformat.size = 30;
                      tformat.align = "right";
                      tformat.color = 0xFF0000;

       

                      tf.setTextFormat(tformat,0,10);
                     
                  }
              ]]>
          </fx:Script>
         
      </s:Application>