173.11.94.130: better CSS examples

173.11.94.130 — Mon, 15 Jun 2009 22:40:58 GMT

better CSS examples

←Older revision		Revision as of 22:40, 15 June 2009
Line 10:		Line 10:
	* [[GTK]] works like this		* [[GTK]] works like this
	* [[XUL]] has more padding options, through CSS		* [[XUL]] has more padding options, through CSS
-	* [[HTML]] can model something similar, through a CSS rule like <code>.hbox * {display:inline;}</code>	+	* [[HTML]] can model something similar, through a CSS rule like <code>.hbox > * {display:inline;}</code>

	== Vertical packing ==		== Vertical packing ==
Line 23:		Line 23:
	* [[GTK]] works like this		* [[GTK]] works like this
	* [[XUL]] has more padding options, through CSS		* [[XUL]] has more padding options, through CSS
-	* [[HTML]] can model something similar, through a CSS rule like <code>.vbox * {display:block;}</code>	+	* [[HTML]] can model something similar, through a CSS rule like <code>.vbox > * {display:block;}</code>

	== Grid packing ==		== Grid packing ==

173.11.94.130: Summary of Layout findings

173.11.94.130 — Mon, 15 Jun 2009 22:20:13 GMT

Summary of Layout findings

New page

== 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 <code>.hbox * {display:inline;}</code>

== 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 <code>.vbox * {display:block;}</code>

== 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

Layout - Revision history

173.11.94.130: better CSS examples

173.11.94.130: Summary of Layout findings