WD-object-970218
WD-object-970218This draft is work under review by the W3C HTML Working Group, for potential incorporation in an upcoming version of the HTML specification, code named Cougar. Please remember this is subject to change at any time, and may be updated, replaced or obsoleted by other documents. It is inappropriate to use W3C Working Drafts as reference material or to cite them as other than "work in progress".
A list of current W3C Working Drafts can be found at http://www.w3.org/pub/WWW/TR. This is work in progress and does not imply endorsement by, or the consensus of, either W3C or members of the HTML working group. Further information about Cougar is available at http://www.w3.org/pub/WWW/MarkUp/Cougar/.
Please send detailed comments to www-html-editor@w3.org. We cannot garantee a personal response, but summaries will be maintained off the Cougar page. Public discussion on HTML features takes place on www-html@w3.org. To subscribe send a message to www-html-request@w3.org with subscribe in the subject.
Previously this draft was known as the "INSERT" draft. However, on 13-Feb-96 the authors decided, with input from various parties, to rename the elements defined by the specification. Thus the document was renamed from WD-insert to WD-object.
The HyperText Markup Language (HTML) is a simple markup language used to create hypertext documents that are portable from one platform to another. HTML documents are SGML documents with generic semantics that are appropriate for representing information from a wide range of applications.
This specification extends HTML to support the insertion of multimedia objects including Java applets, Microsoft Component Object Model (COM) objects (e.g. ActiveX Controls and ActiveX Document embeddings), and a wide range of other media plug-ins. The approach allows objects to be specified in a general manner and provides the ability to override the default implementation of objects.
HTML 2.0 defined only a single mechanism for inserting media into HTML documents: the IMG element. While this element has certainly proved worthwhile, the fact that it is restricted to image media severely limits it usefulness as richer and richer media finds its way onto the Web.
Developers have been experimenting with ideas for dealing with new media: Microsoft's DYNSRC attribute for video and audio, Netscape's EMBED element for compound document embedding, and Sun's APP and APPLET elements for executable code.
Each of these proposed solutions attacks the problem from a slightly different perspective, and on the surface are each very different. In addition, each of these proposals falls short, in one way or another, of meeting the requirements of the Web community as a whole. However, we believe that this problem can be addressed with a single extension that addresses all of the current needs, and is fully extensible for the future.
This specification defines a new element <OBJECT> which subsumes the role of the IMG element, and provides a general solution for dealing with new media, while providing for effective backwards compatibility with existing browsers. OBJECT allows the HTML author to specify the data, and/or properties/parameters for initializing objects to be inserted into HTML documents, as well as the code that can be used to display/manipulate that data. Here, the term object is used to describe the things that people want to place in HTML documents, but other terms for these things are: components, applets, plug-ins, media handlers, etc.
The data can be specified in one of several ways: a file specified by a URL, in-line data, or as a set of named properties. In addition, there are a number of attributes that allow authors to specify standard properties such as width, and height. The code for the object is specified in several ways: by an explicit reference, or indirectly by the object's "class name" or media type.
This specification covers the syntax and semantics for inserting such objects into HTML documents, but leaves out the architectural and application programming interface issues for how objects communicate with the document and other objects on the same page. It is anticipated that future specifications will cover these topics, including scripting languages and interfaces.
This section is intended to help readers get the feel of the insertion mechanism, and is not a normative part of the specification. The OBJECT element provides a richer alternative to the IMG element. It may be used when the author wishes to provide an alternative for user agents that don't support a particular media. A simple example of using OBJECT is:
<OBJECT data=TheEarth.avi type="application/avi" alt="The Earth">
<img src=TheEarth.gif alt="The Earth">
</OBJECT>
Here the user agent would show an animation if it supports the AVI format, otherwise it would show a GIF image. The IMG element is used for the latter as it provides for backwards compatibility with existing browsers. The TYPE attribute allows the user agent to quickly detect that it doesn't support a particular object, and avoid wasting time downloading it. Another motivation for using the TYPE attribute is when the object is loaded off a local drive, as it allows the format to be specified directly rather than being inferred from the file extension. The ALT attribute allows the user agent to provide an alternative to processing the OBJECT resource indicated by the DATA attribute.
A similar example for viewing a Macromedia Shockwave presentation, giving the intended width and height of the display area:
<OBJECT data=shocknew.dcr
type="application/director"
width=288 height=200>
<img src=shocknew.gif alt="Best with Shockwave">
</OBJECT>
The next example inserts an applet written in the Python language that displays a (rather large) analog clock. The CLASSID attribute gives a URL for the Python code implementing the applet. The PARAM element is used to pass named parameters to objects. Without <PARAM NAME=size VALUE=40>, the clock will measure only 200 pixels.
<OBJECT
classid="http://monty.cnri.reston.va.us/grail/demo/clocks/analogclock.py"
>
<PARAM NAME=size VALUE=40>
fall back ...
</OBJECT>
The following example is a Java applet. The CLASSID uses the java: URL scheme [Ref 5] to name the Java class program.start. The value for the missing CODEBASE attribute, used to locate the implementation, defaults to same base URL as the document. The "main" method in the class program.start is invoked to start the Java applet. Unlike the <APPLET> element, no ".class" is permitted at the end of the CLASSID.
<OBJECT
CLASSID="java:program.start"
HEIGHT=100
WIDTH=100
>
Your browser does not know how to execute Java applications.
</OBJECT>
In the next example, CODEBASE has been explicitly set, and an additional <PARAM> element has been provided. A browser can examine CODETYPE to determine whether or not to attempt to fetch the Java applet or go immediately to the apology section. It plays the same role for CLASSID as TYPE does for DATA.
<OBJECT
CODETYPE="application/java-vm"
CODEBASE="http://host/somepath/"
CLASSID="java:program.start"
HEIGHT=100
WIDTH=100
>
<PARAM NAME="options" VALUE="xqz">
Your browser does not know how to execute Java applications.
</OBJECT>
Here is another clock, but this time using an ActiveX control:
<OBJECT
id=clock1
classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="http://www.acme.com/ole/clock.stm"
>
fall back ...
</OBJECT>
This uses the clsid: URL scheme [Ref 6] to specify the ActiveX class identifier. The ID attribute allows other controls on the same page to locate the clock. The DATA attribute points to data used to initialize the object's state. Note that ActiveX data streams include a class identifier that can be used by the ActiveX loader to find an implementation in the absence of the CLASSID attribute. The CODEBASE attribute can be used to give a URL as a hint to the ActiveX loader on where to find an implementation for this class.
For speedy loading of objects you can inline the object's state data using the URL data: scheme [Ref 4], e.g.
<OBJECT
id=clock1
classid="clsid:663C8FEF-1EF9-11CF-A3DB-080036F12502"
data="data:application/x-oleobject;base64, ...base64 data..."
>
fall back...
</OBJECT>
Inline data is only recommended for small amounts of data.
The document type definition provides the formal definition of the allowed syntax for HTML inserts. The following is an annotated listing of the DTD defining the semantics of the elements and their attributes. The complete listing appears at the end of this document.
Length values can be specified as an integer representing the number of screen pixels (the default), or as a percentage of the current displayable region, e.g. "50%", for widths, this is the space between the current left and right margins, while for heights, this is the height of the current window or table cell etc.
You can also use fixed units by including a suffix after a floating point number, e.g. "0.5in". The allowed suffices are: pt for points, pi for picas, in for inches, and cm for centimeters, where 72pt = 6pi = 1in = 2.54cm.
Note:For some attributes that take standard units, e.g. BORDER, some standard units do not always make sense, e.g. BORDER=10%. In these cases, the User Agent will do its best to interpret the value used.
HTML supports an SGML feature allowing minimization of attribute values.
If the attribute value is a token consisting of only name characters (for HTML these are a-z, A-Z, 0-9 "-" and ".") then the quote marks may be omitted: <foo bar="baz"> is equivalent to <foo bar=baz>
If the values are declared as a group of one or more names, then the attribute name can be omitted: <foo bar="baz"> is equivalent to <foo baz>
Attribute names are always case insensitive. If the values are declared as a group of one or more names, the attribute value is case insensitive: <foo bar="baz"> is equivalent to <foo BaR=BaZ>
The above means that attributes such as DECLARE and SHAPES can be abbreviated to just the attribute value, i.e. declare="declare" is equivalent to declare, and to DECLARE. User agents must treat the permitted variant forms for attribute values as directly equivalent.
The OBJECT element is used to insert an object into an HTML document. It requires both start and end tags. The OBJECT element has the same content model as the HTML BODY element, except that one or more optional PARAM elements can be placed immediately after the OBJECT start tag and used to initialize the inserted object. The content of the OBJECT element is rendered if the object specified by the CLASSID, CODEBASE and DATA attributes can't be rendered (user agents may choose to display the content of the OBJECT element or the OBJECT ALT attribute if displaying the actual element will take a long time to render). This provides for backwards compatibility with existing browsers, and allows authors to specify alternative media via nested OBJECT elements.
Note that this doesn't provide the same level of flexibility as would be provided by a richer description of resource variants. For instance when a resource in available are several media types and for each such type in English, Spanish, French and German.
<!ENTITY % OAlign "(texttop|middle|textmiddle|baseline|
textbottom|left|center|right)">
<!ELEMENT OBJECT - - (PARAM | %body.content)*>
<!ATTLIST OBJECT
%attrs -- id, class, style, lang, dir, title --
declare (declare) #IMPLIED -- declare but don't instantiate flag --
classid %URL #IMPLIED -- identifies an implementation --
codebase %URL #IMPLIED -- some systems need an additional URL --
data %URL #IMPLIED -- reference to object's data --
type CDATA #IMPLIED -- Internet content type for data --
codetype CDATA #IMPLIED -- Internet content type for code --
standby CDATA #IMPLIED -- message to show while loading --
align %OAlign #IMPLIED -- positioning inside document --
height %Length #IMPLIED -- suggested height --
width %Length #IMPLIED -- suggested width --
border %Length #IMPLIED -- suggested link border width --
hspace %Length #IMPLIED -- suggested horizontal gutter --
vspace %Length #IMPLIED -- suggested vertical gutter --
usemap %URL #IMPLIED -- reference to image map --
shapes (shapes) #IMPLIED -- object has shaped hypertext links --
name %URL #IMPLIED -- submit as part of form --
alt CDATA #IMPLIED -- textual alternative --
tabindex NUMBER #IMPLIED -- position in tabbing order --
>
In general, all attribute names and values in this specification are case insensitive, except where noted otherwise. OBJECT has the following attributes:
The following values are chosen for their ease of implementation, and their independence of other graphics occurring earlier on the same line:
For ALIGN=TEXTTOP, the top of the object is vertically aligned with the top of the current font.
For ALIGN=MIDDLE, the middle of the object is vertically aligned with the baseline.
For ALIGN=TEXTMIDDLE, the middle of the object is vertically aligned with the position midway between the baseline and the x-height for the current font. The x-height is defined as the top of a lower case x in western writing systems. If the text font is an all-caps style then use the height of a capital X. For other writing systems, align the middle of the object with the middle of the text.
For ALIGN=BASELINE, the bottom of the object is vertically aligned with the baseline of the text line in which the object appears.
For ALIGN=TEXTBOTTOM, the bottom of the object is vertically aligned with the bottom of the current font.
For ALIGN=LEFT, the object is floated down and over to the current left margin. Subsequent text is flowed past the right hand side of the visible area of the object.
For ALIGN=CENTER, the object is floated to after the end of the current line and centered between the left and right margins. Subsequent text starts at the beginning of the next line.
For ALIGN=RIGHT, the object is floated down and over to the current right margin. Subsequent text is flowed past the left hand side of the visible area of the object.
Smooth scaling a small image to a larger size provides an effective solution to reducing the time needed to download an image, offering better subjective results when compared to color reduction.
Note: As class identifiers in some object systems can be quite cumbersome, the CLASSID attribute may use a short URL to specify a class identifier indirectly. See Internet Draft on Hypertext link Relationships in HTML [Ref 1] for details on the "pointer" link relationship.
OBJECT markup with the DECLARE attribute imply objects that are not created (instantiated) until needed by something that references them (i.e. late binding). Each such "binding" typically results in a separate copy of the object (this is class dependent). In other words, the OBJECT DECLARE is treated as a declaration for making an instance of an object.
If the declared object isn't supported, or fails to load, the user agent should try the content of the OBJECT DECLARE element, which is currently restricted to another OBJECT DECLARE element. The TYPE attribute can be used to specify the Internet Media Type for the object as a hint for this situation.
To allow PARAM values to be "object valued"; that is the value of the parameter is a pointer to an object. See the example below in the section describing the PARAM element.
To allow hypertext links to point to objects which can't otherwise be addressed using a single URL.
For instance:
<OBJECT ID="obj1" DECLARE CLASSID=implementation CODEBASE=referenceURL >
<PARAM NAME=param1 VALUE=value1>
<PARAM NAME=param2 VALUE=value2>
</OBJECT>
<P>This points to an <A HREF="#obj1">object</A>.
The meaning of the link in the anchor HREF="#obj1" depends on what it points at. In this case it points at an object declaration which is then used to replace the current page with a new instance of the specified object class and data. If the HREF points at an HTML element like <H1> or <P> or <A> then the browser scrolls the document to that point.
Note: Anchors can exploit nested declared objects to provide alternative media for a given resource.
The PARAM element allows a list of named property values (used, for example, to initialize a ActiveX control, plug-in module or Java applet) to be represented as a sequence of PARAM elements. Note that PARAM is an empty element and should appear without an end tag.
<!ELEMENT PARAM - O EMPTY -- named property value --> <!ATTLIST PARAM name CDATA #REQUIRED -- property name -- value CDATA #IMPLIED -- property value -- valuetype (DATA|REF|OBJECT) DATA -- How to interpret value -- type CDATA #IMPLIED -- Internet media type -- >
In general, all attribute names and values in this specification are case insensitive, except where noted otherwise. PARAM has the following attributes:
Note that the VALUETYPE attribute value can be given without the corresponding attribute name, see examples below. This exploits a feature of SGML minimization.
The TYPE attribute is only valid for VALUETYPE=REF.
Example 1:
<PARAM NAME="Caption" VALUE="Hello World!">
is equivalent to
<PARAM NAME="Caption" DATA VALUE="Hello World!">
The string "Hello World!" is passed to the object as the value for the "Caption" property.
Example 2:
<OBJECT DECLARE ID=tribune
TYPE="application/x-webfont"
DATA=tribune.gif>
</OBJECT>
<OBJECT CLASSID="http:// ..." DATA="KublaKhan.txt">
<PARAM NAME=font OBJECT VALUE="#tribune">
<P>You're missing a really cool poem viewer ...
</OBJECT>
This is a hypothetical example of an applet for viewing poems. The poem is passed to the viewer applet via the DATA attribute. The applet recognizes a parameter named "font" that defines the font as an object. The VALUE attribute uses a URL fragment identifier #tribune to point to the font object, which is itself defined with an <OBJECT DECLARE> element.
Example 3:
<PARAM NAME="Source" REF VALUE=images/foo.gif>
The "Source" property of the object is passed the URL "images/foo.gif".
Image maps allow hypertext links to be associated with shaped regions on an image. The following mechanism extends the anchor element and provides backwards compatibility with all existing browsers. It removes the need to duplicate image maps with textual hypertext menus for non-graphical browsers.
The following image is a navigation toolbar:
This is represented as:
<object data="navbar.gif" shapes>
<a href=guide.html shape=rect coords="0,0,118,28">Access Guide</a> |
<a href=shortcut.html shape=rect coords="118,0,184,28">Go</a> |
<a href=search.html shape=rect coords="184,0,276,28">Search</a> |
<a href=top10.html shape=rect coords="276,0,373,28">Top Ten</a>
</object>
|
On all HTML 2.0 browsers this would look like: Access Guide | Go | Search | Top 10 |
If the OBJECT element includes a "SHAPES" attribute then user agents need to parse the contents of the element to look for anchors. The anchor element (<a href=...> ... </a>) is extended to permit a pair of new attributes SHAPE and COORDS. These attributes associate the hypertext link with a region on the image specified by the enclosing OBJECT element. The SHAPE/COORDS attributes take one of the general forms:
Where x and y are measured in pixels from the left/top of the associated object. If x and y values are given with a percent sign as a suffix, the values should be interpreted as percentages of the objects' width and height, respectively. For example:
SHAPE=RECT COORDS="0, 0, 50%, 100%"
When present with SHAPE and COORDS attributes, the ISMAP attribute causes the location clicked to be passed to the server. The user agent derives a new URL from the URL specified by the HREF attribute by appending `?' the x coordinate `,' and the y coordinate of the location in pixels. The link is then followed using the new URL. For instance, if the user clicked at at the location (10,27) for a link with HREF="http://www.acme.com/Guide/top10.html", then the derived URL will be: "http://www.acm e.com/Guide/top10.html?10,27".
The use of ISMAP for selected regions allows authors to exploit client-side and server-side imagemaps for the same image, e.g. regions that visually act as 3D bevelled buttons can be handled locally, while for complex image maps, or where it is undesirable to pass the imagemap to the client, the location clicked can be dealt with by the server.
An example of using SHAPE, COORDS and ISMAP:
The following image is a navigation toolbar:
This is represented as:
<object data=game.gif shapes>
<a href=guide.html shape=rect coords="0,0,118,28">Rules
of the Game</a>
<a href="http://www.acme.com/cgi-bin/competition"
ismap shape=default>Guess the location</a>
</object>
In this example, mouse clicks on the toolbar background are processed by the server while clicks in the region between (0,0) and (118,28) are processed locally.
The formal SGML definition of the ISMAP, SHAPE and COORDS attributes is:
<!ATTLIST A
...
shape (default|rect|circle|poly) #IMPLIED
coords CDATA #IMPLIED
ismap (ismap) #IMPLIED
>
The visually impaired community have argued strongly in favor of the shaped anchor mechanism, as it forces authors to provide a way for readers to follow the links regardless of which browser they are using.
In the following graphic, the blue and green regions are mapped to different URLs. Although the regions overlap, clicking on each region loads the appropriate document.
If two or more regions overlap, the region defined first in the map definition takes precedence over other regions. For example, in the map definition for the graphic above, the green region is defined before the blue region:
<object data="overlap.gif" shapes>
<a href=green.html shape=rect coords="66,13,186,37">Green</a> |
<a href=blue.html shape=rect coords="195,43,245,46">Blue</a>
</object>
In all cases shape=default has the lowest precedence. It extends to the whole of the visible region of the object.
Anchors can use the SHAPE attribute together with the TARGET attribute for designating the target user interface object (e.g. frame) for displaying the linked document or resource.
The MAP element provides an alternative mechanism for client-side image maps. It was developed by Spyglass for use with the IMG element [Ref 2]. The SHAPE and COORDS attributes are the same as for the shaped anchor mechanism. The earlier example for the toolbar becomes:
<object data="navbar1.gif" usemap="#map1">
</object>
<map name="map1">
<area href=guide.html alt="Access Guide" shape=rect coords="0,0,118,28">
<area href=search.html alt="Search" shape=rect coords="184,0,276,28">
<area href=shortcut.html alt="Go" shape=rect coords="118,0,184,28">
<area href=top10.html alt="Top Ten" shape=rect coords="276,0,373,28">
</map>
The OBJECT element references the MAP with a URL given with the USEMAP attribute. The SHAPE/COORDS attribute behave in the same way as for the shaped anchor proposal. The ALT attribute can be used to provide a few words describing each choice. This can't include markup, but can include character entities. Note that MAP isn't backwards compatible with HTML 2.0 browsers.
The World Wide Web Consortium: http://www.w3.org/