Skip to main content
poloop
Participant
Feb 8, 2010 2:18 PM UTC
Question

FontFamily Problem width dynamic textFlow

Hy,

When I create a TextFlow without use any component of the flex SDK (4.0.13827) and then I try to change or apply a FontFamily, it doesn't work. Whereas when I use a component like RichEditableText or Label, it works.

Bellow the code I wrote for my test : 

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                            xmlns:s="library://ns.adobe.com/flex/spark"
                            xmlns:mx="library://ns.adobe.com/flex/mx"
                            creationComplete="creationCompleteHandler(event)"
                            width="800" height="600"
                            >
     <fx:Style>
          @11909012 s "library://ns.adobe.com/flex/spark";
          @11909012 mx "library://ns.adobe.com/flex/mx";
          @11909012 local "*";
          
          @11220649-face { 
               src:                         url("assets/Fonts/arial.ttf");
               fontFamily:                  ArialEmbedded;
               advandedAntiAliasing:      true;
               cff:                              true;
               unicodeRange:                U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E,U+00A1-U+00FF,U+2000-U+206F,U+20A0-U+20CF,U+2100-U+2183;
          }
          
          
          
          @11220649-face { 
               src:                         url("assets/Fonts/cour.ttf");
               fontFamily:                  CourierEmbedded;
               advandedAntiAliasing:      true;
               cff:                              true;
               unicodeRange:                U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E,U+00A1-U+00FF,U+2000-U+206F,U+20A0-U+20CF,U+2100-U+2183;
          }
          
          
          
          s|WindowedApplication
          {
               
          }
     </fx:Style>
     <fx:Script>
          <![CDATA[
               import flash.text.Font;
               import flash.text.engine.FontLookup;
               
               import flashx.textLayout.container.ContainerController;
               import flashx.textLayout.conversion.TextConverter;
               import flashx.textLayout.edit.EditManager;
               import flashx.textLayout.edit.IEditManager;
               import flashx.textLayout.elements.TextFlow;
               import flashx.textLayout.events.SelectionEvent;
               import flashx.textLayout.formats.TextLayoutFormat;
               import flashx.undo.UndoManager;
               
               import mx.collections.ArrayCollection;
               import mx.events.FlexEvent;
               
               import spark.core.SpriteVisualElement;
               import spark.events.IndexChangeEvent;
               
               private var dynTextFlow : TextFlow;
               private var ctTextFlow : TextFlow;

               protected function creationCompleteHandler(event:FlexEvent):void
               {
                    controlBarVisible=false;
                    
                    dynTextFlow = TextConverter.importToFlow("Hello World", TextConverter.PLAIN_TEXT_FORMAT);
                    drawTextBloc(dynTextFlow);
                    dynTextFlow.addEventListener(SelectionEvent.SELECTION_CHANGE, selectionChangeListener);
                    dynTextFlow.fontFamily = "ArialEmbedded";
                    dynTextFlow.fontLookup = FontLookup.EMBEDDED_CFF;
                    dynTextFlow.fontSize = 24;
                    dynTextFlow.interactionManager = new EditManager(new UndoManager());
                    dynTextFlow.flowComposer.updateAllControllers();
                    dynTextFlow.invalidateAllFormats();
                    dynTextFlow.flowComposer.updateAllControllers();
               }


               protected function cbFont_creationCompleteHandler(event:FlexEvent):void
               {
                    var fonts:ArrayCollection=new ArrayCollection(Font.enumerateFonts());
                    
                    cbFont.dataProvider=fonts;
               }

               protected function cbFont_changeHandler(event:IndexChangeEvent):void
               {
                    var cf : TextLayoutFormat = new TextLayoutFormat();
                    cf.fontLookup = FontLookup.EMBEDDED_CFF;
                    cf.fontFamily = ComboBox(event.currentTarget).selectedItem.fontName;
                    
                    IEditManager(ctTextFlow.interactionManager).applyLeafFormat(cf);
                    ctTextFlow.interactionManager.setFocus();
                    
               }
               
               private function drawTextBloc(txt : TextFlow) : void
               {
                    var container : SpriteVisualElement = new SpriteVisualElement();
                    var controller : ContainerController = new ContainerController(container, 300, 200);
                    addElement(container);
                    txt.fontLookup = FontLookup.EMBEDDED_CFF;
                    txt.fontFamily = "ArialEmbedded";
                    
                    txt.flowComposer.addController(controller);
               }
               
               private function selectionChangeListener(event : SelectionEvent) : void
               {
                    ctTextFlow = event.currentTarget as TextFlow;
               }


               protected function txt_selectionChangeHandler(event:FlexEvent):void
               {
                    ctTextFlow = (event.currentTarget as RichEditableText).textFlow;
               }

          ]]>
     </fx:Script>
     <fx:Declarations>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
     </fx:Declarations>
     <s:layout>
          <s:VerticalLayout paddingLeft="10" paddingTop="10"/>
     </s:layout>
     <s:RichEditableText x="10"
                              y="10"
                              selectionChange="txt_selectionChangeHandler(event)"
                              paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5"
                              id="txt"
                              fontFamily="CourierEmbedded" 
                              text="RichEditableText"
                              height="200"
                              width="350"/>
     <s:ComboBox id="cbFont"
                    labelField="fontName"
                    creationComplete="cbFont_creationCompleteHandler(event)"
                    change="cbFont_changeHandler(event)"
                    />
     <s:Label text="TEST" fontFamily="CourierEmbedded" fontSize="22" rotation="45"/>

</s:WindowedApplication>

 
This problem appears when I update my flex sdk version.
Please, help me...
Thank you very much...
This topic is closed to new replies. Start a new post to keep the conversation going.
6 replies
Adobe Employee
robin_briggs
Adobe Employee
Feb 9, 2010 5:29 PM UTC
In your version that does not use Flex components, are you still using an embedded font? If so, can you tell me how you set it up?
Thanks,
- robin
Translate
poloopAuthor
Participant
Feb 9, 2010 5:48 PM UTC
Yes, I'm using an embedded font defined in the style section of the mxml : 
<fx:Style>
          @namespace s "library://ns.adobe.com/flex/spark";
          @namespace mx "library://ns.adobe.com/flex/mx";
          @namespace local "*";
          
          @font-face { 
               src:                         url("assets/Fonts/arial.ttf");
               fontFamily:                  ArialEmbedded;
               advandedAntiAliasing:      true;
               cff:                              true;
               unicodeRange:                U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E,U+00A1-U+00FF,U+2000-U+206F,U+20A0-U+20CF,U+2100-U+2183;
          }
          
          
          
          @font-face { 
               src:                         url("assets/Fonts/cour.ttf");
               fontFamily:                  CourierEmbedded;
               advandedAntiAliasing:      true;
               cff:                              true;
               unicodeRange:                U+0020-U+002F,U+0030-U+0039,U+003A-U+0040,U+0041-U+005A,U+005B-U+0060,U+0061-U+007A,U+007B-U+007E,U+00A1-U+00FF,U+2000-U+206F,U+20A0-U+20CF,U+2100-U+2183;
          }
          
          
          
          s|WindowedApplication
          {
               
          }
   </fx:Style>
 then in the creationComplete function of the application, I create a textFlow object :
 protected function creationCompleteHandler(event:FlexEvent):void
 {
     controlBarVisible=false;
                    
     dynTextFlow = TextConverter.importToFlow("Hello World", TextConverter.PLAIN_TEXT_FORMAT);
     drawTextBloc(dynTextFlow);
     dynTextFlow.addEventListener(SelectionEvent.SELECTION_CHANGE, selectionChangeListener);
     dynTextFlow.fontFamily = "ArialEmbedded";
     dynTextFlow.fontLookup = FontLookup.EMBEDDED_CFF;
     dynTextFlow.fontSize = 24;
     dynTextFlow.interactionManager = new EditManager(new UndoManager());
     dynTextFlow.flowComposer.updateAllControllers();
     dynTextFlow.invalidateAllFormats();
     dynTextFlow.flowComposer.updateAllControllers();
 }
private function drawTextBloc(txt : TextFlow) : void
{
    var container : SpriteVisualElement = new SpriteVisualElement();
    var controller : ContainerController = new ContainerController(container, 300, 200);
    addElement(container);
    txt.fontLookup = FontLookup.EMBEDDED_CFF;
    txt.fontFamily = "ArialEmbedded";
                    
    txt.flowComposer.addController(controller);
}


I can change the fontSize, color but not assign is fontFamily to one of my embedded font....
I don't understand why... It's so wired...
Translate
Adobe Employee
robin_briggs
Adobe Employee
Feb 11, 2010 6:10 AM UTC
What if you were to use the Embed metadata instead of @font-face to embed the font? I'm wondering if the compiler is optimizing out the embedded font because the CSS style isn't applied anywhere.
Can you try instead something like this?
[Embed(mimeType="application/x-font", exportSymbol="myArial_normal", embedAsCFF="true", source="arial.ttf", fontName="arialEmbedded")]
 
 
- robin
Translate

        
                                                

        

    


            

                                        

            
                        

                                                                                                            
            




  

  

    

      
    

    

      

        
        

          

          

        

      

      
    

  













        

                    

    
    





    


                                        

                                                        

            
        
    






                                    
Terms & ConditionsAccessibility statement

            
        



        
            
    
        
    
        

        
        
        



        


                                                        

                                                            
    

                    

  

    

      
        
      
    

    

      
        Using the community
      
      
        Terms of use
      
      
        Privacy
      
      
        Cookie preferences
      
      
        Do not sell or share my personal information
      
      
        ad choicesAdChoices