fluid fullpage layout
Added by Michael Buro over 10 years ago
I'd like to port a game server project (java server + html5/javascript + websockets) to wt.
The existing GUI scales widgets/margins/padding/text when the browser window is resized.
It also displays the game position on a full-window canvas and occasionally renders html buttons on top of it.
How can this be accomplished in wt?
Of great help would be a code snippet that centers "Hello World" in the browser window and scales the font size to say window-width/25 pixels - and reacts to resize events correctly.
Thanks in advance!
Replies (2)
RE: fluid fullpage layout - Added by Koen Deforche over 10 years ago
Hey,
I don't believe there's a CSS-only trick to do that.
But you can catch a window resize event and configure a font-size on the
element based on it, and make sure other font sizes use relative sizes (e.g. 110% or 'smaller') which scale relative to the parent font. Same trick goes for margins/paddings/etc... if you use 'em' or 'ex' to express sizes instead of 'px' as they relate to the font size.
Regards,
koen
RE: fluid fullpage layout - Added by Michael Buro over 10 years ago
OK, thanks. I will give it a try.
Perhaps support for fully scalable user interfaces built with vector gfx widgets qualifies for future work ;-) It would simplify development for multiple devices considerably.