(Last Updated 11/27/98)



Dynamic HTML (DHTML)



Dynamic HTML (DHTML) is a term that describes the collective action of a group of technologies:

The first item provides the methodology while the remainder provide the mechanization to define and manipulate the page objects.

Although DHTML can hardly be considered fully Object Oriented, it does have some OO features. Specifically, like Java Script it does not support classes (abstract objects not style classes) or inheritance. However, it does consider each page element (section, heading, paragraph, list, image, etc.) an object and each of these objects can have the three standard attributes of an OOPs object. That is each object has;

The dynamism is obtained by defining the object and its attributes. The object can then be examined, manipulated, and used via existing (Java) Scripting functionality. Certainly, not a bad start.

At the end of 1997, the W3C (World Wide Web Consortium) released a draft of its new HTML "Document Object Model" and thus started the DHTML drive. The purpose of the HTML DOM recommendation was to specify an API for how Web developers can access the document objects to manipulate page elements to create dynamic effects. As is normal, both Netscape and Microsoft "support" this recommendation ... a little differently. <S>Even to the extent of using different names (Microsoft calls it a "Dynamic HTML Object Model" while Netscape calls it an "HTML Object Model.")

Prior to DHTML, web developers were really only able to manipulate images using the Image object, and forms using the Form object. DHTML is actually a response to a need to be able to control more of the contents in a Web page. In DHTML, every item on the document is considered an object and may be manipulated.

One of the properties that each of these objects has is a name by which it can be addressed in scripts or as a result of the action of another object (mouse pointer for instance). There is therefore the possibility that it and/or any other object on the page can thus be changed as a result of an internal method (based on time or, history etc.) or as a reaction to a specified external event. Since all variations in any element are sent as part of the initial web page, all changes occur immediately.



Identifying Document Objects

Objects are defined in DHTML by using one of the standard HTML positioning tags and the optional identifier ID that can be used with any HTML tag. For example:

1. Paragraph <P ID="Text1"> ... </P> Used to contain a paragraph with a double linefeed.
2. Division <DIV ID="Text1"> ... </DIV> Used to contain a paragraph with a single linefeed.
3. Anchor <A ID="Text1"> ... </A> Serves as a location anchor on the page.
4. Span <SPAN ID="Text1"> ... </SPAN> A generic container.
5. Layer <LAYER ID="Text1"> ... </LAYER> Defines positionable (with optional attributes) Layers.
6. iLayer <ILAYER ID="Text1"> ... </ILAYER> Defines anchored Layers.

(It pains me to say this) Internet Explorer 4 (IE-4) is currently a better DHTML browser than Netscape Navigator 4 (NN-4). This is a result of its extension of the Java Script document object to an object array using "document.all".  With this and the above tags, it is possible to address any discreet object in the document, including all images and text on down to individual HTML tags.

As an example, consider the following.








Dynamic Fonts

One of the DHTML areas, that Netscape is ahead of Microsoft is in the use of dynamic fonts. This feature of the Communicator suite provides page designers the ability to include font files containing specific fonts along with styles, sizes, colors, etc. as part of their Web page. The fonts are then downloaded with the page. Therefore, the font choice is no longer dependent on what the browser provides.

Netscape first offered font embedding in NN-4 The format chosen was "TrueDoc" developed by Bitstream. (You may also wish to glance at truedoc.com)True to the spirit of cooperation, Microsoft released a competing standard in their "TrueType" format in IE4. Needless to say, the standards were not compatible.

Although the "TrueType" format worked, it had numerous flaws; two of which were (and are):

The incompatibility was solved in March of 98 when Bitstream released a free ActiveX control for IE-4 that allowed it to display TrueDoc fonts.

Rather than actually embedding (or even downloading) a font, TrueDoc places a "Character Shape Recorder" in the operating system (Windows or Mac) This extension is given the desired shape of each glyph (character) which it then records and saves for use in the page.

The character shapes (fonts) are contained in a font definition file (*.pfr) that is maintained on the server along with the HTML document. When the page is accessed, the file is downloaded with the HTML file in the same way that an embedded image or audio file would be. While loading, the page is first displayed using the browser default font. Once the PFR has been fully downloaded, the screen is redrawn in the font specified by the designer. To speed up the process, the PFR file can be limited to the exact font characters used, rather than including an entire set.

Before considering the mechanics of using dynamic fonts, it should be noted that the <FONT> tag has two new attributes; POINT-SIZE and WEIGHT. The POINT-SIZE attribute indicates the Font point size in either absolute or relative terms. The Weight attribute indicates the degrees of "boldness" of the font. The value range for the WEIGHT attribute is 100 to 900 inclusive, in steps of 100 (why 1-9 isn't used is a mystery). The highest value, 900, is equivalent to using the <B> tag. As an example of these attributes.

(Hmmmmmm, didn't seem to work with NN-4.07). The above line starts with a POINT_SIZE of 8 and WEIGHT of 100. For each word the POINT_SIZE was increased by 2 and the WEIGHT by 100. The FACE used is MONOSPACE. (It may be noted that POINT-SIZE is in addition to the SIZE attribute which refers to an index rather than to size in points.)



There are four steps in using dynamic fonts: