Technical Tidbit of the Day: June 2012

Thursday, June 21, 2012

W7 can finally rotate bitmap fonts

With HTML5 canvas and its built-in ability to rotate text, I came across (i.e. learned the hard way) about the limitations of bitmap fonts, such as MS Sans Serif, in XP. XP has trouble rotating bitmap fonts at small point sizes, while Windows 7 does not. So the following HTML5 canvas code works in Windows 7 & Firefox but fails under XP & Firefox:

<html>
 <head>
  <script type="text/javascript">
   window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.translate(100,100);
    ctx.font = "9px MS Sans Serif";
    ctx.rotate(-Math.PI/2);
    ctx.fillText("TEST", 10, 10);
   }
  </script>
 </head>
 <body>
  <canvas id="canvas" width=800 height=500 />
 </body>
</html>

Switching to a TrueType font such as Arial solves the problem. So the lesson is to avoid bitmap fonts such as MS Sans Serif when using HTML5 Canvas.

This change in font handling for Windows 7 is probably related to Microsoft's revamping of font scaling to deal with high-resolution netbooks with tiny screens.

Sunday, June 17, 2012

HTML5 is the holy grail

I was initially excited about the UI design philosophy of Win8 Metro. But then I realized that HTML5 can do 95% of what Metro can, and also be truly cross-platform.

I see HTML5 as the cross-platform holy grail that developers have been seeking since the WORA days of Java 15 years ago. First it was supposed to be Java, then Microsoft embraced and extinguished it, and besides it had too big of a footprint download (and a clumsy download process to boot). Then Flash was supposed to be the universal small-footprint. It was just about to take off, then Apple extinguished it by not supporting it at all (completely skipping the "embracing" step). Then Microsoft finally decided to stop holding back .NET from web development -- the purpose for which it seemingly was originally designed but never delivered upon until Silverlight. But by then Windows market share was too small for Microsoft to force a Windows-only solution on the web world.

Even when it comes to CPU-intensive signal & image processing, Javascript seems to be "fast enough". E.g. these guys show real-time 2-D FFT. Admittedly, the combination of SSE/AVX and multi-threading/multi-core would have provided a 30x speedup, but I've been playing around with real-time 2D graphics in JavaScript and have been amazed at its performance. I was even guilty of premature optimization -- I started out coding for double-buffering the graphics with two Canvases and ended up throwing out the double-buffering because with just one Canvas there was no flicker.

On today's processors, Javascript will be "fast enough" for many applications. E.g., I do scientific software for a living, and I'm partitioning the work into what has to be done natively -- mostly the acquisition and crunching of tens of gigabytes of data at a time -- vs. what can be done cross-platform -- the final post-processing of tens of megabytes of pre-processed data.

Javascript can even access hardware-accelerated 3D with WebGL.

HTML5 is W3C standard. It's not Sun. It's not Adobe. It's not Microsoft. It's W3C.

HTML5 is the holy grail of WORA.