TW Blog :: Entries for Firefox and Co

Mozilla COL Alignment via DOM Scripting

Also relates to CSS Design and DOM Scripting

One of the Mozilla rendering engine's few annoyances is its apparent disregard for the alignment attributes of col and colgroup elements within HTML tables. One might argue this is justified since alignment is a presentational attribute that should be defined with CSS. However, table alignment can be crucial to the visual display of data in a usable format and this should not be dependant on CSS - perhaps one reason why table alignment persists in the XHTML 1.1 Table Module.

Putting this presentation/structure debate aside, a workaround is required if alignment rules are to be defined by column in Mozilla browsers. One solution is to turn to CSS and define adjacent sibling selector rules (or direct adjacent combinators in CSS3 syntax) for table cells as demonstrated in these CSS snippets. However this will only work if the number of columns and columnar alignment is predefined.

The scenario I found myself in earlier today, working on the latest version of my PHP powered CMS, had column alignment and quantity determined on a content module basis with considerable variation. So it was once again time to call on the DOM, and to create those adjacent sibling selector rules dynamically.

function synchronizeColumns(table) {
  var inline = create('style');
  inline.setAttribute('type', 'text/css');
  var rule = "tbody th", 
      rules = "", 
      span, halign, valign, i, temp;
  (function(elem){
   temp = "";
   span = elem.getAttribute('span');     
   halign = elem.getAttribute('align');     
   valign = elem.getAttribute('valign');          
   if (halign != null) {
     temp += "text-align:" + halign + ";";  
   }
   if (valign != null) {
     temp += "vertical-align:" + valign + ";"; 
   }
   i = (span != null) ? span : 1;
   do {
     if (temp.length > 0) {
       rules += rule + "{" + temp + "}\n";
     }
     rule += "+td";      
   } while (–i > 0);
  }).Iterate(table.get('col')());
  inline.appendChild(create(rules,Node.TEXT_NODE));   
  get('head')(0).appendChild(inline);  
}

The rules are declared inline (to override any default alignment rules that may be set for columns, by appending a new style node to the head element. Then it is just a case of iterating through each col element in the table, extracting the corresponding align and valign attributes and building the corresponding rule. The span attribute must also be taken into consideration to ensure the correct attribute values are assigned across each column as this document fragment demonstrates:

<colgroup>
<col align="left" width="50" />
<col span="3" align="center" width="2*" />
<col width="3*" />
<col span="2" align="right" width="1*" />
</colgroup>

So, the do..while loop takes care of appending the correct number of adjacent sibling selectors.

The function described above only loops through col elements which met my requirements. Including colgroup elements is a little more complex since the content model can contain col child nodes or be empty. Since the problem only applies to Mozilla, this would be a perfect opportunity to utilise the supported TreeWalker interface from the DOM2 Traversal and Range specification. For example:

var nodes = document.createTreeWalker(
  table,
  NodeFilter.SHOW_ELEMENT, 
  {
    acceptNode : function(n) {
    return (n.tagName == "COL" || 
            (n.tagName == "COLGROUP" && 
             n.childNodes.length == 0)
           ) ?
      NodeFilter.FILTER_ACCEPT :  
      NodeFilter.FILTER_SKIP;
    }  
  },
  false);

The returned node list will contain all col and colgroup empty elements. This assumes that a colgroup element does not define the alignment for any child nodes - to account for this the acceptNode method would need to be extended further.

Posted on Nov 08, 2004 at 20:20:29. [Comments for Mozilla COL Alignment via DOM Scripting- 2]

Firefox Status: stopped

Also relates to DOM Scripting

Sometimes when visiting a site in Firefox I have found the page suddenly stops loading, is replaced by a blank screen, and, the status bar displays the text stopped. More often than not this is supplemented by an error thrown in Javascript for an undeclared variable. Well, as frustrating as this is on other sites, the same problem started occurring in the latest build I am working in. After a little code debugging, the error comes down to the use of the document.write method during page loading. I was using this method to declare some inline styles dynamically only if scripts are enabled - following the same prinicples outlined in the article I wrote on Accessible DHTML.

The fix seems to be to create the inline styles with the DOM regardless of the document being served as application/xhtml+xml mime type (in this case it was not). Since the head element is already in place when the external script is called, the inline styles can safely be appended:

if (document.getElementById && document.createElementNS) {
  var elem=document.createElementNS("http://www.w3.org/1999/xhtml","style");
  elem.setAttribute("type","text/css");
  var text=document.createTextNode(strCSS);
  elem.appendChild(text);
  document.getElementsByTagName("head")[0].appendChild(elem);
} else {
  strCSS = '<style type="text/css">' + strCSS + '</style>';
  document.write(strCSS);
}

Posted on Oct 10, 2004 at 14:40:22. [Comments for Firefox Status: stopped- 0]