8 Replies Latest reply on Aug 9, 2013 3:16 AM by cosmacol

    <b> and <i> tags not working in StyleableTextField for mobile development

    sabird Level 1

      I'm trying to dynamically produce TextArea instances in a Flex mobile app that implement html formatting.  I've made a lot of progress, but simple <b> and <i> tags are not being rendered correctly. 

      My current hypothesis is that I need to embed the italic and bold fonts.  I am currently not embedding fonts for these particular TextArea instances at all -- they are rendering using the system font.  In my previous experience, this eliminates problems with rendering <b> and <i> text.  However, when deploying on mobile platforms, I don't know for sure if there is a bold or italic system font natively available. 

       

      If I need to embed the bold and italic fonts for the tags to process correctly, does anyone know which font(s) I should embed and how I should name them so that the html will be able to find them and render correctly?  I am applying a CSS to these TextArea instances in the full app, so I can do any font embedding there if necessary.  I am planning to compile this app for both iOS and Android, in case that makes a difference. 

       

      Below is a simplified example of the code I'm using.  The TextArea that is generated is formatted honoring the <br /> tags, but ignoring the <b> and <i> tags. 

       

      Thanks in advance for any help. 

       

      import mx.events.FlexEvent;

      import spark.components.TextArea;

      import spark.components.supportClasses.StyleableTextField;

      import spark.skins.mobile.TextAreaSkin;

       

      protected function application1_creationCompleteHandler(event:FlexEvent):void

      {

                var textArea0:TextArea = new TextArea();

                textArea0.setStyle("skinClass", TextAreaSkin);

                addElement(textArea0);

                var styleableTextField0:StyleableTextField = StyleableTextField(textArea0.textDisplay);

                styleableTextField0.multiline = true;

                styleableTextField0.htmlText = "<b>bold</b><br /><i>italic</i><br />normal";

      }

        • 1. Re: <b> and <i> tags not working in StyleableTextField for mobile development
          Flex harUI Adobe Employee

          Try it in a non-mobile app to make sure you’ve got the right code.

          • 2. Re: <b> and <i> tags not working in StyleableTextField for mobile development
            sabird Level 1

            Thanks for the suggestion.  The problem with that, as far as I can see, is that only the mobile skin for TextArea contains a textDisplay typed as StyleableTextField.  I'm not sure that I can test it in a non-mobile app without changing so many varialbes that the test will be relatively meaningless. 

             

            What I have done is to try to embed the regular, bold and italic versions of my font using CSS, to no avail.  The <br /> and <a href=''></a> tags are rendered perfectly, but the b & i tags do nothing. 

             

              var styles:String =  "a { color: #FFE043; textDecoration: underline; } a:active{ color: #ffffff;}" +

              "@font-face{          fontFamily: 'Arial';          src: url('assets/fonts/Arial.ttf');          embedAsCFF: false;}@font-face{          fontFamily: 'Arial';          src: url('assets/fonts/Arial Italic.ttf');          fontStyle: italic;          embedAsCFF: false;}@font-face{          fontFamily: 'Arial';          src: url('assets/fonts/Arial Bold.ttf');          fontWeight: bold;          embedAsCFF: false;}";

                                                    var myStyleSheet:StyleSheet = new StyleSheet();

                                                    myStyleSheet.parseCSS(styles);

             

            ...

             

            styleableTextField0.styleSheet = myStyleSheet;

            • 3. Re: <b> and <i> tags not working in StyleableTextField for mobile development
              Flex harUI Adobe Employee

              I think you can swap in a mobile skin on a desktop app.  Does it work in a mobile app run on the desktop emulator?

               

              If you are not embedding any fonts, then it shouldn’t matter that you embed bold and italic versions, but if you are, then you have to embed for all bold/italic combinations.

               

              Also, the styleSheet property on a TextField is not the same things as the Flex CSS style subsystem.

              • 4. Re: <b> and <i> tags not working in StyleableTextField for mobile development
                sabird Level 1

                It does not work on the mobile app in the desktop emulator.  Also, at your advice I've tried running this as both a desktop app and as a web app.  In both cases, the following classes were unavailable to me: spark.components.supportClasses.StyleableTextField, spark.skins.mobile.TextAreaSkin, and spark.skins.mobile.TextAreaSkin.  Changing these classes, it seems, will change the app to the point where a test will be irrelevant.  Thanks for the suggestions, though. 

                • 5. Re: <b> and <i> tags not working in StyleableTextField for mobile development
                  Flex harUI Adobe Employee

                  You would have to add the mobile swcs to your project to use them on the desktop.

                   

                  In the emulator try to get to the properties on the StyleableTextField.  Is embedFonts = true?  What is the htmlText property value?

                  1 person found this helpful
                  • 6. Re: <b> and <i> tags not working in StyleableTextField for mobile development
                    sabird Level 1

                    Huh!  I tried tracing the htmlText property after formatting, and the bold and italic tags are not there anymore.  Unexpected, but consistent with the results.  Thanks for suggesting that test.  Here is the line where I assign the htmlText property:

                     

                    styleableTextField0.htmlText = "normal<br/><i>italic</i><br/><b>bold</b><br/><a href='http://www.google.com/'>link</a>";

                     

                    Here is the section where I create the StyleSheet and assign it to the StyleableTextField:

                     

                    var styles:String =

                      "@font-face{ fontFamily: Arial; src: url('assets/fonts/Arial.ttf'); embedAsCFF: false;}" +

                      "@font-face{ fontFamily: Arial; src: url('assets/fonts/Arial Italic.ttf'); fontStyle: italic; embedAsCFF: false;}" +

                      "@font-face{ fontFamily: Arial; src: url('assets/fonts/Arial Bold.ttf'); fontWeight: bold; embedAsCFF: false;}" +

                      "a { color: #FFE043; textDecoration: underline; } " +

                      "a:active{ color: #ffffff;}" +

                      "b{fontWeight:bold; fontFamily: Arial;} " +

                      "i{fontStyle:italic; fontFamily: Arial;}";

                    var myStyleSheet:StyleSheet = new StyleSheet();

                    myStyleSheet.parseCSS(styles);

                    styleableTextField0.styleSheet = myStyleSheet;

                     

                    And here is the trace statement

                     

                    trace( styleableTextField0.htmlText); // <TEXTFORMAT RIGHTMARGIN="21" INDENT="10" LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="16" COLOR="#FFFFFF" LETTERSPACING="0" KERNING="0">normal</FONT></P></TEXTFORMAT><TEXTFORMAT RIGHTMARGIN="21" INDENT="10" LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="16" COLOR="#FFFFFF" LETTERSPACING="0" KERNING="0">italic</FONT></P></TEXTFORMAT><TEXTFORMAT RIGHTMARGIN="21" INDENT="10" LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="16" COLOR="#FFFFFF" LETTERSPACING="0" KERNING="0">bold</FONT></P></TEXTFORMAT><TEXTFORMAT RIGHTMARGIN="21" INDENT="10" LEADING="2"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="16" COLOR="#FFFFFF" LETTERSPACING="0" KERNING="0"><A HREF="http://www.google.com/" TARGET="">link</A></FONT></P></TEXTFORMAT>

                     

                    Lots of code modification going on behind the scenes, it would seem.  Any idea as to why the bold and italic tags are being stripped out when the formatting process happens?  Any idea of what steps I could take next?  Thanks for all your help so far! 

                     

                    BTW, here's a screen capture of what the text looks like at this point:

                    fontScreenCap.png

                    • 7. Re: <b> and <i> tags not working in StyleableTextField for mobile development
                      Flex harUI Adobe Employee

                      It is possible that there  is some behavior in the text components that read the text property from the TextField and re-write it which would blow away any html you have applied.

                       

                      In general, Flex has not supported folks going after the low-level TextField and/or using the TextField’s styleSheet property.  You are supposed to use the Flex CSS instead.

                       

                      A next test might be to subclass StyleableTextField so you can wrap the text and htmlText getter and setters so you can see who is reading/writing those properties.

                      • 8. Re: <b> and <i> tags not working in StyleableTextField for mobile development
                        cosmacol Level 1

                        I see that truncateToFit and commitStyles are probably destroying htmlText content, overwriting it with plain text value.

                         

                        If these are not important for your purposes, you may try to subclass and short-circuit (no-op) these two methods.