My CSS-layout lightbulb has finally lit up !
One of the most serious problems I had been facing with my SVG apps is that the layout and sizing of SVG elements was never right. The interactions of the SVG width and height attributes, the CSS width and height properties, and the rest of the HTML elements baffled me. The behavior was erratic, never identical from one browser to the next, and I had resorted to extreme measures (add window resize handler to programmatically recompute the size of the various elements) to get a half-working and slow layout. Hopefully these days are behind me.
Here are the few rules I have been able to determine which really save the day:
- Do not layout your applications the old way, using invisible HTML tables. This is EVIL and will especially not work if you put SVG elements into table cells. This means you can throw away most of GWT classic layout pannelry: be gone, all com.google.gwt.user.client.ui.ComplexPanel subclasses ! Use simple com.google.gwt.user.client.ui.FlowPanel or com.google.gwt.user.client.ui.AbsolutePanel with the proper CSS styling.
- Forget quirks mode and go to CSS strict mode. This means that all you applications should use a doctype declaration. HTML 5 seems to be the one to use (this will prepare your app for IE9 compatibility):
<!DOCTYPE html>
- Use CSS positionning attributes intensively: left, right, top, down, along with absolute positionning and percentages. This works beautifully and most importantly cross-browsers
To see all these rules in action, you can look at the new version of lib-gwt-svg-edu games. Resizing is much faster, the application can scale to any device size. It also really makes sense now to use SVG push buttons to control your app (instead of classic image-based buttons), as they will scale properly and be rendered at your device top-resolution
Leave a Reply