4 Replies Latest reply on May 26, 2008 8:38 PM by slaingod

    Styling Ranges of text

    patsko
      Hi,

      I'm having problem with the TextArea- and/or RichText-controls in Flex. I can't find any way to change the background color or individual lines or characters in the control. I've tried to apply styles to tags in the htmlText-property. But no luck there.

      Is it even possible to do this in Flex3?

      Edit: What I'm trying to accomplish with this, is a kind of ANSI-Graphics editor/viewer.

      Thanks in advance
      Patrik
        • 1. Re: Styling Ranges of text
          patsko Level 1
          I've now tried a workaround with labels/textInputs that autosizes and flows.

          But I don't get the editing I want. Since I can't select text between the inputboxes.

          Does anyone have any info on the problem with background colors on specific ranges of text?

          /Patrik
          • 2. Styling Ranges of text
            slaingod Level 1
            That has been asked here before with no useful response. Basically you would need to do it yourself. It isn't terribly hard to do, just tedious.

            This is easier with using a single font/height for your code, but basically you can use TextLineMetrics to get information about a given line of text, or more specifically a given letter. You can then draw the background based on those offsets. (With single font/size, you can cache the metrics for each letter in an Object, but with variable size or different fonts, that may require a lot of caching so you may need to do the metrics for every letter which is slower).

            I know Quasimondo has some code for justifying text that may be useful as a starting point, if metrics aren't specifically available in the FLex SDK code when using those controls. If they are, then just copy it to your project, give it a different package name, and hook with the code you need.
            • 3. Re: Styling Ranges of text
              thephantom6969 Level 1
              You insert html code. I know this crude, but it works. Here is a textarea what you want.

              <mx:TextArea width="600" height="100" fontSize="16"
              textAlign ="left"
              textIndent="0"
              leading="0"
              wordWrap="true"
              paddingLeft="0">
              <mx:htmlText><![CDATA[<p>
              Three methods for solving the quadratic equation are listed above.<b>
              <font color="#99ccff">With some color and
              <u>underline</u>.</b></p>
              <p> This is a paragraph. and more <b>This text is bold</b>
              <i>
              This text is italic
              </i>

              </font>
              </p>
              This is <font color="#FF0000">HTML text</font> in a <b>TextArea component</b>. Using the <u>htmlText attribute</u> of the <font color="#008800">TextArea component</font> you can use basic HTML markup
              <p>This is <b>some</b> content to <i>render</i> as <u>HTML</u> text.</p>
              ]]></mx:htmlText>
              </mx:TextArea>
              • 4. Re: Styling Ranges of text
                slaingod Level 1
                This doesn't help the question of background colors, just foreground.