13 Replies Latest reply on Jun 16, 2009 7:30 AM by philippe.sabourin

    TextArea FontSize not updating all text

    philippe.sabourin

      Hey guys,

       

      I'm trying to set the font size of a few TextArea's after the user selects the size of the text they want. However, this is only changing the last line of the textarea (and any new lines after those are entered) instead of the entire text. These TextAreas hold chat messages and are not editable. Here is what I tried first:

       

      public function setFontSize(size:Number):void
      {

          chatLog.setStyle("fontSize",size);

      }

       

      and then I tried this:

       

      public function setFontSize(size:Number):void
      {

          if(chatLog.text.length > 0){

              var allText:TextRange = new TextRange(chatLog, false, 0, chatLog.text.length-1);

              allText.fontSize = size;

          }

          chatLog.setStyle("fontSize",size);

      }

       

      Neither of them seemed to change the font size of anything but the last line. The example i've found online and on the adobe site have both shown this to work. I use the htmlText property to set the text. Any ideas?

       

      Thanks,

      Philippe

        • 1. Re: TextArea FontSize not updating all text
          Flex harUI Adobe Employee

          If you have font and size tags in the HTML they'll override the styles.

           

          Alex Harui

          Flex SDK Developer

          Adobe Systems Inc.

          Blog: http://blogs.adobe.com/aharui

          • 2. Re: TextArea FontSize not updating all text
            philippe.sabourin Level 1

            The only tags I have are <a> and <u> tags. Would those break the changing of the font size?

            • 3. Re: TextArea FontSize not updating all text
              Flex harUI Adobe Employee

              Try reading back the htmlText and see what tags its thinks are in play.  Also, if you are using flash.text.styleSheet that also overrides Flex styles

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              • 4. Re: TextArea FontSize not updating all text
                philippe.sabourin Level 1

                So I added a trace right after the setting of the size:

                chatLog.setStyle("fontSize",size);


                trace(chatLog.htmlText);

                 

                The first time I change the font size, here is the output (from 10 to 12):

                <TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Verdana" SIZE="10" COLOR="#CBFF70" LETTERSPACING="0" KERNING="0">(<A HREF="event:+JIM+" TARGET=""><U>+JIM+</U></A>) flo flo flo</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Verdana" SIZE="10" COLOR="#CBFF70" LETTERSPACING="0" KERNING="0">(<A HREF="event:+JIM+" TARGET=""><U>+JIM+</U></A>) I&apos;m back in sol where are you the</FONT></P></TEXTFORMAT>

                After the above, however, the second line there shows up with size 12 font, even though there it is listed with size 10.

                 

                 

                Then I change the font size again, and here is the second output (from 12 to 14):

                <TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Verdana" SIZE="10" COLOR="#CBFF70" LETTERSPACING="0" KERNING="0">(<A HREF="event:+JIM+" TARGET=""><U>+JIM+</U></A>) flo flo flo</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Verdana" SIZE="12" COLOR="#CBFF70" LETTERSPACING="0" KERNING="0">(<A HREF="event:+JIM+" TARGET=""><U>+JIM+</U></A>) I&apos;m back in sol where are you the</FONT></P></TEXTFORMAT><TEXTFORMAT LEADING="2"><P ALIGN="LEFT"><FONT FACE="Verdana" SIZE="12" COLOR="#CBFF70" LETTERSPACING="0" KERNING="0">(<A HREF="event:floflo93" TARGET=""><U>floflo93</U></A>) standoff</FONT></P></TEXTFORMAT>

                After this, the first line shows up with size 10, the 2nd with size 12 (which is now reflected in the output), and the 3rd with size 14, which is not yet reflected.

                 

                Note that when I add a line I do the following (essentially, that string is actually built from a few different variables, etc):

                chatLog.htmlText += "(<A HREF="event:+JIM+"><U>+JIM+</U></A>) I&apos;m back in sol where are you the" + "\n";

                 

                I'm sorry for the HTML mess, but I was hoping this would give you the best idea of what is going on.  As far as I know, I do not use flash.text.styleSheet.

                 

                Thanks,

                Philippe

                • 5. Re: TextArea FontSize not updating all text
                  Flex harUI Adobe Employee

                  Can you create a test case in 20 lines of code and post it?

                   

                  Alex Harui

                  Flex SDK Developer

                  Adobe Systems Inc.

                  Blog: http://blogs.adobe.com/aharui

                  • 6. Re: TextArea FontSize not updating all text
                    philippe.sabourin Level 1

                    I've attached a flex project archive with an simple application that can reproduce the issue. All you have to do is hit "AddText" a few times, then "SwitchFont" and repeat.

                     

                    Thanks,

                    Philippe

                    • 7. Re: TextArea FontSize not updating all text
                      Flex harUI Adobe Employee

                      Finally got around to this, but the zip file seems to be corrupted.

                       

                      Since you are adding text, I would be suspicious of the selection range.  Another thing to try would be to reset then entire htmlText before setting the fontSize

                       

                      Alex Harui

                      Flex SDK Developer

                      Adobe Systems Inc.

                      Blog: http://blogs.adobe.com/aharui

                      • 8. Re: TextArea FontSize not updating all text
                        philippe.sabourin Level 1

                        I was able to open the zip here, not sure what's going on. Anyways, I've extracted the main file for you, and have quoted it below (attaching didnt work).

                         

                        When you say reset, do you mean storing the entire text in a seperate variable and then setting it to the htmlText before setting the font size? I thought about trying this before but seemed silly to have to store the same text twice.

                         

                        Thanks,

                        Philippe

                         

                        <?xml version="1.0" encoding="utf-8"?>
                        <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                                  <mx:Script>
                                  <![CDATA[               
                                       private var size:int = 10;
                                       
                                       public function newChatMessage(user:String, message:String):void
                                       {
                                            var text:String = "";
                                            text = "<u><a href='event:" + user + "'>" + user + "</a></u>";
                                            
                                            text = "("+text+") ";
                                            
                                            text += message + "<br\>";
                                            
                                            chatLog.htmlText += text;
                                       }
                                       
                                       public function setFontSize():void
                                       {
                                            size += 2;
                                            if(size > 14)
                                                 size = 8;
                                            chatLog.setStyle("fontSize",size);
                                       }
                                  ]]>
                             </mx:Script>
                             <mx:VBox width="100%" height="100%">
                                  <mx:TextArea id="chatLog" width="100%" height="100%"/>
                                  <mx:HBox>
                                       <mx:Button label="SwitchFont" click="setFontSize()"/>
                                       <mx:Button label="AddText" click="newChatMessage('testuser','chat message')"/>
                                  </mx:HBox>
                             </mx:VBox>
                        </mx:Application>
                        
                        
                        • 9. Re: TextArea FontSize not updating all text
                          Flex harUI Adobe Employee

                          OK, took a look at it.  The TextArea's interal TextField's HTML handling is definitely full of idiosyncracies, I think you've hit another one of them.  It takes all of your tags specifying the size.

                           

                          If I were you, read back the html and replace the font tags, or (and this may be a better solution for chat anyway) regenerate the html based on an external log of stored strings.  You may find out later that after a lengthy chat session that as the number of lines in a TextArea gets really big (1000) it starts to pig out so you may want to virtualize what text is actually in the TextArea and handle scrolling in some other way.

                           

                          Alex Harui

                          Flex SDK Developer

                          Adobe Systems Inc.

                          Blog: http://blogs.adobe.com/aharui

                          • 10. Re: TextArea FontSize not updating all text
                            Flex harUI Adobe Employee

                            Hah, found out you can't put html tag angle-brackets in the emails because they get eaten.

                             

                            TextField takes all of your "br" tags and replaces them with "p" tags and puts a "TextFormat" tag around each one.  I have a suspicion that only the last TextFormat is affected by changing the default font size for the TextField.  Quite frankly, I'm kind of surprised it worked on any of the text because if you read back what you put in, you'll see tags specifying the size.

                             

                            Alex Harui

                            Flex SDK Developer

                            Adobe Systems Inc.

                            Blog: http://blogs.adobe.com/aharui

                            • 11. Re: TextArea FontSize not updating all text
                              philippe.sabourin Level 1

                              I'm not really sure what you're talking about with the email? I output any kind of email in the text.

                               

                              Also, before I had + "\n" instead of + "<br/>" at the end of each message, but it was still doing the same thing. Do you still think the solution is to store the entire text seperately and reload it when the font size is changed?

                               

                              Thanks,

                              Philippe

                              • 12. Re: TextArea FontSize not updating all text
                                Flex harUI Adobe Employee

                                Not sure what happened, but the forums at several lines of that first reply.

                                 

                                I'd either re-add all the text (which as I said, might be better performance wise once the numbers of lines gets large), or manipulate the font size tags

                                 

                                Alex Harui

                                Flex SDK Developer

                                Adobe Systems Inc.

                                Blog: http://blogs.adobe.com/aharui

                                1 person found this helpful
                                • 13. Re: TextArea FontSize not updating all text
                                  philippe.sabourin Level 1

                                  Saving the text to a seperate string and replacing it every time the font is changed worked as expected.

                                   

                                  Thanks for the help,

                                  Philippe