Identifying Installed Fonts - DHTML Lab | 7 | WebReference

Identifying Installed Fonts - DHTML Lab | 7

Logo

Identifying Installed Fonts
NS statements


Given Navigator's limitations, the NS-specific code is a little more complicated. We cannot change just the font after a layer is created. We must always update the layer's HTML completely, so we include a FONT tag to change the font. First, we define the HTML to be included in the second, updatable, layer:

lyrstr1 = "<FONT FACE='"+ fname +",Courier' POINT-SIZE=12>"+ teststr +"</FONT>";

Then, we check for the existence of the layers, like we did for IE, and if the layers do not exist, we execute these statements:

   if(!window.fntLyr0) {
      lyrstr0 = "<FONT FACE='Courier' POINT-SIZE=12>"+ teststr +"</FONT>";
      if (loaded) {
         fntLyr0 = new Layer(400);
         fntLyr0.document.write(lyrstr0);
         fntLyr0.document.close();
         fntLyr1 = new Layer(400);
         fntLyr1.document.write(lyrstr1);
         fntLyr1.document.close();
      }
      else {
         document.write("<LAYER VISIBILITY=HIDE>"+ lyrstr0 +"</LAYER>");
         fntLyr0 = document.layers[document.layers.length-1];
         document.write("<LAYER VISIBILITY=HIDE>"+ lyrstr1 +"</LAYER>");
         fntLyr1 = document.layers[document.layers.length-1];
      }
   }

The HTML for the first layer is defined and stored in lyrstr0.

If the page has loaded, we create fntLyr0 using the new Layer() constructor. The required argument for new Layer(), the wrapping width, can be any value. Once we create fntLyr0, the lyrstr0 HTML is written to it. Then we create the second layer, fntLyr1, and write the lyrstr1 HTML to it.

If the page has not loaded, we create the layers using document.write() and the LAYER tag. Notice that both lyrstr0 and lyrstr1 are included within fntLyr0 and fntLyr1, respectively. Since the page is still loading, the layer HTML has to be written all at once.

We have now created both layers containing the relevant HTML for our test.

If the layers exist when we visit the function, then we move on to the statements in the else statement:

   else {
      if (loaded) {
         fntLyr1.document.write(lyrstr1);
         fntLyr1.document.close();
      }
      else {
         document.write("<LAYER VISIBILITY=HIDE>"+ lyrstr1 +"</LAYER>");
         fntLyr1 = document.layers[document.layers.length-1];
      }
   }

If the page has loaded, we simply update the second layer, fntLyr1.

If the page has not loaded we cannot, unfortunately, change the HTML in the second layer. We must create a new second layer, in reality a third, fourth, or nth, layer.

With our layers updated, we get the respactive widths, like we did for IE, and store them in width0 and width1:

   width0 = fntLyr0.clip.width;
   width1 = fntLyr1.clip.width;

Notice that the content width is obtained through the clip.width property.

Function return

The final function statement is cross-browser and it simply compares the two element widths. If they are not equal, a true value is returned by the function, meaning that the font-in-question exists. If they are equal, a false value is returned:

   return (width0 != width1);

That's it. On the next page, a more elegant IE-only version.


Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: Feb 08, 2000
Revised: Feb 08, 2000

URL: http://www.webreference.com/dhtml/column30/7.html