Text disappearing when rotating tab component in Openlaszlo's SWF runtime

Question

Why when I apply a rotation tab text disappears of the tabs? Is there any way to keep the labels in its relative position, so it rotate along with the tab?

code:

<tabs name="dentes" height="200"  width="300" x="${this.width}" y="${this.height}" rotation="90">
    <tabpane name="coroa" text="Coroa" bgcolor="blue" width="100%" height="100%"> 
        <text>Nome:</text>
    </tabpane>
    <tabpane name="raiz" text="Raiz" bgcolor="red" width="100%" height="100%"> 
        <text>Nome:</text>
    </tabpane>
    <tabpane name="canal" text="Canal" bgcolor="green" width="100%" height="100%"> 
        <text>Nome:</text>
    </tabpane>
</tabs>

Answer 1

That's a technical limitation of the Flash/SWF runtime when using client fonts. It's mentioned in the docs as well:

OpenLaszlo Developers Guide, Chapter 21, Text Views: In particular, you should understand the difference between client fonts and embedded fonts in applications compiled to SWF. (Applications compiled to DHTML cannot use embedded fonts). Because they don't always behave the same way (for example client fonts can not be rotated or changed in opacity due to a limitation of the Flash Player)

Use the <font> tag to embed TTF fonts into your application. If you select that font for your text, the rotatoin will work as expected, e.g.:

<canvas width="100%" height="250">

    <!-- ATTENTION: Please download the KentucyFriedChickendFont.ttf file using
         this URL and put it in the same folder as this LZX file.
         http://svn.openlaszlo.org/openlaszlo/trunk/test/resources/ttf/KentuckyFriedChickenFont.ttf
    -->

    <font name="ChickenNoCFF" src="KentuckyFriedChickenFont.ttf" embedascff="false" />
    <font name="ChickenCFF" src="KentuckyFriedChickenFont.ttf" embedascff="true" />

    <inputtext x="100" 
               rotation="10"
               font="ChickenNoCFF" fontsize="32" 
               hasdirectionallayout="false"
               resize="true">
    Embedded font (no CFF)
    </inputtext>

    <!-- Text elements using @hasdirectionallayout="true" need to set
         @embedascff="true" for the SWF10+ runtimes -->
    <inputtext x="100" y="100"
               rotation="10" 
               font="ChickenCFF" fontsize="32" 
               hasdirectionallayout="true">
    Embedded font (embedded as CFF)
    </inputtext>

</canvas>

You have to embed the TTF fonts into your application, and then you are free to rotate any standard text component.

If you use the hasdirectionallayout property of text components in SWF applications, you have to use the embedascff="true" attribute when embedding custom fonts.

Here's a screenshot of this example SWF10 app, tested on 5.0 (trunk).