FontFamily Problem width dynamic textFlow

Report · Feb 08, 2010

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> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; @namespace local "*"; @Blissful_help0D4E-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; } @Blissful_help0D4E-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>  </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...

Report · Feb 09, 2010

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

Report · Feb 09, 2010

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...

Report · Feb 10, 2010

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

Report · Feb 11, 2010

When I try this I get the following error "An embed variable must not have an existing value".

[Embed(mimeType="application/x-font", exportSymbol="myThai_normal", embedAsCFF="true", source="AdobeThai-Regular.otf", fontName="Adobe Thai Regular")]

Flex 4.5, Flex Builder 3, using AdobeThai-Regular.otf made by Adobe

Any ideas? I'm looking for a working example for Flex 4.5 that is similar to the World Languages application, but made to 1) work with the flex compiler instead of Flash CS4, and 2) work with some of the updated TLF engine classes.

Thanks,

Peder

Report · Feb 11, 2010

Does this work for you?

<?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:Script>
        <![CDATA[
            [Embed(mimeType="application/x-font",
                    embedAsCFF="true",
                    source="AdobeThai-Regular.otf",
                    fontName="AdbeThaiCFF")]
            protected const AdbeThaiRegularFont:Class;

            [Embed(mimeType="application/x-font",
                    embedAsCFF="true",
                    source="AdobeThai-Bold.otf",
                    fontName="AdbeThaiCFF",
                    fontWeight="bold")]
            protected const AdbeThaiBoldFont:Class;

            [Embed(mimeType="application/x-font",
                    embedAsCFF="true",
                    source="AdobeThai-Italic.otf",
                    fontName="AdbeThaiCFF",
                    fontStyle="italic")]
            protected const AdbeThaiItalicFont:Class;

            [Embed(mimeType="application/x-font",
                    embedAsCFF="true",
                    source="AdobeThai-BoldItalic.otf",
                    fontName="AdbeThaiCFF",
                    fontWeight="bold",
                    fontStyle="italic")]
            protected const AdbeThaiBoldItalicFont:Class;
        ]]>
    </fx:Script>

    <s:RichText id="ret"
                fontFamily="AdbeThaiCFF"
                fontSize="64"
                horizontalCenter="0" verticalCenter="0" width="70%">
        <s:textFlow>
            <s:TextFlow>
                <s:p>The quick <s:span fontWeight="bold">brown fox</s:span> jumps <s:span fontStyle="italic">over the</s:span> lazy <s:span fontWeight="bold" fontStyle="italic">dog</s:span>.</s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:RichText>

</s:Application>

Peter

Report · Feb 16, 2010

When I use embedded fonts, it works fine, but for my project I need fonts in a CSS file. So that's I use "<fx:Style>" in my test.

I found the solution with a message post on the "FlashBuilder and Flex SDK" forum.

The solution is to get the swfContext of the component in which I 'd like add my dynamic TextFlow.

So, when I create the textFlow, I add this line :

use namespace mx_internal;

....

myTextFlow.flowComposer.swfContext=ISWFContext(myApp.getFontContext("myFont", false, false, FontLookup.EMBEDDED_CFF));

Now all work fine.