pluperfect squares are a mathematical construct that are discussed in various publications including Scientific American. These first came to my attention when a friend was fascinated with the concept so much that he included it in his artwork. And so, as a way to learn the methodolgies of mark-up layout it was a task to try and implement a pluperfect square in html. This was back in 2003-2004 (or before, I'm not really sure). And so I investigated various methods back until finally I got it right. I have revisted this as I am migrating my website, urgecentral.homelinux.com, to be div and span based so that the markup is far-less complex. And also this will allow for the easier use of AJAX methods including JQuery. It is clear to me that the DOM is here to stay as far as web pages go. It isn't a stretch to say that using the DOM is akin to best practices. That is not to say that htere are not very many other ways to do things. It is just that when you use the DOM and manipulate things with it there are complexities of code that evaporate. The mush that one sees when one codes a page with styles included as part of the objects of the document is something that is only manageable as generated code. No one should ever be expected to take such code and then add or enhance it by hand, except perhaps as a tweak. But only by experts. It's dangerous looking. But what you find with such code is that there is a repetition that can be reduced with the use of styles, either as external CSS files, or called out in the header of the main document object (of an html or xhtml formated document).

new things. Here is the same thing with the size in a span element, and then the font of that kicked up so that it is readible

here is the markup for example 3:

If you want to see the markup for this stuff, use your tools! look at the styles by viewing text. Please forgive the arcane things in this file as it put forward from 2004 and reedited (with a renaming, of course) and I am not in the mood to correct all of the old style differences because the point of this file is to show, in one sense, how the newer idioms are more succinct (some would say 'better', but working code is nothing to be a style-monster about).

What follows are antique methods of doing the same thing as is shown above. Various attempts to do things with table based versions of creating a pluperfect square. One of these , which turned out to be exceptionally complex in it's implementation, actaully was able to provide the output that had been desired. These are from 2004. The ones above are new as of last week. Feb 24, 2011.

It will be useful to veiw these implementations within a browser that allows you to select the part which is the example and then to view the selection source. Doing this you can see that the newer way of using div and span elements is much more succint than a table based version of things. The CSS that is needed (the styles) are straight forward. Back in the day (2004) I was attempting to use CSS but things were not consistent enough for what I wanted to achieve and so I created an idiom (in PHP) which allowed me to, with a switch, either insert the styles inline in every object (which is very verbose, but it worked like a charm) or to have them show up as styles in the header of the xhtml block. Simple. The code here is hand done and was not generated with a php script or compiled apache add-on. Note that the older version even uses uppercase old-school capital letter markup! That is because I was using output from Open Office html files as a template back then.

As the above example shows us, the implementation of the pluperfect square is not a trivial matter. We notice that the images might not line up correctly. However, the images that we see are, indeed, the ones indicated. We can get a perfect line up with some other formating, however the perfect lineup does not provide a mechanism for changing the various images within the boxes. The above example renders in my browser without having boxes, as I believe that it would if the alignment mechanism was optimized for this type of table layout. There may well be a way to layout this out so that it lines up all the boxes correctly. The above represents a significant amount of HTML tweeking to get these results. The above table has 114 colomns, and thus does tax the colspan and rowspan idioms. The above table is a complex creation and I don't expect that it would layout correctly. I believe that the above layout would make a good display of some pretty pictures. To document the above as it looks today at 16:45, Tuesday 15 Nov, 2004, I will take a screen shot and put it below.