Setting the CFF hinting on a TextGraphic in Flex Gumbo

The following example shows how you can set the CFF hinting on a Flex Gumbo TextGraphic object by setting the cffHinting style.

Full code after the jump.

According to the beta Flex Gumbo documentation for the cffHinting style:

The type of CFF hinting used for this text. CFF hinting determines whether Flash Player forces strong horizontal stems to fit to a sub pixel grid or not. This property applies only if the renderingMode property is set to flash.text.engine.RenderingMode.CFF, and the font is embedded (fontLookup property is set to flash.text.engine.FontLookup.EMBEDDED_CFF). At small screen sizes, hinting produces a clear, legible text for human readers.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3”.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/21/setting-the-cff-hinting-on-a-textgraphic-in-flex-gumbo/ -->
<FxApplication name="TextGraphic_cffHinting_test"
        xmlns="http://ns.adobe.com/mxml/2009">
    <layout>
        <BasicLayout />
    </layout>

    <Style>
        @font-face {
            src: url("assets/ACaslonPro-Regular.otf");
            fontFamily: "CaslonProEmbedded";
            cff: true;
        }

        TextGraphic {
            color: black;
            fontFamily: "CaslonProEmbedded";
            fontLookup: "embeddedCFF";
            lineBreak: "toFit";
            textAlign: "justify";
            ligatureLevel: "none";
        }

        Label#ver {
            right: 0;
            bottom: 0;
        }
    </Style>

    <Script>
        <![CDATA[
            import flash.text.engine.CFFHinting;
        ]]>
    </Script>

    <Form>
        <FormItem label="cffHinting:">
            <ComboBox id="comboBox"
                    selectedIndex="0">
                <dataProvider>
                    <Array>
                        <String>{CFFHinting.HORIZONTAL_STEM}</String>
                        <String>{CFFHinting.NONE}</String>
                    </Array>
                </dataProvider>
            </ComboBox>
        </FormItem>
        <FormItem label="fontSize:">
            <HSlider id="slider"
                    minimum="10"
                    maximum="64"
                    value="32"
                    liveDragging="true" />
        </FormItem>
    </Form>

    <TextGraphic id="textGraphic"
            cffHinting="{comboBox.selectedItem}"
            fontSize="{slider.value}"
            width="600"
            horizontalCenter="0"
            verticalCenter="0">
        <text>The quick brown fox jumps over the lazy dog.</text>
    </TextGraphic>

    <Label id="ver"
            creationComplete="ver.text = mx_internal::VERSION;" />

</FxApplication>

View source is enabled in the following example.

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.