7 Replies Latest reply on Mar 25, 2010 9:48 PM by Flex harUI

    RichEditableText fontFamilyArray?

    smon_ed Level 1

      Can anyone tell me how to embed multiple font families into a RichEditableText component?

       

      I have embedded three fonts and they will all be used within a single component - I may want a different font family completel;y or Bold, Italic, Bold-italic, etc.

       

      I am currently using:

      instance.setStyle("fontFamily", "Verdana");

       

      but I would like something like:

      instance.setStyle("fontFamilyArray", ["Verdana", "Arial", "Times"]);

       

      But the component doesn't appear to accept fontFamilyArray at all.

       

      Thanks for any help.

        • 2. Re: RichEditableText fontFamilyArray?
          smon_ed Level 1

          Thanks Peter,

           

          Sorry - I didn't say that I'm using Flex 4 and when I attempt to use fontFamilyArray, it throws an error - fontFamilyArray doesn't appear to be a property of the spark component, RichEditableText.

           

          Embedding a few fonts for use in a text field - used to take me 5 minutes in Flash - I've been trying to do this for an hour now - WTF is going on here - everything I'm attempting to do is taking me hours in flex 4!!!  I'm STREEEEEESSSSSSSSSSSSSSSSSSSSSSSSED-OUT!

           

          I'm trying to create this app using only spark components - but I assume I can use an mx component and get the font array that way - it's a bit of shame though, that I can't achieve what I want here with this new component.  Weird.

           

           

          • 3. Re: RichEditableText fontFamilyArray?
            Peter deHaan Level 4

            Sorry, I misread and thought you were using the mx:RichTextEditor. If you're using the similarly named (but completely different) s:RichEditableText control, you should be able to just set the separate font families on a paragraph/span level. Something like this (using three separate embedded fonts in a single text control):

             

            <?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">
               
                <fx:Style>
                    @namespace s "library://ns.adobe.com/flex/spark";
                    @namespace mx "library://ns.adobe.com/flex/mx";
                   
                    @font-face {
                        fontFamily: ArialCFF;
                        src: url("c:/windows/fonts/arial.ttf");
                        embedAsCFF: true;
                        unicode-range: U+0020-002F,U+0030-0039,U+003A-0040,U+0041-005A,U+005B-0060,U+0061-007A,U+007B-007E;
                    }
                   
                    @font-face {
                        fontFamily: VerdanaCCF;
                        src: url("c:/windows/fonts/verdana.ttf");
                        embedAsCFF: true;
                        unicode-range: U+0020-002F,U+0030-0039,U+003A-0040,U+0041-005A,U+005B-0060,U+0061-007A,U+007B-007E;
                    }
                   
                    @font-face {
                        fontFamily: TimesCFF;
                        src: url("c:/windows/fonts/times.ttf");
                        embedAsCFF: true;
                        unicode-range: U+0020-002F,U+0030-0039,U+003A-0040,U+0041-005A,U+005B-0060,U+0061-007A,U+007B-007E;
                    }
                </fx:Style>
               
                <s:RichEditableText id="ret" fontFamily="ArialCFF" x="20" y="20">
                    <s:textFlow>
                        <s:TextFlow>
                            <s:p fontFamily="ArialCFF">This is an embedded Arial font.</s:p>
                            <s:p fontFamily="VerdanaCCF">This is an embedded Verdana font.</s:p>
                            <s:p fontFamily="TimesCFF">This is an embedded Times New Roman font.</s:p>
                        </s:TextFlow>
                    </s:textFlow>
                </s:RichEditableText>
               
            </s:Application>

             

            Peter

            • 4. Re: RichEditableText fontFamilyArray?
              smon_ed Level 1

              Oh damn!!!  Really?

               

              I have a load of dynamic html text supplied by the client that I want to use - there's absolutely LOADS of this content - over 100 screens - and I can't really change it. It's HTML markup strings read in from a database/webservice.

               

              The markup looks more like this, using the <font> tag:

               

              <P><FONT FACE="Verdana" SIZE="13" COLOR="#000000">This is a nice piece of text in Verdana</FONT></P>
              <P><FONT FACE="FuturaMdBT" SIZE="13" COLOR="#000000">This is a nice 
              piece of text in Futura Medium</FONT></P>
              

               

              Previously, in my Flash application, I just embedded my fonts into my app and I was off... no hassle at all.  Can I really not specify a set of global embedded fonts?

               

              That's ridiculous!

               

              Thank you very much for taking the time to respond and write that sample up for me - I'm v grateful.

              • 5. Re: RichEditableText fontFamilyArray?
                Peter deHaan Level 4

                In that case, you can do something like this:

                 

                <?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">
                   
                    <fx:Style>
                        @namespace s "library://ns.adobe.com/flex/spark";
                        @namespace mx "library://ns.adobe.com/flex/mx";
                       
                        @font-face {
                            fontFamily: "Comic Sans MS";
                            src: url("c:/windows/fonts/Comic.ttf");
                            embedAsCFF: true;
                            unicode-range: U+0020-002F, U+0030-0039, U+003A-0040, U+0041-005A, U+005B-0060, U+0061-007A, U+007B-007E;
                        }
                       
                        @font-face {
                            fontFamily: Verdana;
                            src: url("c:/windows/fonts/verdana.ttf");
                            embedAsCFF: true;
                            unicode-range: U+0020-002F, U+0030-0039, U+003A-0040, U+0041-005A, U+005B-0060, U+0061-007A, U+007B-007E;
                        }
                    </fx:Style>
                   
                    <fx:Script>
                        <![CDATA[
                            import flashx.textLayout.conversion.TextConverter;
                           
                            private const someHTMLFormattedText:String = '<P><FONT FACE="Verdana" SIZE="16" COLOR="#000000">This is a nice piece of text in Verdana</FONT></P>' +
                                    '<P><FONT FACE="Comic Sans MS" SIZE="23" COLOR="#FF0000">This is a nice piece of text in Comic Sans MS</FONT></P>';
                        ]]>
                    </fx:Script>
                   
                    <s:RichEditableText id="ret"
                            fontFamily="Verdana"
                            x="20" y="20"
                            width="300"
                            textFlow="{TextConverter.importToFlow(someHTMLFormattedText, TextConverter.TEXT_FIELD_HTML_FORMAT)}" />
                   
                </s:Application>

                 

                Peter

                • 6. Re: RichEditableText fontFamilyArray?
                  smon_ed Level 1

                  hmmmm.... interesting... that's close to where I'd got to when I posted originally.  The difference is that I'm setting the textFlow in actionscript, from a actionscript class:

                   

                  private function setText(instance)
                  
                  {
                  instance.setStyle("fontFamily", "Verdana");
                  
                  var instanceValue:String = '<P><FONT FACE="Verdana" SIZE="14" COLOR="#000000">This is a nice piece of text in verdana. </FONT></P><P><FONT FACE="Comic Sans MS" SIZE="12" COLOR="#000000">This is a nice piece of text in Comic Sans. </FONT></P>';
                  
                  instance.textFlow = TextConverter.importToFlow(instanceValue, TextConverter.TEXT_FIELD_HTML_FORMAT);
                  }
                  

                   

                  I didn't have the setStyle("fontFamily", "Verdana") in my function - I had put it in the MXML with the component definition, which didn't work... moving it into the AS function made the difference - it's working perfectly now.  I'm very grateful - thanks!! 

                   

                  Now I can go ahead and build my screen layouts... woooo!  *relieved*

                   

                  Thanks again.

                  Simon.

                  • 7. Re: RichEditableText fontFamilyArray?
                    Flex harUI Adobe Employee

                    In case you are interested the underlying principles are described here.

                    http://blogs.adobe.com/aharui/2010/03/flex_and_embedded_fonts.html

                    Makes good bathroom reading.

                    1 person found this helpful