Small Screen Rendering

So Opera changed its home page to make it XHTML1.0 Strict + CSS and that's verrrry good. But they also introduce what they call "Small Screen Rendering". Basically, it's a client-side transformation of the document that makes the document fit into a 176px Nokia cellphone screen, reorders some elements, resizes images to make them fit in and so on.

Well, sorry to say, but that's not a very big deal. There is nothing magic there and I can prove it right now. Let's write a stylesheet that does most of the job.

1. change the document size ; nothing difficult here...

body {
  width: 176px ;           /* nokia 176px screen              */
  border: thick solid red  /* just to see the 'screen' limits */
}

2. then let's cancel all width assignments

*:not(#ImPoSsIbLeId):not(#ImPoSsIbLeId):not(#ImPoSsIbLeId):not(body):not(img) {
  /* the negated ID selectors above are here just to increase specificity */
  width: auto ! important ;
}

3. now, let's remove all positioning, floating, margins, paddings and even text alignment

*:not(#ImPoSsIbLeId):not(#ImPoSsIbLeId):not(#ImPoSsIbLeId) {
  /* the negated ID selectors above are here just to increase specificity */
  position: static;
  float: none;
  text-align: left;
  padding: 0px;
  margin: 0px;
  top: auto;
  left: auto;
}

4. we should not forget about tables ; we have to make them monodimensional

table,tbody,thead,tfoot,tr,td,th,col,colgroup {
  display: block;
}

5. IFRAME are just a pain on a small screen

iframe {
  display : none;
}

6. list bullets have to be better placed, just for readability

li {
  list-style-position: inside;
}

7. last point, we often see in web sites 1pixel wide images

img[width="1"] {
display: none
}

Once the stylesheet is done, we now have to write just a few lines of JS to resize images. If there's a width/height specified on the image, use it, and use the intrinsic image's width and height otherwise.

var l = document.getElementsByTagName('img');
for(var i = 0;i < l.length; i++) {
  if(l[i].width > 176) {
    l[i].height *= 176 /l[i].width;
    l[i].width   = 176;
  }
  else if(l[i].naturalWidth > 176) {
    var e = 176 / l[i].naturalWidth;
    l[i].height = l[i].naturalHeight * e;
    l[i].width  = 176;
  }
}

Done.... You want to give it a try ? No problem. I mean no problem if you use a browser of quality, having a correct DOM implementation and allowing to bookmark JS. In other words, please use Mozilla or Netscape 7...

  1. bookmark the following link in your personal toolbar : PDAize.
  2. open a web page like Opera's example : http://www.nokia.com/
  3. and click on the new bookmark you just created
  4. open a new tab and compare to what does Opera

Well, there is one difference between what Opera does and what Mozilla could do. We could do it much better.

Warning: make sure to read also this recent blog entry about Small Screen Rendering.