« roundrectbutton, and the purpose of styles | Main | don't want to stop coding »

Semi-Transparent Text in Open Laszlo

Due to a limitation in the Flash player, device text can only be visible or invisible; any non-zero opacity values for text will be drawn as opacity=1. "Device text" means text drawn by the Flash player using the client operating system's underlying font technology. Device text is inexpensive both in runtime cost and download cost; it uses the font already present on the client machine, so no font description needs to be downloaded. However, device fonts are handled slightly differently on different operating systems; the font dimensions may not be the same across runtimes, and some OS's may not even have fonts you expect. (Notably, most linux machines lack Verdana.)

Embedded fonts are more flexible, but they cost more, in runtime and download size. The OpenLaszlo platform ships with several TrueType fonts, which can be found in lps/fonts. Specify a font for embedding by using the font tag:
<font name="timmons" src="timmonstb.ttf" />
This includes the timmons TrueType font in the swf built from your lzx code. If you're counting bytes (and you should be) just that one font adds 58624 of 'em to your download. Ouch. If you're design-focused, embedded fonts are worth it for two reasons: one, you can be sure they will look the same on every flash runtime, and two, they can be rendered semi-opaque.

There are two workarounds, both of which increase the download size:

  • Turn the text into an image; render it as an image with dynamic opacity. This is a huge pain to maintain.

  • Use embedded fonts.

The difference between embedded and device fonts has been bothering me for a while, so I put together a little example. It constrains the opacity of various text objects to the value of a slider.

Here's the app:

Here's the code:

<canvas width="600" >
<font name="Arioso" src="ariosor.ttf">
<font name="timmons" src="timmonsb.ttf"/>

<view name="inset" x="20" y="20">
<simplelayout axis="y" spacing="10" />

<view name="controls" layout="axis:y; spacing:30" width="100%" height="140" >
<text multiline="true" x="10" width="${parent.width-20}" >
This slider controls the opacity of each of the text objects below, as
well as the right half of the rectangle at the bottom of the canvas.
Opacity varies from 0 (slider=0) to 1 (slider=100).
The text using embedded fonts (timmons and arioso) can have fractional
opacity; the text using device fonts can only be visible or invisible.
<slider id="gSlider" minvalue="0" maxvalue="100" value="50" x="10" width="${parent.width-20}" />

<view height="130">
<simplelayout axis="y" spacing="10" />
<text id="gText" height="24" font="timmons" fontsize="18" opacity="${gSlider.value/100}">
some text in timmons (an embedded font)

<text height="24" font="Arioso" fontsize="18" opacity="${gSlider.value/100}">
some text in arioso (an embedded font)

<text height="24" font="Verdana" fontsize="18" opacity="${gSlider.value/100}">
some text in verdana (a device font)

<text height="24" font="Sans" fontsize="18" opacity="${gSlider.value/100}">
some text in Sans (a device font)

<view width="200" height="100" layout="axis:x">
<view bgcolor="black" width="100" height="100" opacity="1" />
<view bgcolor="black" width="100" height="100" opacity="${gSlider.value/100}" />


Reader Comments (1)

Wow thank you so much, you have just saved me a lot of hours of work. I'm developing a blog on Laszlo and I wanted to have all post and comments with a semi-transparent background, so I made an image on photoshop (all I have jeje) and imported it as an image. The problem came out when I tried to add text in it and I realize that the image isn't resizable (I'm a Laszlo newbe), but know with this I can reduce the view opacity to use it as the background. Thanks again, I hope we could get in touch for further doubts about Laszlo ^^. I'll come around.

4.18.2007 at 07:12 PM | Unregistered CommenterPanikus

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>