ARIA resource

This is a good resource to learn ARIA. It lists all test case. From some sample test case pages, you can always see how to code it.

ARIA tab sample

Google around some tab samples :
University of Illinois and YUI, as I said before they were very complicated.

I believe my tab page design is very generic for web designers.
So this is my address book sample of Work and Home tab. I don't provide those complicated key navigation. All user need is just "tab" key.

My question is do I present "tab" role properly in my above design?

ARIA tablist and tab.

I though to make page AREA aware is just role attribute. When, I try to put together tablist and tab, then things are getting complicated. In IE8 with JAWS10, it read out all tabs are visited, so I guess there should be another attribute to tell which tab is on.

When I look at example. It's so complicated. A long long of javascript to create widget. This is really not simple and create burden to developer.

Alex Blog: Use text-algin:right for table

Alex Blog: Use text-algin:right for table

So what is the solution?
Below is sample of center table alignment.

<STYLE>
#container {text-align:center;}
#area {
 width:600px; border:solid 1px black; text-align:left; 
 margin-left:auto; margin-right:auto;
}
</STYLE>
<DIV id="container">
  <TABLE cellpadding="0" cellspacing="0" border="1" id="area">
    <TR>
      <TD>
      This is a table.
      </TD>
    </TR>
  </TABLE>
</DIV>

People also were talking about the solution in
here.

CSS Comparison Chart

A nice comparison of CSS features in the latest/future browsers.
Summary

Calculation of support of currently displayed feature lists

	Internet Explorer	Firefox	Safari	Chrome	Opera
Past	6.0: 4%	2.0: 35%	3.1: 47%	0.2: 55%	9.0: 38%
Present	7.0: 12%	3.0: 53%	3.2: 69%	1.0: 55%	9.6: 62%
Near Future (2009)	8.0: 31%	3.1: 82%	4.0: 85%	1.*: 55%	10.0: 68%
Future (2010 or later)	9.0: 31%	3.2: 92%	4.*: 87%	2.0: 79%	10.*: 73%

At this point, IE is very behind and lock down all proprietary, like buggy "filter".

acid3 test

Today, Apple just release Safari 4 beta. The interface is much similar its sister Chrome. The top site view is impressed.

The only interface issue is "New tab (+)" is too close the minimized icon.

Try Acid test 3, score 100. Firefox 3.1 beta 2 is 93. IE 8 rc1 is 20. Looks like Apple put a lot of resource on it.

In the javascript canvas line chart test, Safari 4 beta is much smooth.

Got to try grammar test later.

Vertical Text

Firefox 3.1 comes with css transform. I learn IE also has matrix equally.

Previously, I use writing-mode: tb-rl; filter: flipv fliph; for IE vertical text. Unfortunately, the text is very jagged after rotated. I decide to give matrix a try.

For IE, method 1

<style>
.vt {
writing-mode: tb-rl; filter: flipv fliph; 
white-space:nowrap; font-size:12px; font-family:arial; letter-spacing:2px
}
</style>
<div class="vt">Vertical Text</div> 

---

For IE, method 2

<style>
.displayretainer {
width:160px;text-align:right; z-index:25; 
font-family:arial; font-size:12px; letter-spacing:2px
}
</style>

<div id="vt" class="displayretainer" 
style="filter:progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand');">
Vertical Text
</div>

<SCRIPT>
var deg2rad = Math.PI * 2 / 360;
function setRotation(obj, deg) {
  var rad = deg * deg2rad;
  var costheta = Math.cos(rad);
  var sintheta = Math.sin(rad);
  
  obj.filters.item(0).M11 = costheta;
  obj.filters.item(0).M12 = -sintheta;
  obj.filters.item(0).M21 = sintheta;
  obj.filters.item(0).M22 = costheta;
}

setRotation(document.getElementById("vt"), 270)
</SCRIPT>

Still, the text is very jagged. The matrix filter is quite mathematical. Not sure any other attribute can smooth the font.

style vertical text

Previously, I have a vertical text sample.

Today, I replace the line chart y-axis label with it.
Unfortunately, IE does not come out good render.

I think the issue is in the filter (filter:flipv fliph;).