TW Blog :: Archives for November 2004

Mozilla COL Alignment via DOM Scripting

Relates to CSS Design and DOM Scripting, 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]

All New ZX Spectrum

Relates to Basic and Nostalgia

I can once again say I own a speccy! In fact it is the first ZX Spectrum 48K I have ever owned. By the time I convinced my parents we needed to upgrade our ZX81 first time round (i was pre teen then!), the ZX Spectrum Plus was on the market. So the rare opportunity I had to caress those colourful rubber keys was on visits to my Grandad who had become quite pre-occupied with writing BASIC software for every game and quiz show he could think of. Sadly his early versions of Countdown, Trivial Pursuit and a precursor to the key thumping Daley Thompson's Decathlon called Greasy Poles never made it into the software houses, but they used to keep me and my brother very entertained on family trips.

Well my grandad's old computer has now been passed on to me, along with an entire shelf worth of Spectrum programming books, several megabytes worth of hard drive in the form of several box loads of cassettes, and, notebooks containing all his code snippets and full program listings - full being about 2 pages in some instances! At first the keyboard failed to respond, but a quick dive under the hood, and a little sticky tape later, I was tapping away at those auto-complete Sinclair BASIC programming keys. It is amazing to think that this machine, at only 22 years old, had a mighty 48KB of system RAM, a standard cassette deck as a hard drive, 8 colours and just plugged into the television aerial.

To quote the cover of a BASIC programming book from 1983

The incredible ZX Spectrum presents its user with virtually unlimited scope. It allows versatile use of colour, offers high and low resolution graphics and also adds sound. The result can mean some very effective and exciting programs from BASIC - if you just know how! The Art of Programming the ZX Spectrum by M. James

Indeed! By the time I had reached my teens, and with Manic Miner and Jet Set Willy under my belt, I was insisting that it was time to once again upgrade to the Commodore. Bring on Wizball…!

It may not be very productive for me to while my hours away plugging code onto my television screen, but the occasional minute can always be excused as a brush up on BASIC!? If this entry has made you nostalgic, read up on the early 1980s history of computers.

Posted on Nov 05, 2004 at 22:20:44. [Comments for All New ZX Spectrum- 0]