Wednesday, May 20, 2009

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.

Monday, May 11, 2009

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?

Friday, April 24, 2009

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.

Tuesday, March 17, 2009

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.

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

People also were talking about the solution in

Thursday, February 26, 2009

CSS Comparison Chart

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

Calculation of support of currently displayed feature lists

Internet ExplorerFirefoxSafariChromeOpera
Past6.0: 4%2.0: 35%3.1: 47%0.2: 55%9.0: 38%
Present7.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".

Tuesday, February 24, 2009

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.

Thursday, February 12, 2009

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

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

For IE, method 2

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

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

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)

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

Monday, February 09, 2009

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;).