17 Replies Latest reply on Mar 19, 2010 9:33 AM by Flex harUI

    Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)

    marcel.panse Level 1

      Hi there,

       

      We are using embedded fonts with the TLF framework and since upgrading to the latest nightly build or the stable build, it stopped working. Here is a short example:

       

       

      <?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="1024" minHeight="768" xmlns:mx1="library://ns.adobe.com/flex/halo">
      
           <fx:Style> 
                @font-face { 
                     embedAsCFF: true; 
                     fontFamily: "Courier"; 
                     src: url("COURIER.otf"); 
                     advancedAntiAliasing: true; 
                     fontStyle: normal; 
                     fontWeight: normal; 
                } 
           </fx:Style> 
           
           <fx:Declarations> 
                <s:TextFlow id="tf" fontSize="20"> 
                     <s:p fontFamily="Courier" fontLookup="embeddedCFF">hallo is dit courier?</s:p> 
                     <s:p>hallo is dit courier?</s:p> 
                </s:TextFlow> 
           </fx:Declarations> 
      
           <s:VGroup>
                <s:RichEditableText textFlow="{tf}" /> 
           </s:VGroup>
      </s:Application>
      

       

       

      Any idea why it doesn't work anymore. The same example works fine compiling with build; 4.0.0.11686.

       

      Thanks,

      marcel panse

        • 1. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
          Flex harUI Adobe Employee

          Use the -static-rsls options and see if it makes a difference.

          • 2. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
            marcel.panse Level 1

            I run from FlashBuilder and use the 'merged into code' option for 'framework linkage', so that should work.

            • 3. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
              Flex harUI Adobe Employee

              Try adding fontFamily="Courier" to the RichEditableText

              • 4. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
                marcel.panse Level 1

                Thank you for the suggestion, but I tried that all..

                 

                The thing is, it is a super-simple example, which works in most builds, but is broken in a certain build along the way.

                I simply want to set a fontFamily to a specific paragraph (or word) using an embedded font and that is not working..

                 

                The question is: why isn't it working and how is it broken?

                 

                I would really appreciate if someone from Adobe could try my example with some OTF or TTF font and tell me why such a trivial feature is not working..

                 

                 

                Thanks,

                marcel panse

                • 5. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
                  Peter deHaan Level 4

                  @marcel,

                   

                  Can you please file a bug in the Flex bug base at http://bugs.adobe.com/flex/ and include your simple example. I remember we did a bit of work in this area a month or so ago and we've done several TLF integrations in the past couple months and something may have broken.

                  The example seems to work if I set the entire RichEditableText block to use the same embedded font and dont try and mix embedded and device fonts:

                  <?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>
                          @font-face {
                              embedAsCFF: true;
                              fontFamily: CourierCFF;
                              src: url("C:/Windows/Fonts/COUR.TTF");
                              fontStyle: normal;
                              fontWeight: normal;
                          }
                      </fx:Style>
                     
                      <s:VGroup>
                          <s:RichEditableText fontFamily="CourierCFF">
                              <s:textFlow>
                                  <s:TextFlow id="tf" fontSize="20">
                                      <s:p>hallo is dit courier?</s:p>
                                      <s:p>hallo is dit courier?</s:p>
                                  </s:TextFlow>
                              </s:textFlow>
                          </s:RichEditableText>
                      </s:VGroup>
                     
                  </s:Application>

                   

                   

                  Peter

                  • 7. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
                    Peter deHaan Level 4

                    Actually, Alex and I were talking offline and he was explaining that you have to specify a fontFamily on a Flex component to get it to tell TLF to use embedded fonts (for more details check out Alex's excelllent blog entry at http://blogs.adobe.com/aharui/2010/03/flex_and_embedded_fonts.html).

                     

                    The following example should hopefully work for you (I tested it in a very recent Flex 4 nightly build):

                    <?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>
                            @font-face {
                                embedAsCFF: true;
                                fontFamily: CourierCFF;
                                src: url("c:/windows/fonts/COUR.ttf");
                                fontStyle: normal;
                                fontWeight: normal;
                            }
                           
                            @font-face {
                                embedAsCFF: true;
                                fontFamily: ArialCFF;
                                src: url("c:/windows/fonts/arial.ttf");
                                fontStyle: normal;
                                fontWeight: normal;
                            }
                        </fx:Style>
                       
                        <fx:Declarations>
                            <s:TextFlow id="tf" fontSize="20" fontFamily="Comic Sans MS">
                                <s:p fontFamily="CourierCFF">hallo is dit courier? [embedded]</s:p>
                                <s:p fontFamily="ArialCFF">hallo is dit arial? [embedded]</s:p>
                                <s:p fontFamily="Verdana">hallo is dit verdana? [device]</s:p>
                                <s:p>hallo is dit comic sans ms? [device]</s:p>
                            </s:TextFlow>
                        </fx:Declarations>
                       
                        <s:VGroup x="20" y="20">
                            <s:RichEditableText textFlow="{tf}" fontFamily="CourierCFF" />
                        </s:VGroup>
                       
                    </s:Application>

                     

                     

                    If I specify the embedded CourierCFF font on my RichEditableText control, the embedded fonts appear in the RET control as well as my embedded Arial font, device Verdana font, and my default device Comic Sans MS font.

                     

                    Peter

                     

                    1 person found this helpful
                    • 8. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
                      FTQuest Level 3

                      Thank you for the clarification, Peter.

                       

                      I believe, it's worth to duplicate this last post in your FlexExamples.

                       

                      FTQuest

                      • 9. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
                        marcel.panse Level 1

                        Hi Peter, thanks for your feedback.

                         

                        Your example seems to work with the sdk's i tested.

                         

                        However, how do you tell TLF to use embedded fonts if you don't have a RichEditableText as base component. Like working with containerControllers and textflows.

                         

                        This is my example which is more like our real scenario in our product:

                         

                        <?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="1024" minHeight="768" xmlns:mx1="library://ns.adobe.com/flex/halo"
                                          creationComplete="onCreationComplete()">
                        
                             <fx:Style> 
                                  @font-face { 
                                       embedAsCFF: true; 
                                             fontFamily: CourierCFF; 
                                             src: url("c:/windows/fonts/COUR.ttf"); 
                                             fontStyle: normal; 
                                             fontWeight: normal;           } 
                             </fx:Style> 
                             
                             <fx:Script>
                                  <![CDATA[
                                       import flashx.textLayout.elements.TextFlow;
                                       import flashx.textLayout.elements.SpanElement;
                                       import flashx.textLayout.elements.ParagraphElement;
                                       import flashx.textLayout.container.ContainerController;
                                       import flashx.textLayout.formats.TextLayoutFormat;
                                       import flashx.textLayout.elements.Configuration;
                                       import flashx.textLayout.compose.IFlowComposer;
                        
                                       private function onCreationComplete():void { 
                                            createTextFlow();
                                       }
                                       
                                       private function createTextFlow():TextFlow {
                                            var config:Configuration = new Configuration();
                                            var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
                                            textLayoutFormat.fontFamily = "CourierCFF"
                                            config.textFlowInitialFormat = textLayoutFormat;
                                            var textFlow:TextFlow = new TextFlow(config);
                        
                                            var p:ParagraphElement = new ParagraphElement();
                                            var span:SpanElement = new SpanElement();
                                            span.text = "Is dit courier?";
                                            p.addChild(span);
                                            textFlow.addChild(p);
                                            
                                            var flowComposer:IFlowComposer = textFlow.flowComposer;
                                            var cc:ContainerController = new ContainerController( mainText, 200, 200 );
                                            flowComposer.addController( cc );
                                            flowComposer.updateAllControllers();
                                            return textFlow; 
                                       }
                                  ]]>
                             </fx:Script>
                             
                             <mx:UIComponent id="mainText"/> 
                        </s:Application>
                        

                         

                         

                        I can't get this to work.. Is the config the correct place to tell TLF to use embedded fonts?

                        • 10. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
                          marcel.panse Level 1

                          Hi,

                           

                          I fix my previous example by adding these two lines:

                           

                          textLayoutFormat.fontLookup = FontLookup.EMBEDDED_CFF;

                          textLayoutFormat.renderingMode = RenderingMode.CFF;

                           

                           

                          This tells TLF to use embedded fonts.

                           

                          However, it still didn't work in my full application and after a couple of hours removing components from my application I drilled it all the way down to 1 spark components which breaks it all..

                           

                          When you add a <s:NumericStepper /> to my previous example, it totally stops using embedded fonts at all.

                          The example Peter supplied keeps working with the stepper added..

                           

                          Here is the full (non-working) example with the stepper added, remove the stepper and it works:

                           

                          <?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="1024" minHeight="768" xmlns:mx1="library://ns.adobe.com/flex/halo"
                                            creationComplete="onCreationComplete()">
                          
                               <fx:Style> 
                                    @font-face { 
                                         embedAsCFF: true; 
                                         fontFamily: CourierCFF; 
                                         src: url("c:/windows/fonts/COUR.ttf"); 
                                         fontStyle: normal; 
                                         fontWeight: normal; 
                                    } 
                               </fx:Style> 
                               
                               <fx:Script>
                                    <![CDATA[
                                         import flash.text.engine.FontLookup;
                                         import flash.text.engine.RenderingMode;
                                         import flashx.textLayout.elements.TextFlow;
                                         import flashx.textLayout.elements.SpanElement;
                                         import flashx.textLayout.elements.ParagraphElement;
                                         import flashx.textLayout.container.ContainerController;
                                         import flashx.textLayout.formats.TextLayoutFormat;
                                         import flashx.textLayout.elements.Configuration;
                                         import flashx.textLayout.compose.IFlowComposer;
                          
                                         private function onCreationComplete():void { 
                                              createTextFlow();
                                         }
                                         
                                         private function createTextFlow():TextFlow {
                                              var config:Configuration = new Configuration();
                                              var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
                                              textLayoutFormat.fontFamily = "CourierCFF"
                                              textLayoutFormat.fontLookup = FontLookup.EMBEDDED_CFF;
                                              textLayoutFormat.renderingMode = RenderingMode.CFF;
                          
                                              config.textFlowInitialFormat = textLayoutFormat;
                                              var textFlow:TextFlow = new TextFlow(config);
                          
                                              var p:ParagraphElement = new ParagraphElement();
                                              var span:SpanElement = new SpanElement();
                                              span.text = "Is dit courier?";
                                              p.addChild(span);
                                              textFlow.addChild(p);
                                              
                                              var flowComposer:IFlowComposer = textFlow.flowComposer;
                                              var cc:ContainerController = new ContainerController( mainText, 200, 200 );
                                              flowComposer.addController( cc );
                                              flowComposer.updateAllControllers();
                                              return textFlow; 
                                         }
                                    ]]>
                               </fx:Script>
                               
                               <s:VGroup>
                                    <s:NumericStepper /> <!-- remove this stepper and the embedded font will work -->
                                    <mx:UIComponent id="mainText"/> 
                               </s:VGroup>
                          </s:Application>
                          

                           

                          Update: not only spark NumericStepper breaks it, also spark TextInput and spark ComboBox

                           

                          greetings,

                          marcel panse

                          • 11. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
                            Flex harUI Adobe Employee

                            You're probably missing an ISWFContext somewhere.  See the latest post on my

                            blog

                             

                            --

                            Alex Harui

                            Flex SDK Team

                            Adobe System, Inc.

                            http://blogs.adobe.com/aharui

                            • 12. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
                              marcel.panse Level 1

                              I've read your blog.. I don't really understand what to do with the ISWFContext.. Are you suggesting it is missing in the SDK somewhere, or should I add it somewhere?

                              • 13. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
                                Flex harUI Adobe Employee

                                Our code is working so I doubt we're missing one.  RichEditableText is

                                setting up the ISWFContext on the TextContainerManager.  You may need to do

                                the same.

                                • 14. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
                                  marcel.panse Level 1

                                  So there are no bugs in the flex SDK? ;-)

                                   

                                  I really don't see why it should make sense to add a ISWFContext to this code. A simple example using a ContainerController to display text on a UIComponent works fine, until you add a spark TextInput or some other component. This really sounds like a bug to me in the SDK, not something every flex developer should know when using the TLF framework. The NumericSpinner isn't even connected to the my TLF code, it simply is SOMEWHERE in the application and breaks the embedded fonts rendered by TLF...

                                  • 15. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
                                    Flex harUI Adobe Employee

                                    Ok, file a bug with your test case.

                                     

                                    I wouldn't have been asked to post my most recent blog entry if there

                                    weren't ways to go off-course with embedded fonts.  In general, if you are

                                    using RSL linkage, you will need to specify an ISWFContext.  That's what our

                                    code does.

                                     

                                     

                                    --

                                    Alex Harui

                                    Flex SDK Team

                                    Adobe System, Inc.

                                    http://blogs.adobe.com/aharui

                                    • 16. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
                                      marcel.panse Level 1

                                      Hi Guys,

                                       

                                      I sort of figured out a figured out a solution/workaround:

                                       

                                      <?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="1024" minHeight="768" xmlns:mx1="library://ns.adobe.com/flex/halo"
                                                        creationComplete="onCreationComplete()">
                                           
                                           <fx:Style> 
                                                @font-face { 
                                                     embedAsCFF: true; 
                                                     fontFamily: CourierCFF; 
                                                     src: url(c:/windows/fonts/COUR.ttf); 
                                                     fontStyle: normal; 
                                                     fontWeight: normal; 
                                                } 
                                           </fx:Style> 
                                           
                                           <fx:Script>
                                                <![CDATA[
                                                     import flashx.textLayout.compose.ISWFContext;
                                                     import flashx.textLayout.formats.ITextLayoutFormat;
                                                     import flashx.textLayout.elements.GlobalSettings;
                                                     import flash.text.engine.FontLookup;
                                                     import flash.text.engine.RenderingMode;
                                                     import flashx.textLayout.elements.TextFlow;
                                                     import flashx.textLayout.elements.SpanElement;
                                                     import flashx.textLayout.elements.ParagraphElement;
                                                     import flashx.textLayout.container.ContainerController;
                                                     import flashx.textLayout.formats.TextLayoutFormat;
                                                     import flashx.textLayout.elements.Configuration;
                                                     import flashx.textLayout.compose.IFlowComposer;
                                                     import flash.text.engine.FontLookup;
                                                     
                                                     use namespace mx_internal;
                                                     
                                                     private function onCreationComplete():void { 
                                                          createTextFlow();
                                                     }
                                                     
                                                     private function createTextFlow():TextFlow {
                                                          var config:Configuration = new Configuration();
                                                          var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();
                                                          textLayoutFormat.fontFamily = "CourierCFF";
                                                          textLayoutFormat.fontLookup = FontLookup.EMBEDDED_CFF;
                                                          textLayoutFormat.renderingMode = RenderingMode.CFF;
                                                          
                                                          config.textFlowInitialFormat = textLayoutFormat;
                                                          var textFlow:TextFlow = new TextFlow(config);
                                                          
                                                          var p:ParagraphElement = new ParagraphElement();
                                                          var span:SpanElement = new SpanElement();
                                                          span.text = "Is dit courier?";
                                                          p.addChild(span);
                                                          textFlow.addChild(p);
                                                          
                                                          var flowComposer:IFlowComposer = textFlow.flowComposer;
                                                          
                                                          //option 1: This fixes the problem, but i'm not sure why it works without a fontLookupFunction? Does it default to embedded?
                                                          //you could also specify your own function always returning embedded, but that would just resolve to the same behaviour..
                                                          GlobalSettings.resolveFontLookupFunction = null;
                                                          
                                                          //option 2: I guess this is the more proper solution, specifying the swfContext. Only what context to choose? 
                                                          //every font has its own css/swf and thus context. A paragraph can select a font (and the bold/italic options), 
                                                          //which font to choose here if there are multiple fonts used in the textflow?
                                                          textFlow.flowComposer.swfContext = ISWFContext(this.getFontContext("CourierCFF", false, false, FontLookup.EMBEDDED_CFF));
                                                          
                                                          var cc:ContainerController = new ContainerController( mainText, 200, 200 );
                                                          flowComposer.addController( cc );
                                                          flowComposer.updateAllControllers();
                                                          return textFlow; 
                                                     }
                                                ]]>
                                           </fx:Script>
                                           
                                           <s:VGroup>
                                                <s:NumericStepper /> <!-- remove this stepper and the embedded font will work without option 1 or 2 -->
                                                <mx:UIComponent id="mainText"/> 
                                           </s:VGroup>
                                      </s:Application>
                                      

                                       

                                      Option 1, setting GlobalSettings.resolveFontLookupFunction to null. Fixes the problem, but i'm not sure why it works without a fontLookupFunction? Does it default to embedded? You could also specify your own function always returning embedded, but that would just resolve to the same behaviour..

                                       

                                      Option 2, specify the context: I guess this is the more proper solution, specifying the swfContext. Only what context to choose? Every font has its own css/swf and thus context. A paragraph can select a font (and the bold/italic options), which font to choose here if there are multiple fonts used in the textflow?

                                      • 17. Re: Embedded CFF font not working in TLF in latest stable build and higher (4.0.0.13875)
                                        Flex harUI Adobe Employee

                                        The SWFContext should be the ISWFContext implementation in the same SWF as

                                        the font.