4 Replies Latest reply on Nov 10, 2009 9:56 AM by tobi3

    Wrapping: Flex vs. InDesign

    tobi3

      Hi

       

      Here's a screenshot showing the same text in a PDF from InDesign, and in Flex/TLF/Flash:

      (Sys info below.)

       

      flex_vs_indesign.png

      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:

       

      flex_vs_indesign_detail.png


      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>
        • 1. Re: Wrapping: Flex vs. InDesign
          Daniel Freiman

          I'm not from Adobe, but I can say from experience that the pervious version of the text renderer in flash had quirks like this.  Embeded vs device fonts made a difference as well as anti-aliasing options.  Try different combinations of these settings.

           

          - Daniel Freiman

          1 person found this helpful
          • 2. Re: Wrapping: Flex vs. InDesign
            tobi3 Level 1

            Hi Daniel,

             

            Thanks for you reply, I'll try these options. (Then I'll might mark your post.)

             

            "I can say from experience that the pervious version of the text renderer in flash had quirks like this."

             

            Are you saying that the current version of the text renderer in Flash doesn't have these quirks? In order to get this current version should I update to the latest TLF? Or the latest Flash Player?

             

            Tobi

            • 3. Re: Wrapping: Flex vs. InDesign
              tobi3 Level 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

              • 4. Re: Wrapping: Flex vs. InDesign
                tobi3 Level 1

                Hi TLF team, hi fellow flex coders,

                 

                Is there anything else I could try to improve the situation right after

                import of the TLF code, so that the wrapping will be the same as

                (or more similar to) the wrapping in the InDesign PDF?

                 

                Tobi