Personal tools

Text img tag

From OpenLaszlo

Contents

Introduction

This proposal calls for the addition of the <img> tag to the set of tags allowed within the OpenLaszlo <text> tag. This is a feature that is supported in the Flash 7 and higher players, and is highly likely to be supported in hypothetical DHTML, JVM, C, or C# targets of the OpenLaszlo platform.

Proposal

Add an <img> tag to the OpenLaszlo schema. This tag may be present only in a <text> element, or within an HTML element that a <text> element contains. Use of the <img> tag at any other location results in a compiler warning.

Due to implementation details of the Flash Player, the <img> tag will only be rendered when the @multiline attribute of the <text> element is true. Use of the <img> tag within a <text> element that does not have a @multiline attribute, or whose @multiline attribute is false, results in a compiler warning.

The <img> tag supports the following attributes. All of these attributes are optional except the @src attribute. All attributes must be specified as literals (not constraints) in the program source.

  • @src: This attribute is either a URI, or a JavaScript identifier. If it is a URI, it specifies the location of the image resource, which must be a JPEG or (Flash deployment targets only) SWF file. If it is a JavaScript identifier, it must be the name of a resource defined via the <resource> tag. This attribute is required.
  • @align = bottom | middle | top | left | right. The values have the same meaning as in HTML:
  • bottom: means that the bottom of the object should be vertically aligned with the current baseline. This is the default value.
  • middle: means that the center of the object should be vertically aligned with the current baseline.
  • top: means that the top of the object should be vertically aligned with the top of the current text line.

Two other values, left and right, cause the image to float to the current left or right margin

  • @alt: string. When specified, the content of this attribute is made available to screen readers.
  • @width, @height: When specified, the width and height attributes scale the natural image size to these values. The value of @width and @height is a literal number of pixels.
  • @hspace: This attribute specifies the amount of white space to be inserted to the left and right of an IMG. The default value is not specified, but is generally a small, non-zero length. (On the Flash deployment target, this value is 8 pixels.)
  • @vspace: This attribute specifies the amount of white space to be inserted above and below an IMG. The default value is not specified, but is generally a small, non-zero length. (On the Flash deployment target, this value is 8 pixels.)

The <text> view is not by default sized to the content of the <img> tag. The tag and its content are ignored for the purpose of compile-time size computation.

A new attribute @sizable is added to <text>. This attribute is a boolean, which defaults to false. If @sizable is true, the text view is continuously resized to match the dimensions of its text and <img> contents. ***TODO: Does Flash’s text view take <img> size into account? This is only feasible if it does.***

Examples

(The following examples produce compilation warnings when compiled for swf6.) Image requested at runtime:

  <text multiline="true" height="300">
    <img src="http://www.laszlosystems.com/images/horses/horse-1-sm.jpg"/>
  </text>

Image requested at runtime, from same directory as application:

  <text multiline="true" height="300">
    <img src="http:horse-1-sm.jpg"/>
  </text>

Image compiled into application:

  <resource name="horse" src="horse-1-sm.jpg"/>
  <text multiline="true" height="300">
    <img src="horse.jpg"/>
  </text>

Scaled down image embedded in text:

  <resource name="horse" src="horse-1-sm.jpg"/>
  <text multiline="true" height="300">
    Some text and
    <img src="horse.jpg" width="20" height="20/>
    some more text
  </text>

Floats to left:

  <resource name="horse" src="horse-1-sm.jpg"/>
  <text multiline="true" height="300">
    Some text and
    <img src="horse.jpg" width="20" height="20" align="left"/>
    some more text
  </text>

Floats to right:

  <resource name="horse" src="horse-1-sm.jpg"/>
  <text multiline="true" height="300">
    Some text and
    <img src="horse.jpg" width="20" height="20" align="right"/>
    some more text
  </text>

Horizontal spacing:

  <resource name="horse" src="horse-1-sm.jpg"/>
  <text multiline="true" height="300">
    Some text and
    <img src="horse.jpg" width="20" height="20" hspace="50"/>
    some more text
  </text>

Vertical spacing:

  <resource name="horse" src="horse-1-sm.jpg"/>
  <text multiline="true" height="300">
    Some text and
    <img src="horse.jpg" width="20" height="20" vspace="50"/>
    some more text
  </text>

The following examples produce compilation warnings: No multiline attribute:

  <resource name="horse" src="horse-1-sm.jpg"/>
  <text>
    <img src="horse.jpg"/>
  </text>

Multiline=false:

  <resource name="horse" src="horse-1-sm.jpg"/>
  <text multiline="false">
    <img src="horse.jpg"/>
  </text>

Unsupported schema:

  <text multiline="true">
    <img src="file:horse-1-sm.jpg"/>
  </text>

Inputtext does not accept <img> tag:

  <inputtext multiline="true">
    <img src="file://horse-1-sm.jpg"/>
  </inputtext>

This does not produce a compilation warning: Multiline attribute cannot be determined at compile time:

  <resource name="horse" src="horse-1-sm.jpg"/>
  <text multiline="${parent.multiline}">
    <img src="horse.jpg"/>
  </text>

Schema

The following element definition is added to the list of elements in htmlText:

element img {
       attribute src {string}
       & attribute alt {string}?
       & attribute align {"bottom" | "middle" | "top" | "left" | "right"}?
       & attribute width {sizeLiteral}?
       & attribute height {sizeLiteral}?
       & attribute hspace {sizeLiteral}?
       & attribute vspace {sizeLiteral}?

Discussion

Version Compatability

In general, features that require a specific deployment target will require an annotation in the source code to this effect. This is the intent of the unimplemented [Feature selection | Feature Selection proposal]. Under that proposal, a canvas or library would require e.g. <canvas features="img-tag"> in order to use this feature without compilation warnings.

Since we expect to drop support for Flash Player 6 at some point (once penetration of Flash Player 7 reaches the levels that Flash Player 6 was at a year ago; see http://www.macromedia.com/software/player_census/flashplayer/version_penetration.html), and since every other OpenLaszlo potential deployment target can be expected to support the <img> tag to the extent that it supports rich text at all, this seems like an unreasonable burden to place upon the developer. Therefore the requirement that the developer annotate her sources with a list of features to use this feature was dropped, and instead the compiler warns if the program is compiled for a target that does not support this feature.

Unimplemented HTML Attributes

This proposal calls for the addition of the <img> tag with those attributes that behave portably across Flash 7 and HTML: src, width, height, align, hspace, and vspace. Other attributes are only present in HTML (class, id, lang, dir, title, style, longdesc, usemap, ismap, and the onxxx event handlers), or have drastically different semantics in HTML. Of these, name has been deprecated in HTML and is not present in XHTML, and usemap and ismap are not appropriate for OpenLaszlo applications.

It may be possible to use features of Flash runtime to implement the id and onxxx attributes with HTML semantics, but in the interest of immediate practicality this proposal omits these features. Possible future extensions to this proposal include the addition of the id and onxxx attributes; the addition of other HTML attributes for use in non-Flash deployment targets.

Flash Player Bugs

This proposal does not call for any attempts to work around bugs or limitations in the Flash Player implementation of the <img> tag. In particular (thanks to Ben Shine at Laszlo and especially to Igor at http://play.ground.gr/):

  • If a <text> view's content begins with an <img> tag, it will be reappear even if you delete the content of the view.
  • Sometimes if @width and @height are omitted, the image is drawn overlapping the text.
  • For formatted text, an image inside the last formatted paragraph won't appear. This doesn't affect the current implementation of the <text> view, but it will affect the pending rich text view.
  • Flash inserts special character as holder for picture with font size 2. If you place the cursor next to that holder, text will have size 2. Deleting it will remove the image too.
  • The content of the <text> view that the JavaScript APIs return will be mangled: <img/> will return <img> (without a closing slash), and <a><img/></a> will return <img/><a></a>.
  • In the following fragment, the second horse is overlaid on the first:
<text  multiline="true" width="500">
  <img src="http://www.laszlosystems.com/images/horses/horse-4-sm.jpg" />
  <img src="http://www.laszlosystems.com/images/horses/horse-3-sm.jpg" />
  some text<p>and some <b>bold</b> and <i>italic</i> text</p>
</text>

Implementation Notes

An img that contains an alt attribute is handled as follows: If the flag 'canvas.accessible' is true at runtime, the LzText class' setText() method will scan its string arg for an <img ...> tag. If it finds an "alt" attribute, it will insert that text value into the visible text string, so it can be picked up by a screen reader.

Thus, a text field with content like this:

Here is a picture of my pet <img src="foo.jpg" alt="A pretty kitty cat">

will be get the extra text inlined as

Here is a picture of my pet [image: A pretty kitty cat]

Reference

HTML IMG spec: http://www.w3.org/TR/html4/struct/objects.html#h-13.2.

Article about the Flash IMG tag: http://www.devarticles.com/index2.php?option=content&task=view&id=921&pop=1&page=0&hide_js=1.

Bugs in the Flash IMG tag: http://play.ground.gr/?p=76, http://play.ground.gr/?p=77.

Documentation from Macromedia on IMG tag support in FP7: http://livedocs.macromedia.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flash_MX_2004&file=00001040.html



History

First wiki version copied from Word draft rev 1.0, dated 10/26/2005.