When you’re using OpenLaszlo by compiling to flash/swf10 Flash, the lineheight attribute within the text class is readonly. That’s sometimes problematic, if you getting strict specifications from your designer for create a website or GUI (graphic user interface). The designer wants that you do implement all the typographic specification that he gives you, pixel by pixel.
For this case, i’ve searched for a workaround to change the lineheight within text fields.
The result is the following class:
<?xml version="1.0" encoding="UTF-8" ?> <library> <class name="lineHeightText" extends="text" multiline="true"> <switch> <unless property="$as3"> <method name="setLineHeight" args="newLineHeight:Number =0"> <![CDATA[ Debug.error("setLineHeight is not supported"); ]]> </method> </unless> <otherwise> <passthrough> import flash.text.*; </passthrough> <method name="setLineHeight" args="newLineHeight:Number =0, refreshHeight:Boolean =true"> <![CDATA[ // get an reference of this text var test = this.getDisplayObject(); // set new line-height var format:TextFormat = new TextFormat(); format.leading = newLineHeight-test.lineheight; // set line-height in the sprites test.lineheight = newLineHeight; // make this textfield bigger if(refreshHeight) this.setAttribute("height", newLineHeight*test.textfield.numLines); // set the new format test.textfield.setTextFormat(format); test.textfield.defaultTextFormat = format; ]]> </method> </otherwise> </switch> </class> </library>
The usage is very simple:
<?xml version="1.0" encoding="UTF-8" ?> <canvas name="lineHeight" width="100%" height="100%"> <include href="./lineHeightText.lzx" /> <lineHeightText fontsize="11" fgcolor="#000000" bgcolor="#abcdef" x="10" y="10" name="textarea1" width="200" selectable="true"> [start]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.[end] </lineHeightText> <lineHeightText fontsize="11" fgcolor="#000000" bgcolor="#abcdef" x="220" y="10" name="textarea2" width="200" selectable="true"> <handler name="oninit"> <![CDATA[ this.setLineHeight(20); ]]> </handler> [start]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.[end] </lineHeightText> </canvas>
I hope this can help somebody.
If you find some errors, or have some questions or tips, write me..
Sourcecode: OpenLaszlo - LineHeight.zip (616)