Layout

From Gui

Contents 1 Horizontal packing 1.1 Toolkits 2 Vertical packing 2.1 Toolkits 3 Grid packing 3.1 Toolkits 4 Absolute positioning 4.1 Toolkits 5 Other toolkit notes

Horizontal packing

• Horizontal padding only, widget always fills full height
• Widget can be stretched to cell or extra padding can be automatically added

Toolkits

• Tk allows packing towards the left or right on any Widget/Frame, which behaves similarly
• QT works like this
• GTK works like this
• XUL has more padding options, through CSS
• HTML can model something similar, through a CSS rule like .hbox > * {display:inline;}

Vertical packing

• Vertical padding only, widget always fills full width
• Widget can be stretched to cell or extra padding can be automatically added

Toolkits

• Tk allows packing towards the top or bottom on any Widget/Frame, which behaves similarly
• QT works like this
• GTK works like this
• XUL has more padding options, through CSS
• HTML can model something similar, through a CSS rule like .vbox > * {display:block;}

Grid packing

• Basically, horizontal and vertical packed cells that are tied to each other in row/column relationships
• Widgets may be padded horizontal and vertically
• Widgets may span multiple cells (rows/columns)

Toolkits

• Tk works like this
• QT works like this
• GTK works like this
• XUL has more padding options, through CSS
• HTML can model something similar, through <table>, but the semantics are wrong.
  • CSS3 pseudotables may "solve" this

Absolute positioning

• Widgets are absolutely sized and positioned withing the container

Toolkits

• Tk's Place manager works like this
• GTK's Layout and Absolute layouts work like this
• QT allows this behaviour on any Widget/Frame
• XUL can model something similar, through CSS
• HTML can model something similar, through CSS

Other toolkit notes

• HTML and XUL allow much more flexible document-style layouts through CSS' "box model" and "floats", this may impede automatically converting especially HTML layouts to other formats