Autosizing departure board using Html, CSS and JQuery

Question

I've got to develop an auto scaling arrivals and departures board at work.

It's started out easily enough with me creating a table with percentage based column widths (and the overall table being 100% width).

For now, I've got a small piece of JQuery letting me change the scale of my text but its only to prove the concept.

I'm really after being able to automatically scale the font and table cell sizes according to the available screen width and height. I do know the maximum string length allowed for each column cell so I could, potentally, automatically set the em/px size based on some calculation.

However, I'm a bit stuck as where to start. I'm actively developing this now but my initial thoughts are:

scale = maxstringwidth_inpx / currentcellwidth_inpx

Where I'd calculate maxstringwidth by having a lookup table and the font metrics for a character 1em in size on the screen.

The cells are all assigned screen percentages so I should be able to read those directly.

Then I can set the font size, ie:

$("body").css("font-size", currentfontsize_px * scale);

Does this sound a feasible approach? It also raises questions about the padding above and below each string in each cell but I'm sure I can do someting similar there too.

To qualify where I'm stuck:

1. Are there examples of this kind of thing out in the wild (I couldn't find any)
2. Does my approach have pitfalls?
3. Have you done it before and can share wisdom/techniques?
4. Have I shot myself in the foot already and should consider a different approach?

I have mentioned using Flash to the PM as a means of autoscaling the text as we can then do a lot of the font metrics in ActionScript. However, I'm only just starting out with that using the .NET flash IDE so I'd be limited to that as a development platform.

Thanks for any tips, examples and advice!

Simon

Answer 1

CSS and HTML can be very finicky when it comes to this sort of thing especially since font-size can be very different on different computers. Case in point, if you are using the font, say, Verdana. It's a pretty common font. Unfortunately the way Macs, Windows, and Linux renders it is slightly different. There's really no way to guarantee the width/height of a 'nice' (non-monospaced) font, unless the application will be used in a very strictly controlled environment.

I'm not normally a proponent of using Flash, but, if that's an option, it's really the only way to guarantee something will look as expected since you can embed fonts and, like you mentioned, there is a lot more control over typography in Flash than there is in CSS. You're going to be doing some pretty heavy development in CSS and jQuery to achieve the same effects--and even then, you will still have difficulties between browsers and OSes.

But, if you do decide to do this in CSS/jQuery/HTML, make sure you use ems everywhere--no pixels.

Good luck, and let us know what you decide to do in the end.

Answer 2

To avoid any issues of different font sizes on different OS/browsers you could Calculate text width with Javascript to make sure that the base size that you start scaling from is correct.