Flex Examples
The following example shows how you can set the letter spacing in a Flex RichTextEditor control by setting the textAreaStyleName and letterSpacing styles.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/22/setting-the-letter-spacing-in-the-richtexteditor-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
.myTextAreaStyleName {
fontFamily: Courier;
letterSpacing: 3; /* pixels */
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
private function slider_change(evt:SliderEvent):void {
var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myTextAreaStyleName");
cssStyle.setStyle("letterSpacing", evt.value);
}
]]>
</mx:Script>
<mx:String id="str" source="lorem.txt" />
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="letterSpacing:">
<mx:HSlider id="slider"
minimum="0"
maximum="20"
value="3"
liveDragging="true"
snapInterval="1"
tickInterval="1"
change="slider_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:RichTextEditor id="richTextEditor"
text="{str}"
textAreaStyleName="myTextAreaStyleName"
width="100%"
height="100%" />
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Nice example, however I’m wondering why it takes so long to load. Has letter spacing relevant impact on rendering time?
Thanks
Klaus
not so rich ;) it doesnt do hold-delete on the keyboard
?
How to condense white space around HTML tags or TXT using the Flex RichTextEditor control
?
Marcio,
Does this answer your question, “Condensing HTML white space in the RichTextEditor control in Flex”?
Peter
If I trying to change sont size, and after that change spacing
then font size changes to its initial size.
p.s. sorry for for English, my native language is php :)
How to apply line Spacing
I switch the code
from
import mx.events.SliderEvent;
private function slider_change(evt:SliderEvent):void {
var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(“.myTextAreaStyleName”);
cssStyle.setStyle(“letterSpacing”, evt.value);
}
to
import mx.events.SliderEvent;
private function slider_change(evt:SliderEvent):void {
var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(“.myTextAreaStyleName”);
cssStyle.setStyle(“lineSpacing”, evt.value);
}
But not have effect
Yeah I was wondering about line spacing too. Can’t figure out how to change that. Anyone?
Ok I just figured it out … just use CSS :)
.paragraphtext {
fontFamily: Georgia;
fontSize: 12;
color: #000000;
lineHeight: 14pt;
}
and then apply this style to your text (ex: )
Cheers!
oh well … I guess I was wrong after all :)