Since DHTML doesn't support compiled fonts, we have to rely on system fonts. This means fonts may not look exactly the same across runtimes because letter spacing and rendering/smoothing are often different from one implementation to the next.

Small type isn't smoothed in DHTML as it is in SWF. I'm not sure what to do here, except choose our fonts carefully and/or avoid small point sizes.

We make every effort to make font metrics in DHTML match those in swf. They may not match exactly but they're very close.

It is virtually impossible to achieve pixel-perfect font rendering across all runtimes. However, with minimal changes for alignment and font names, you can usually make SWF and DHTML versions of your application essentially indistinguishable with regard to appearance of text.

The image of each character in a font may be encoded either as

In general, bitmap fonts are intended to be displayed at a specific size and outline fonts can be displayed at a variety of sizes.

SWF only: The features described in this section only work in applications compiled to SWF. They do not work in applications compiled to other runtimes.

Only some runtimes support embedded fonts (just SWF for now). Because of this, if you're not compiling to SWF all fonts need to be on the end-user's system and <font> tag(s) don't work. Font attributes can take a list of names (optionally including compiled font names for swf.) The runtime goes through the comma-separated list and picks the first one it finds on the system. This allows for fallback fonts if one or more fonts can't be found by name.

OpenLaszlo applications can access fonts in either of two ways: by building them into the application itself (SWF only) or by using the fonts that are resident on the client machine (DHTML and SWF).

With embedded fonts, there is a reasonable guarantee that the text in that application will look the same, no matter where it is run. However, fonts are large, and including fonts in your application makes the application (download) larger, and the startup time slower. With client fonts, (also called native fonts or device fonts), applications are smaller and start faster, but there is no guarantee that the rendering of that font, or the font definitions themselves, will be the same from computer to computer. Embedded fonts provide higher fidelity.

By default, OpenLaszlo applications use the device fonts.

	Note
	The Adobe Flash API to measure text width is reporting an incorrect value: there's no way for us to know what the real width of the text is. As a result, you may see some clipping of text, as in the italicized fonts in the following code example.

Example 23.1. Using device fonts

<canvas width="100%"> 
  <window title="Fonts are fun!" width="400" height="400" resizable="true">
  <view width="500">
    <simplelayout axis="y" spacing="10"/>
    <view width="400" font="Arial" fontsize="14">
      <simplelayout axis="y" spacing="10"/>
      <text>Arial</text>
      <text>abcdefghijklmnopqrstuvwxyz1234567890!@#$%^*()-=+|</text>
      <text>ABCDEFGHIJKLMNOPQRSTUVWXYZ ,./ ;?;':"[]{}\~`</text>
      <text><b>Arial</b></text>
      <text><i>Arial</i></text>
      <text><b><i>Arial</i></b></text>
      <inputtext>inputtext here</inputtext>
      <inputtext multiline="true" height="100" width="100">hello there</inputtext>
      <inputtext>Arial</inputtext>
      <text>
        <b><i>BoldItalic</i> Bold </b><i>Italic</i>
        <u>Underline <b>Bold Underline</b></u></text>
    </view>
    
    <view width="400" font="Arial Narrow" fontsize="14">
      <simplelayout axis="y" spacing="10"/>
      <text>Arial Narrow</text>
      <text>abcdefghijklmnopqrstuvwxyz1234567890!@#$%^*()-=+|</text>
      <text>ABCDEFGHIJKLMNOPQRSTUVWXYZ ,./?;':"[]{}\~`</text>
      <text><b>Arial Narrow</b></text>
      <text><i>Arial Narrow</i></text>
      <text><u>Arial Narrow</u></text>
      <text><b><i>Arial Narrow</i></b></text>
      <inputtext>inputtext here</inputtext>
      <inputtext multiline="true" height="100" width="100">hello there</inputtext>
      <inputtext>Arial Narrow</inputtext>
      <text>
        <b><i>BoldItalic</i> Bold </b><i>Italic</i>
        <u>Underline <b>Bold Underline</b></u></text>
    </view>
    <view width="400" font="Times New Roman" fontsize="14">
      <simplelayout axis="y" spacing="10"/>
      <text>Times New Roman</text>
      <text>abcdefghijklmnopqrstuvwxyz1234567890!@#$%^*()-=+|</text>
      <text>ABCDEFGHIJKLMNOPQRSTUVWXYZ ,./?;':"[]{}\~`</text>
      <text><b>Times New Roman</b></text>
      <text><i>Times New Roman</i></text>
      <text><u>Times New Roman</u></text>
      <text><b><i>Times New Roman</i></b></text>
      <inputtext>inputtext here</inputtext>
      <inputtext multiline="true" height="100" width="100">hello there</inputtext>
      <inputtext>Times New Roman</inputtext>
      <text>
        <b><i>BoldItalic</i> Bold</b>
        <i>Italic</i><u>Underline <b>Bold Underline</b></u>
      </text>
    </view>
    </view>
    <scrollbar axis="y"/>
  </window>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

You can override the default font by redefining the default font on the <canvas> . Note that you need to do this within the <canvas> itself—you cannot do it using an attribute tag.

Example 23.2. setting the default font on the canvas

<canvas width="100%" height="100" bgcolor="gray" font="default" fontsize="8">
     <font name="default" src="verity/verityplus11.ttf"/>
     <text>default Foobar the quick brown frotz jumped over the bad music</text> 
     <text font="default" fontsize="8">Verity Foobar the quick brown frotz jumped over the bad music</text> 
     <text font="Verdana">Verdana Foobar the quick brown frotz jumped over the bad music</text>
     <simplelayout/>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

The font attribute specifies font to be used for any <text> or <inputtext> elements that appear inside this view. Like all the font properties (fontstyle and fontsize too) these properties cascade down the view hierarchy until a new value is specified. When the font attributes are modified at runtime, using JavaScript, the font is changed for the view itself, not for any of its subviews.

For example,

Example 23.3. Using the font attribute

<canvas height="50" width="100%">
  <simplelayout/>
  <view font="helvetica">
    <text>Howdy!</text>
  </view>
  <view font="times">
    <text>Howdy back!</text>
  </view>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

<font name="helmet" src="helmet.ttf"/>

<text font="helmet,helvetica,sans-serif">

SWF only: The features described in this section only work in applications compiled to SWF. They do not work in applications compiled to other runtimes.

The value of the font attribute is the name of a embedded font, that is declared with the <font> tag.

The behavior of font in LZX closely parallels HTML/CSS, but is not equivalent in all cases. In particular:

OpenLaszlo does not implement generic font family definitions, but it does not preclude them nor is it incompatible with them (as described below).

Example 23.4. Default font

<canvas height="40" width="100%">
     <text>Hello World</text>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

This renders Hello World in a client font.

Example 23.5. Default font with non-default font size

<canvas height="100" width="100%">
   <text fontsize="24">Hello World</text>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

This renders Hello World in a larger client font, with no jaggies.

Example 23.6. Equivalence of generic and definite names

<canvas height="120" width="100%">
   <simplelayout axis="y"/>
   <text font="sans-serif">Some text</text>
   <text font="Helvetica">Some text</text>
   <text font="Times">Some text</text>
   <text font="serif">Some text</text>
   <text font="Courier">Some text</text>
   <text font="monospace">Some text</text>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

This displays three pairs of items. The items in each pair may be rendered in the same font, depending on the default fonts on the client.

Example 23.7. "nofont" attribute

<canvas height="100" width="100%">
     <simplelayout axis="y"/>
     <text font="nofont, nofont, sans-serif">Some text</text>
     <text font="nofont, sans-serif">Some text</text>
     <text font="sans-serif">Some text</text>
 </canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

This displays three lines in the same font.

The OpenLaszlo font attribute is similar to the CSS 'font' and 'font-family' properties: here. The remaining differences are:

In order to use any font other than the default font in an OpenLaszlo application, you must first declare it. The default font is described below.

OpenLaszlo documentation uses the verbs, importing, defining, and declaring, somewhat interchangeably when it comes to fonts. Each of these words implies that you are letting LZX know about a font you are going to use in your application. In LZX, fonts are referred to by name and there is an application-global namespace for fonts. Fonts can be defined directly under the <canvas> or <library> tags like:

<font name="myfont" src="myfont.ttf"/>

Each font that is imported has a name, an optional style, and a src file that contains the TTF. (The name is interpreted as the font face when the LZX application renders HTML text. See Chapter 21, Text Views.)

The style must be one of plain, bold, italic, or bold italic and the default style is plain. You must declare each style of a font that you intend to use. The style of a font is interpreted when LZX applications render HTML text. See Chapter 21, Text Views for more information.

The OpenLaszlo compiler will auto-include the plain, bold, italic, and bold italic styles of the default font, if it can detect that they will be needed. In general, it is safest to declare the bold, italic, and bold italic styles explicitly if you know you will need them. For fonts other than the default, you must explicitly import a file for each of the styles. For more details, see the section on the default font.

Each font must be imported from an external file and the value of the src attribute must be a pathname to that file (URLs are not currently supported). Relative pathnames are resolved relative to the including file. The OpenLaszlo Server also looks in $LPS_HOME/lps/fonts directory.

There are two syntaxes for importing a font. The example below imports the plain and bold style of a font named myfont.

<font name="myfont" src="myfont.ttf"      style="plain"/>
<font name="myfont" src="myfont-bold.ttf" style="bold" />

Alternatively, you can declare several styles at once like:

<font name="myfont">
  <face src="myfont.ttf"      style="plain"      />
  <face src="myfont-bold.ttf" style="bold"       />
  <face src="myfont-ital.ttf" style="italic"     />
  <face src="myfont-bita.ttf" style="bold italic"/>
</font>

Notes:

The base LZX visual object, <view> , has three font attributes, font, fontstyle, and fontsize. The font attribute with value myfont indicates that this view should look for and use a font named myfont to render text. The fontsize attribute indicates the point size at which the font should be rendered and the fontstyle indicates the style of the font that should be used.

As you will see below, these are actually the default values of the font attributes for the canvas. Because of the way that font attributes cascade, the values of these attributes on the canvas are essentially the defaults for the entire application. Below are some examples of using font attributes.

Example 23.11. Using a font

<canvas height="70" width="100%">
  <font name="helmet" src="helmetr.ttf"/>
  <text font="helmet" fontsize="20">Hello Helmet</text>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

As you can see below, The HTML text rendering tags, <b> (for bold) and <i> (for italic) instruct the OpenLaszlo application to look for and use the bold, italic, or bold italic version of the current font.

Example 23.12. Using font styles and html text

<canvas height="70" width="100%">
  <font name="myfont">
    <face src="helmetr.ttf" style="plain"/>
    <face src="helmetb.ttf" style="bold"/>
    <face src="helmeti.ttf" style="italic"/>
    <face src="helmetbi.ttf" style="bold italic"/>
  </font>
  <text font="myfont" fontsize="20">
    plain 
    <b>bold</b>
    <i>italic</i>
    <b><i>bold italic</i></b>
  </text>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

In the example below, we use the HTML text <font> tag to change fonts inside a single piece of text.

Example 23.13. Using multiple fonts in HTML text

<canvas height="70" width="100%">
  <font name="helmet" src="helmetr.ttf"/>
  <font name="arioso" src="ariosor.ttf"/>
  <text fontsize="20">
    <font face="helmet">helmet</font> 
    <font face="arioso">arioso</font>
  </text>
  </canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

In the example below, you can see that setting the fontsize can get you very big text.

Example 23.14. Using the fontsize attribute

<canvas height="100" width="100%">
  <font name="helmet" src="helmetr.ttf"/>
  <text resize="true" fontsize="100" font="helmet">BIG</text>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

Many of the fonts look too small at the default fontsize of 8.

Example 23.15. Omitting the fontsize attribute

<canvas height="70" width="100%">
  <font name="helmet" src="helmetr.ttf"/>
  <text font="helmet">Helmet at default size(8) is very hard to read!</text>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

You can specify the font for inputtext, too.

Example 23.16. Specifying the font for inputtext

<canvas fontsize="20" width="100%" height="70">
  <font name="helmet" src="helmetr.ttf"/>
  <inputtext bgcolor="red" font="helmet">Type your text here</inputtext>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

Note that HTML text does not work in <inputtext> .

There are two basic rules that a view uses to choose its font attributes.

These are described in turn below.

4.2.1. Font attribute cascading

Cascading occurs when a view does not specify one of its font attributes. In this case, it will receive its parent's value for that font attribute. If the parent doesn't specify a font attribute, it keeps going up the view hierarchy to find a view that specifies a value for that font attribute, going all the way to the canvas, if no ancestors specify a value for the given font attribute. Each of the three font attributes cascade separately.

Example 23.17. Using cascaded font attributes

<canvas height="250" width="100%">
  <font name="conga" src="congar.ttf"/>
  <font name="conga" src="congab.ttf" style="bold"/>
  <view layout="axis: y; spacing: 2" font="conga">
    <text resize="true" fontsize="12" text="I will be in conga 12"/>
    <text resize="true" fontsize="22" text="I will be in conga 22"/>
    <text resize="true" fontsize="32" text="I will be in conga 32"/>
    <view layout="axis: y; spacing: 2" fontsize="32" fontstyle="bold">
      <text resize="true" text="I will be bold"/>
      <text resize="true" text="Me, too"/>
      <text resize="true" fontsize="8" font="default" text="I will be in the default font"/>
    </view>
  </view>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

You can even specify font attributes on the canvas:

Example 23.18. Specifying a canvas font

<canvas font="tahoe" width="100%" height="70">
  <font name="tahoe" src="lztahoe8.ttf"/>
  <text text="hello"/>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

4.2.3. Font attribute summary

The following is a set of rules that a view uses to choose its font:

• Use the font attribute set on the instance. If not set, then

• Use the font attribute set on this instance's baseclass (or any of its subclasses, going up the chain). If it is not set,

• Use the cascaded font attribute.

You may want to use a font attribute on a class definition if you are going to closely tie the implementation (design, layout, positioning) of that class to that specific font. In general, you should only do this when absolutely necessary.

Example 23.19. Using font attributes in a class definition

<canvas height="100" width="100%">
  <font name="helmet" src="helmetr.ttf"/>
  <font name="tahoe" src="lztahoe8.ttf"/>
  <class name="myclass" fontsize="20" font="helmet">
    <attribute name="defaultplacement" value="'content'"/>
    <text bgcolor="red" text="Uses the class font"/>
    <view name="content"/>
  </class>
  
  <view layout="axis:y; spacing: 2" font="tahoe">
    <myclass/>
    <text text="use cascaded font"/>
  </view>
</canvas>
<!-- * X_LZ_COPYRIGHT_BEGIN ***************************************************
* Copyright 2007, 2008 Laszlo Systems, Inc.  All Rights Reserved.                   *
* Use is subject to license terms.                                            *
* X_LZ_COPYRIGHT_END ****************************************************** -->

Flash

HTML5

The OpenLaszlo Server provides a number of fonts for your use in $LPS_HOME/lps/fonts. The pseudo-pixel fonts that come with the OpenLaszlo Server are described above. The OpenLaszlo default (pseudo-pixel) font, verity11 is there as is an outline version of the same glyphs in bitstream-1.10-vera.