phoboslab / Ejecta

A Fast, Open Source JavaScript, Canvas & Audio Implementation for iOS
2.81k stars 322 forks source link

text PX vs PT issue #108

Closed troydawson closed 11 years ago

troydawson commented 11 years ago

On HTMLCanvasElement, text px and pt are different, but not in ejecta's canvas.

Chrome:

Chrome

Ejecta:

Ejecta

finscn commented 11 years ago

I found this too.

finscn commented 11 years ago

why use size = ceilf(size*4.0/3.0) ? I think pt is relate to dpi/ppi .

Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.

phoboslab commented 11 years ago

So what's the correct value to use on iOS? Should it be dependent on the screen resolution/size?

I my opinion, point size should behave like in Mobile Safari; I thought 1pt = 1.333px is a good estimate. this article claims it should be more like 2.26px, but browsers seem to have agreed to claim to have 96pt internally. see this table - Ejecta currently follows this.

finscn commented 11 years ago

px = pt * DPI / 72

get dpi in browser (I don't know how to get it in iOS) :

function getDPI() {
    var dpiXY = [];
    if (window.screen.deviceXDPI != undefined) {
        dpiXY[0] = window.screen.deviceXDPI;
        dpiXY[1] = window.screen.deviceYDPI;
    }else {
        var tmpNode = document.createElement("DIV");
        tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:9;visibility:hidden";
        document.body.appendChild(tmpNode);
        dpiXY[0] = parseInt(tmpNode.offsetWidth);
        dpiXY[1] = parseInt(tmpNode.offsetHeight);
        tmpNode.parentNode.removeChild(tmpNode);    
    }
    return dpiXY;
}
troydawson commented 11 years ago

The correct answer is to do whatever the native canvas does : )

My test in Chrome did show that 20pt text was 1.333X 20px test.

I don't know what EaselJS is doing, but it's using the 1.33x px -> pt ratio on double-density displays too:

Screen Shot 2013-02-07 at 7 48 11 AM

finscn commented 11 years ago

@phoboslab , I am waiting your solution to this issue.

phoboslab commented 11 years ago

What is the problem? Ejecta tries to mimic the browser closely; so I was under impression that the current solution is the right one.