Question

I am applying a custom font to a text field this is working fine in my Openlaszlo 3.3 but in the newer version(5.0) the font is getting applied and the style is also getting applied , but i see the space between the letters is more. But this is not happening in the older version.

I inspected the object in both the versions and i found that the only notable difference is the line height.

Any idea why this is happening?How to remove those spaces is it possible?

3.3 Screenshot

5.0 Screenshot

Answer 1

The effect you are seeing is connected to the way how Flash deals with embedded TTF fonts: Text using those fonts is completely rendered by the Flash Player. Especially the change from Flash Player 8 to 9 brought many improvement for text rendering (better anti-aliasing for embedded fonts, finally the ability to modify the letter).

The difference in rendering text you are seeing is probably caused by the better anti-aliasing in Flash Player 9 and higher. OpenLaszlo SWF9+ text and inputtext components use the setting flash.text.AntiAliasType.ADVANCED as default.

Here’s a discussion in the OpenLaszlo dev mailing list mentioning the effect your are seeing:

Font rendering should be as high-quality as possible — I don’t think
anyone’s going to want old-style rendering in FP9. Isn’t there another way
to fix this bug?

We’re not going to get complete font rendering consistency across
runtimes. It’s already not consistent when using device fonts. Each
browser/player/OS variation is different, and Flash vs. DHTML is also
different.

As far I know there is not an official API for modifying that setting. I’ve created a small application where you can test how modifying that property affects text rendering. The top two text items use the default font for Flash Player, therefore the anti-aliasing setting does not affect the rendering. The following 4 text items all use an embedded TTF font, and you can see the difference depending on the antiAliasingType setting.

To compile the application, download the following fonts and put them into the application folder:

http://svn.openlaszlo.org/openlaszlo/trunk/laszlo-explorer/fonts/ariosob.ttf
https://github.com/w0ng/googlefontdirectory/raw/master/fonts/Amaranth-Regular.ttf

<canvas height="600">

    <font name="amaranth" style="plain" src="Amaranth-Regular.ttf" />
    <font name="arioso" src="ariosob.ttf" />

    <class name="mytext" extends="text">
        <passthrough when="$as3">
            import flash.text.AntiAliasType;
        </passthrough>
        <attribute name="antialias" type="string" value="advanced" />
        <handler name="oninit">
            this.onantialias.sendEvent();
        </handler>
        <handler name="onantialias">
            var t = this.getDisplayObject().textfield;
            if ( this.antialias == 'normal' ) {
                t.antiAliasType = flash.text.AntiAliasType.NORMAL;
            } else {
                t.antiAliasType = flash.text.AntiAliasType.ADVANCED;
            }
        </handler>
        <method name="toogleAntialias">
            if ( this.antialias == 'normal' ) this.setAttribute( 'antialias', 'advanced' );
            else this.setAttribute( 'antialias', 'normal' );
        </method>
    </class>

    <view>
        <simplelayout axis="y" spacing="10" />
        <view layout="axis:x; spacing:5">
            <text valign="middle">Anti-alias advanced</text>
            <checkbox value="true" y="10"
                      onvalue="if (parent.t) parent.t.toogleAntialias()" />
            <view width="20" height="1" />
            <mytext name="t"
                    antialias="advanced"
                    fontsize="25">Default font (no embedded TTF)</mytext>
        </view>
        <view layout="axis:x; spacing:5">
            <text valign="middle">Anti-alias advanced</text>
            <checkbox value="false" y="10"
                      onvalue="if (parent.t) parent.t.toogleAntialias()" />
            <view width="20" height="1" />
            <mytext name="t"
                    antialias="normal"
                    fontsize="25">Default font (no embedded TTF)</mytext>
        </view>

        <view layout="axis:x; spacing:5">
            <text valign="middle">Anti-alias advanced</text>
            <checkbox value="true" y="10"
                      onvalue="if (parent.t) parent.t.toogleAntialias()" />
            <view width="20" height="1" />
            <mytext name="t"
                    antialias="advanced"
                    font="amaranth" fontsize="25">Amaranth Regular</mytext>
        </view>
        <view layout="axis:x; spacing:5">
            <text valign="middle">Anti-alias advanced</text>
            <checkbox value="false" y="10"
                      onvalue="if (parent.t) parent.t.toogleAntialias()" />
            <view width="20" height="1" />
            <mytext name="t"
                    antialias="normal"
                    font="amaranth" fontsize="25">Amaranth Regular</mytext>
        </view>

        <view layout="axis:x; spacing:5">
            <text valign="middle">Anti-alias advanced</text>
            <checkbox value="true" y="10"
                      onvalue="if (parent.t) parent.t.toogleAntialias()" />
            <view width="20" height="1" />
            <mytext name="t"
                    antialias="advanced"
                    font="arioso" fontsize="25">Amaranth Regular</mytext>
        </view>
        <view layout="axis:x; spacing:5">
            <text valign="middle">Anti-alias advanced</text>
            <checkbox value="false" y="10"
                      onvalue="if (parent.t) parent.t.toogleAntialias()" />
            <view width="20" height="1" />
            <mytext name="t"
                    antialias="normal"
                    font="arioso" fontsize="25">Amaranth Regular</mytext>
        </view>
    </view>

</canvas>

The results might not be consistent across all operating systems, since operating systems will use different approaches to optimizing text rendering. The above screenshot was taken on Linux.