Databases
StackOverflow2013
Postsdbo
POFlex 4 text rendering in s:RichEditableText component
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFlex 4 text rendering in s:RichEditableText component
    text
    copied!<p>I'm curious to see if anyone can shed some light on some strange text rendering behavior in the Spark RichEditableText component.</p> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;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" creationComplete="handleApplicationCreationComplete()" &gt; &lt;fx:Script&gt; &lt;![CDATA[ import flashx.textLayout.conversion.TextConverter; private static const DATA:Array = [ "First sentence. This is a test of text rendering. How's it look?", "Let's see if this actually works correctly.", "Add some variety with the &lt;b&gt;bold&lt;/b&gt; tag...", "Throw in a &lt;a href='http://www.example.com'&gt;link&lt;/a&gt; as well!", "Well?! Does it work as expected? I think not..." ]; private var currentIdx:int; protected function handleNextClick():void { currentIdx++; if(currentIdx &gt;= DATA.length) currentIdx = 0; display(currentIdx); } protected function handleApplicationCreationComplete():void { currentIdx = 0; display(currentIdx); } private function display(idx:int):void { contentDisplay.textFlow = TextConverter.importToFlow(DATA[idx], TextConverter.TEXT_FIELD_HTML_FORMAT); } ]]&gt; &lt;/fx:Script&gt; &lt;s:layout&gt; &lt;s:VerticalLayout /&gt; &lt;/s:layout&gt; &lt;s:VGroup width="100"&gt; &lt;s:RichEditableText id="contentDisplay" width="100%" enabled="false" mouseEnabled="false" editable="false" focusEnabled="false" /&gt; &lt;/s:VGroup&gt; &lt;s:Button label="Next" click="handleNextClick()" /&gt; &lt;/s:Application&gt; </code></pre> <p>The above application simply navigates through the five sentences in the <code>DATA</code> array (every time the <code>Next</code> button is pressed). For whatever reason, <code>RichEditableText</code> component doesn't completely reset its view (by clearing the previous text) before setting new content. From what I can gather, this faulty rendering is somehow based on the combination of line count and relative width. I also discovered that if I set the <code>width</code> property of the <code>RichEditableText</code> component to an absolute value (say, <code>100</code>) as opposed to relative (percentage, <code>100%</code>) the text is rendered correctly.</p> <p>As far as I can see, this behavior is unintended and is, in fact, a bug.</p> <p><img src="https://i.stack.imgur.com/CaOQj.jpg" alt="Text on startup"></p> <p><img src="https://i.stack.imgur.com/kIx6u.jpg" alt="Text after &quot;next&quot; is clicked"></p> <p><img src="https://i.stack.imgur.com/0Stwr.jpg" alt="Text after &quot;next&quot; is clicked again"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload