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.