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