2 Replies Latest reply on Apr 11, 2011 4:44 PM by mkmichaels

    Text Width Accuracy

    mkmichaels

      Hello Adobe Forums,

       

      I have an application that accepts user-inputted text up to a maximum width in pixels.  Unfortunately, I'm having difficulty determining accurate maximum text line widths.  Depending on which characters are inputted, the reported widths differ from how they appear on-screen.  For instance, using TextLineMetrics, typing 10 'W' characters yields a width of 110 while typing enough 'i' characters to appear as long as the 10 'W' characters (about 42 'i' characters) yields a width of 126.

       

      I've put together a little test app using SDK 4.0 that replicates the issue.  Type wide characters (like 'W') on one line and thin characters (like 'i') on the other line and refer to the trace statements to easily see the issue:

       

      <?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" minWidth="955" minHeight="600" creationComplete="init()">
         
          <fx:Script>
              <![CDATA[
                  import spark.events.TextOperationEvent;
                 
                  private function init():void
                  {
                      input1.addEventListener(TextOperationEvent.CHANGE, getTextWidth);
                      input2.addEventListener(TextOperationEvent.CHANGE, getTextWidth);
                  }
                 
                  private function getTextWidth(e:Event):void
                  {
                      var input:TextInput = e.target as TextInput;
                      var metrics:TextLineMetrics = input.measureText(input.text);
                      trace(input.id + ":   width -> " + metrics.width + "   chars -> " + input.text.length);
                  }
                 
              ]]>
          </fx:Script>
         
          <s:layout>
              <s:VerticalLayout/>
          </s:layout>
         
          <s:TextInput id="input1" width="400" />
          <s:TextInput id="input2" width="400" />
         
      </s:Application>

       

      Does anyone know why this inaccuracy exists? Is there a more accurate way to measure text? Am I doing something wrong? I'm open to all suggestions.  From my web research it seems like this is an ongoing issue but I haven't been able to uncover why.

       

      Thanks for your help!

        • 1. Re: Text Width Accuracy
          Flex harUI Adobe Employee

          The doc for measureText() says it doesn't work for Spark components.

           

          I would use the textDisplay.contentWidth:

           

              <fx:Script>

                  <![CDATA[

                      import spark.events.TextOperationEvent;

                      import spark.components.RichEditableText;

                       

                      private function init():void

                      {

                          input1.addEventListener(TextOperationEvent.CHANGE,

          getTextWidth);

                          input2.addEventListener(TextOperationEvent.CHANGE,

          getTextWidth);

                      }

                       

                      private function getTextWidth(e:Event):void

                      {

                          var input:TextInput = e.target as TextInput;

                          var w:Number =

          RichEditableText(input.textDisplay).contentWidth;

                          trace(input.id + ":   width:" + w + "   chars:" +

          input.text.length);

                      }

                       

                  ]]>

              </fx:Script

          • 2. Re: Text Width Accuracy
            mkmichaels Level 1

            I can't believe I missed that note in the docs, but sure enough it's there.  Regardless, I was unfamiliar with contentWidth before you suggested it.  That did the trick wonderfully.

             

            Thanks for your help!