2 Replies Latest reply on Apr 11, 2011 8:41 PM by DilipShah

    RichText: how to control space between two spans in a paragraph element?

    DilipShah Level 1
      When I use baselineShilf to create Chemistry equations, the gap between spans is too much. How do I control it?

      Thanks!
      ===============
      <?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/mx"
      >
      <fx:Declarations>
        <s:TextFlow 
         id="txtFlow1"
         >
         <s:p fontSize="20" textAlign="justify">
          <s:span>H</s:span>
          <s:span baselineShift="subscript">2</s:span>
          <s:span>SO</s:span>
          <s:span baselineShift="subscript">4</s:span>
         </s:p>
        </s:TextFlow>
      </fx:Declarations>

      <s:RichText
        id="richTxt"
        width="50%"
        height="50%"
        textFlow="{txtFlow1}"
        horizontalCenter="0" 
        verticalCenter="0"
        />
      </s:Application>
        • 1. Re: RichText: how to control space between two spans in a paragraph element?
          FTQuest Level 3

          Have you tried playing with 'kerning' and/or 'tracking' properties?

          FTQuest

          • 2. Re: RichText: how to control space between two spans in a paragraph element?
            DilipShah Level 1

            FTQuext,

             

            Thanks a lot... your direction really helped!

             

            Here is the code that gives the desired result:

             

            <?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/mx"
                >
                <fx:Declarations>
                    <s:TextFlow
                        id="txtFlow1"
                        >
                        <s:p fontSize="20" textAlign="justify">
                            <s:span>H</s:span>
                            <s:span baselineShift="subscript" kerning="on" trackingLeft="-30%" trackingRight="-30%">2</s:span>
                            <s:span>SO</s:span>
                            <s:span baselineShift="subscript" kerning="on" trackingLeft="-30%" trackingRight="-30%">4</s:span>
                        </s:p>
                    </s:TextFlow>
                </fx:Declarations>
               
                <s:RichText
                    id="richTxt"
                    textFlow="{txtFlow1}"
                    horizontalCenter="0"
                    verticalCenter="0"
                    />
            </s:Application>