Archive for February, 2012

Prototyping in HTML


Over the weekend, I built an e-book reader prototype to demonstrate some ideas that might make the digital book reading experience better. Although I was prototyping a native application, I found the easiest way to build it was with HTML, JavaScript, and CSS. Once CSS regions make it into all mobile browsers, I might put some more time into this concept and build a real browser-based e-book reader (that works exactly how I want it to).

CSS Regions: What’s Possible Now, and What’s Coming


I just made a quick screencast to show the current state of CSS Regions, and to demonstrate some new capabilities that will be here soon. In general, there are two aspects to CSS Regions:

  1. The ability to have text automatically flow between regions.
  2. The ability to hook into that flow using JavaScript in order to create more dynamic layouts.

If you use Chrome (Adobe’s work on CSS Regions is in WebKit which Chrome uses), you can go ahead and see text flow already working (including Chrome for Android). Other browsers have already committed to supporting CSS Regions, and we should know more about when their implementations will land soon. Let me know below if you have any comments or questions.

CSS Regions Support in Google Chrome for Android

I’ve been working on some CSS Regions prototypes recently (if you’re new to CSS Regions, check out this post), so when the Chrome for Android beta came out the other day, I decided to see how some of my samples looked on mobile. It turns out, they work perfectly:

The CSS Regions capabilities currently in Chrome are pretty rudimentary, but I’m also working with some nightly WebKit builds which definitely take the feature to the next level (they include CSS Object Model support which enables the scripting of CSS Regions — that’s when they get really interesting). I’ll have plenty more samples and prototypes in the near future.

Setting Text Selection Colors in JavaScript

If you’re building any kind of a text editor in JavaScript, you might want to be able to dynamically set or change the text selection color. I discovered it wasn’t as easy to do as I expected it to be, so I thought I’d share the code. I created this extreme (and admittedly, somewhat obnoxious) example showing the selection color changing as the mouse moves, but the core of the code is something like this:

var ss = document.styleSheets[0];
ss.insertRule('#content::selection {color: #'+
              newForegroundColor+'; background: #'+
              newBackgroundColor+';}', 0);

Note that I only tested this code in Chrome and Safari (I’m only targeting WebKit browsers for now), however it can work with Firefox with the correct "moz" prefixed style name. I haven’t yet tested or investigated IE.

If you know another way of changing text selection properties in JavaScript, let me know.