Wrapping: Flex vs. InDesign

Question

Hi
Here's a screenshot showing the same text in a PDF from InDesign, and in Flex/TLF/Flash:
(Sys info below.)
The fourth line wraps differently in Flex. It would be great if someone
(perhaps from the TLF team) could help me with finding out why.
For the project I'm working on, it's crucial that the text wraps
the same way it does in InDesign. What options do you see to
ensure that?
Ideally, all of the text would wrap the same right after TextConverter.importToFlow.
(But the Flex app could make some adjustments if necessary.)
Here's a screenshot showing the "s: d" from the first line:
In the InDesign PDF the colon is a lot closer to the "s" than in Flex, it seems.
Do you have any idea where the different distances between the
characters could come from?
It seems to me as if the TLF has a different way of calculating
the exact distances/positions (different from the implementation
in InDesign.) Is that true?
One aspect that I noticed: The font in the PDF seems bolder.
Tobi (Sys info and code below.)
Sys info:
Flash Builder Beta 2, Windows XP.
The guy who created the PDF using InDesign says:
        We're using Adobe Single-line composer, the same OTF font, and
        fontsize, with hyphenation off, kerning=0, and tracking="0"
Code: (Also attached as file.)
<?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/halo"
               minWidth="1024" minHeight="768"
               creationComplete="main()" viewSourceURL="srcview/index.html">
    <fx:Script>
        <![CDATA[
import flashx.textLayout.container.ContainerController;
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.elements.TextFlow;
private var tlfns:Namespace =
    new Namespace('http://ns.adobe.com/textLayout/2008');
private var cc:ContainerController;
private var textFlow:TextFlow;
public var layoutDoc:XML;
private function main():void {
    layoutDoc = new XML('<frame type="TextFrame" x-offset="72.0000" ' +
        'y-offset="18.0000" width="324.0000" height="411.0000" rotation="0" ' +
        'overflow="false"><TextFlow xmlns="http://ns.adobe.com/textLayout/2008" ' +
        'verticalAlign="top" blockProgression="tb"><div><p textAlign="left" ' +
        'marginTop="0" marginBottom="0"><span fontFamily="Myriad Pro" ' +
        'fontStyle="normal" fontWeight="normal" fontSize="12" lineHeight="14.4" ' +
        'baselineShift="0" textDecoration="none" trackingLeft="0" ' +
        'trackingRight="0" kerning="off">There are two main types of ' +
        'arguments: deductive and inductive. A deductive argument is ' +
        'an argument such that the premises provide (or appear to provide) ' +
        'complete support for the conclusion. An inductive argument is an ' +
        'argument such that the premises provide (or appear to provide) some ' +
        'degree of support (but less than complete support) for the conclusion. ' +
        'If the premises actually provide the required degree of support for ' +
        'the conclusion, then the argument is a good one. A good deductive ' +
        'argument is known as a valid argument and is such that if all its ' +
        'premises are true, then its conclusion must be true. If all the ' +
        'argument is valid and actually has all true premises, then it is ' +
        'known as a sound argument. If it is invalid or has one or more false ' +
        'premises, it will be unsound. A good inductive argument is known as ' +
        'a strong (or “cogentâ€�) inductive argument. It is such that if the ' +
        'premises are true, the conclusion is likely to be true. A fallacy is, ' +
        'very generally, an error in reasoning. This differs from a factual error,' +
        ' which is simply being wrong about the facts. To be more specific, ' +
        'a fallacy is an “argumentâ€� in which the premises given for the ' +
        'conclusion do not provide the needed degree of support. A deductive ' +
        'fallacy is a deductive argument that is invalid (it is such that it ' +
        'could have all true premises and still have a false conclusion). An ' +
        'inductive fallacy is less formal than a deductive fallacy. They are ' +
        'simply “argumentsâ€� which appear to be inductive arguments, but the ' +
        'premises do not provided enough support for the conclusion. In such ' +
        'cases, even if the premises were true, the conclusion would not be ' +
        'more likely to be true.</span></p></div></TextFlow></frame>');
    var sprite:Sprite = new Sprite();
    displayArea.addChild(sprite);
    var layoutDocFrameWidth:Number = parseFloat(layoutDoc.@width);
    var layoutDocFrameHeight:Number = parseFloat(layoutDoc.@height);
    displayArea.width = layoutDocFrameWidth;
    displayArea.height = layoutDocFrameHeight;
    var layoutDocTextFlowXML:XML = layoutDoc.tlfns::TextFlow[0];
    textFlow =
        TextConverter.importToFlow(
            layoutDocTextFlowXML,
            TextConverter.TEXT_LAYOUT_FORMAT
    cc =
        new ContainerController(
            sprite, layoutDocFrameWidth, layoutDocFrameHeight
    textFlow.flowComposer.addController(cc);
    textFlow.flowComposer.updateAllControllers();
        ]]>
    </fx:Script>
    <s:Panel id="display" horizontalCenter="0"
        title="Wrapping Example"
        width="740" height="510">
        <s:layout>
            <s:VerticalLayout
                paddingTop="20" paddingBottom="20"
                paddingLeft="20" paddingRight="20"/>
        </s:layout>
        <s:SpriteVisualElement id="displayArea"
            height="100%"/>
    </s:Panel>
</s:Application>

Answer 1

Hi everyone,
Here's an update. The situation has improved, but the problem hasn't been solved yet.
(Info:
The TLF text didn't get rendered using the embedded font. In Flash
Builder Beta 2, the following fixed the issue:
[Right-clicked on the project] -> Properties -> Flex Build Path ->
  Library Path -> Framework linkage -> Merged into code)
Wrapping compared to the InDesign PDF:
System font:
  (Info:
    http://forums.adobe.com/thread/449201
    "Device fonts not only reside on the local system, they are
    rendered by the OS and not by the player. The player does not
    currently have the capability to render them internally." So it
    seems with sys fonts, anti-aliasing opts can't be set in Flex?)
  Wrapping: Line 4 wraps differently.
Embedded font:
  advancedAntiAliasing: true
    Wrapping: Line 19 wraps differently. All lines before that wrap
    correctly - this situation is much better. Thanks Daniel!
  advancedAntiAliasing: false
    Wrapping: Not different from above (advancedAntiAliasing true).
This is one version of the CSS rule:
@font-face {
    src:url('assets/MyriadPro-Regular.otf');
    fontFamily: MyriadProEmbeddedCFF;
    embedAsCFF: true;
    advancedAntiAliasing: true;
Does anyone have an idea what else I could try to get the wrapping
in sync? Perhaps some other @font-face properties? Or some other
properties/settings/etc?
If nothing works, the finished Flex app will try fix the wrapping.
But ideally the wrapping would be the same as in the InDesign PDF
right away.
Tobi