[pmwiki-devel] Default Skin: Switch to CSS Table?

[H. Fox]

I'm spending some time on this because I think a lot of people in the
PmWiki community would want to improve the default skin so it uses CSS
for separating the template design from the semantics of the wiki
content.

One fantastic charastic of PmWiki is that upgrading rarely breaks
things.  I don't know whether hurting compatibility with Intnernet
Exploer 6 & 7 is worth having better semantic structure by not putting
the wiki sidebar and page content inside HTML Table.  This post has
some information for everyone to consider, if interested.

Some background...

I worked on the PmWiki default skin in the past. As I recall, there
was discussion on the lists about it, and by this I mean aside from
the periodic discussion that would pop up about why a table shouldn't
be in there.

I learned a lot by contributing to the development of the skin. Pm was
extraordinarily helpful guiding me along. I'm amazed the skin from
2006 has lasted, virtually unchanged, into 2014.(*note)

Because I spent so much time working on the skin I recognize why the
skin is the way it is, pretty much line-by-line. Pm wanted the skin to
be an easily-understandable starting point for someone to build upon,
while providing a consistent appearance in lots of browsers on lots of
platforms (cross-browser compatibility).

One important lesson I learned was: cross-browser compatibility is a
vastly un-appreciated art!

We used a browser-compatibility testing service called "BrowserCam",
now defunct, to see screenshot images that showed how various browsers
on various platforms rendered the skin as it developed. BrowserCam
screenshots could be _brutal_ about exposing weaknesses in a given
HTML/CSS layout. Chunks of content might disappear, unexpectedly move
or resize, or render oddly in some other completely unexpected manner.

Summary:
At the time the default skin was created people wanted to see the
table removed for "tableless web design", but that would *definitely*
have reduced cross-browser compatibility beyond a level Pm was
comfortable with, so the table remained.

Flash forward to the present...

There's a feature of CSS 2.1 (and newer) called "The CSS table model"
documented at http://www.w3.org/TR/CSS21/tables.html#table-display .
>From that page,

  "The CSS table model is based on the HTML4 table model,
  in which the structure of a table closely parallels the
  visual layout of the table."

This feature of CSS enables us to replace the HTML table with a CSS table.

table ->   { display: table }
tr    ->   { display: table-row }
td    ->   { display: table-cell }

Some may say the proposed template at
http://www.pmwiki.org/wiki/Skins/DefaultSkinWithoutTable is not a
tableless design, rather it's a still-tabled design that substitutes a
CSS Table for the HTML table. Possibly, but I think a CSS table is
distinctly different from a HTML table. The difference between {
display: table } and <table> is akin to the difference between {
font-weight:bold } and <strong>.

Switching to a CSS table *will* break the design in some of the "long
tail" of old browsers the default skin supports. Most notably IE6 and
IE7 will not render CSS tables properly.

On the other hand, not all user agents are browsers.  Machines
(notably web crawlers) and screen readers shouldn't be overlooked;
removing the HTML table may help them.

It boils down to
 - whether the the CSS Table will become interpreted as a
  "presentational" table rather than a "semantic" table, and
 - whether separating semantics from presentation is important
   enough to justify reducing compatibility with a tiny fraction
   of browsers.

I think the CSS Table will be interpreted as a presentational table
and the switch would be, when everything is considered, an
improvement.

Hagan

(*note)  As I wrote nearly a year ago, the skin lacks Responsive Web
Design and needs better support for mobile devices. It's even more
true now.  I still believe there could be small changes that would
improve mobile-usability without compromising the skin's goals.