This is the first post of my new blogging journey on Flex . Why I love Flex ? [ more on this , in About me ].
Well coming back to the problem,
this issue can be seen more specifically when one uses , Arial Font with size=12. Now the Text control of flex, or TextField of the Flash package, would clip off some of the area of the left edge of the string. When used with single line, or multiline text, issue remains the same.
Resolution :
The solution is to use the TextFormat to set the left margin to 0.6 . This workaround seems to work. Although there is a very good post for this issue, http://bryanlangdon.com/blog/2008/12/15/w-arial-text-cut-off-fix-for-as2-and-as3/
But this solution is for Flash TextField.
So , if someone uses this approach in Flex Text controls, then we don’t have setTextFormat property, so if one doesn’t uses the TextField, then the problem is still there.
So I have created the custom Text Control, which extends the default Text Class, and overrides the commitProperties function to set the textFormat() before the internal text written to Text control is displayed back to user. This works cause, internally the Text control, uses the TextField as the placeholder for the text written it.
var tf:TextFormat = new TextFormat();
tf.leftMargin = .6;
getTextField().setTextFormat(tf);
Use this control the same way as normal Text control, but with the issue resolved. There may be other ways, to get this done, like CSSStyleDeclaration etc., but I haven’t given that approach a try. This works for me. If someone has any ideas on that approach , please do share.
But till then , try the source code below. See the snapshot below of how the problem/solution looks like.
I have pasted the source here, my as file [myText.as ] — custom Text Control
myText.as
package
{
import flash.text.TextFormat;
import mx.core.mx_internal;
import mx.controls.Text;
use namespace mx_internal;
public class myText extends Text
{
private var widthChanged:Boolean = true;
public function myText()
{
super();
}
override protected function commitProperties():void
{
super.commitProperties();
// if explicitWidth or percentWidth changed, we want to set
// wordWrap appropriately before measuring()
var tf:TextFormat = new TextFormat();
tf.leftMargin = .6;
getTextField().setTextFormat(tf);
if (widthChanged)
{
textField.wordWrap = !isNaN(percentWidth) || !isNaN(explicitWidth);
widthChanged = false;
}
}
}
}
main.mxml
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:local=”*”>
<mx:Script>
<![CDATA[
[Bindable]
var string:String = “W — see the left edge carefully . “;
]]>
</mx:Script>
<mx:Panel width=”100%” height=”50%”>
<mx:HBox x=”18″ y=”120″>
<mx:Label x=”31″ y=”48″ text=”My Custom Text control”/>
<local:myText fontFamily=”Arial” fontWeight=”bold” fontSize=”12″ x=”176″ y=”46″ text=”{string}” width=”466″/>
</mx:HBox>
<mx:HBox x=”10″ y=”40″>
<mx:Label x=”10″ y=”105″ text=”Default Flex Text Control”/>
<mx:Text fontFamily=”Arial” fontWeight=”bold” fontSize=”12″ x=”155″ y=”105″ text=”{string}” width=”466″/>
</mx:HBox>
</mx:Panel>
</mx:Application>
Cheers, and Happy Flexing 🙂
Anju's Flex Musings 