Change line-height in OpenLaszlo Flash/SWF10 Runtime

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 (907)

  1. Thanks for sharing this. It’s working for me and solving a long-standing annoyance rendering custom fonts in OL. Cheer!

  1. No trackbacks yet.