TW Blog :: Entries for CSS Design

Mozilla COL Alignment via DOM Scripting

Also relates to DOM Scripting and Firefox and Co

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]

Wayback When?

Also relates to Web Standards and Peregrinations

My first steps into the world of web development came in 1997 during my time studying philosophy (and other inter-curricular activities!) at Leeds University. Initially this involved the utilisation of Tripod's online web builder tools. Then, my first big breakthrough came on discovering the view source button and my technique rapidly evolved from simple cut and paste to raw coding HTML. From then on web development became a past-time that I dabbled in when occasion allowed as I added first Javascript and then CSS to my arsenal. The target of my experimentation were two websites: Still Stoked Longboard Skates, which first appeared in late 1997; and the Bore Riders Club which arrived in spring 1998.

The current versions of both these sites, initially revamped in Spring 2002, are built to Web Standards on the front-end with content delivery powered by PHP and MySQL. Still Stoked was enhanced for improved accessibility in Autumn 2003, while the currently Flash intensive BRC site is on a long to do list. Now, thanks to the internet archive Wayback Machine, snapshots of some of the earlier incarnations of both these sites are still available to peruse!

Content Warning! All these snapshots demonstrate poor design practice for today's web. Expect explicit use of font tags, multiple table nesting, Javascript rollovers, extensive unmaintainable code and prolonged download duration (especially on 56K Dial Up)!

Still Stoked has actually been through 5 major redesigns and several minor reworkings over the past 7 years before arriving at the current longboard skates for surfers website.

1. 28th August 1999 Snapshot - full redesign, original build date unknown
2. 23rd October 2001 Snapshot - full redesign, original build date early 2000

The Bore Riders website has seen 2 major redesigns in its lifetime prior to the current Severn Bore surfing website.

1. 16th November 1999 Snapshot - original build date unknown
2. 7th June 2000 Snapshot - minor colour changes including rather cheesy Javascript powered rainbow text!
3. 17th December 2001 Snapshot - full redesign completed sometime in 2000

While these relics of a pre-standards web (at least from my perspective - standards have been around a lot longer than these archives) show how not to approach web design and development, I still feel quite proud of what I achieved in those years when I dedicated a weekend here or there to coding. It also acts as an indicator of what I have personally achieved since then in the time I have worked full time in this industry. Also these snapshots ignite memories, especially Pegasus (productions), of my past and the evolution of both Still Stoked and the Bore Riders Club, both well established entities today. Thanks to Wayback for keeping alive these dinosaurs that should have been made extinct a long time ago ;)

Posted on Oct 16, 2004 at 21:46:54. [Comments for Wayback When?- 0]