<Glazblog/> <Glazblog/>
My stuff
Home No Comment Archives Ol'Stuff Glazoucam
Logs
Yves Lafon Karl Dubost David Hyatt Tristan Nitot Tantek Çelik
News
Le Monde IHT The Register CNN Euronews
Small Screen Rendering
Try it! (Gecko only)
Bookmark it !
PDAize !
My photo of the day
20021028
Valid XHTML 1.0!
Friday, October 25, 2002
Thursday, October 24, 2002
Small Screen Rendering (II)

If you are a frequent visitor of this blog, you read what I recently wrote about Opera's new PR explosion, Small Screen Rendering. I succeeded writing a small bookmarklet with just a dash of CSS styles and Javascript doing exactly the same thing.

I spent a few cycles on this and now have a CSS-only version of it. It means that Mozilla/Netscape users can

  1. test any web page for small screens, creating a new dedicated profile having this stylesheet as its chrome/userContent.css
  2. make a version of the software dedicated to small screens just adding the contents of the stylesheet to /layout/html/document/src/html.css

Small screen rendering is not an "absolutely phenomenal technology", it's just a stylesheet.

View from my flat

Today, 08am.

Wednesday, October 23, 2002
Spam

Just received a spam message containing this image. Hmmm. I haven't read the container and I don't care about it but these people know how to advertise :-)

Monday, October 21, 2002
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.

Visit counter This page is powered by Blogger. Isn't yours?