Differential D10714 Diff 27686 source/layout/alignment.rst

Changeset View

Standalone View

source/layout/alignment.rst

This file was added.

		1		Alignment
		2		=========
		3
		4		Purpose
		5		-------
		6
		7		One of the most important aspects of presentation is alignment and
		8		placement of controls. Its theoretical foundation is based on Gestalt
		9		psychology. Human perception tends to order experience in a manner that
		10		is regular, orderly, symmetric, and simple. Visual impression is
		11		generated to an emergent whole based on several principles, called
		12		Gestalt laws. Two basic laws are:
		13
		14		- Law of proximity: an assortment of objects that are close to each
		15		other are formed into a group
		16		- Law of similarity: objects will be perceptually grouped together if
		17		they are similar to each other
		18
		19		Placement of controls should be carefully done according to Gestalt
		20		theory.
		21
		22		Guidelines
		23		----------
		24
		25		Labels
		26		~~~~~~
		27
		28		- Align labels to the right and connected widgets to the left, making a
		29		group of form widgets appear to be center aligned. In Qt5, using a
		30		QFormLayout handles this correctly for you.
		31
		32		.. container:: flex
		33
		34		.. container::
		35
		36		.. figure:: /img/Form_Align_KDE3.qml.png
		37
		38		BAD
		39		KDE3 form alignment
		40
		41		.. container::
		42
		43		.. figure:: /img/Form_Align_KDE5.qml.png
		44
		45		GOOD
		46		Plasma 5 form alignment
		47
		48		Controls
		49		~~~~~~~~
		50
		51		- Align groups of items vertically rather than horizontally, as this
		52		makes them easier to scan visually. Use horizontal or rectangular
		53		alignments only if they greatly improve the layout of the window.
		54		- Align a group of widgets to the left. This makes use of space more
		55		efficiently.
		56
		57		.. container:: flex
		58
		59		.. container::
		60
		61		.. figure:: /img/Form_Align_OSX.qml.png
		62
		63		BAD
		64		OSX form alignment
		65
		66		.. container::
		67
		68		.. figure:: /img/Form_Align_KDE5.qml.png
		69
		70		GOOD
		71		Plasma 5 form alignment
		72
		73		- Left align controls over multiple groups (in case of right-to-left
		74		languages mirror the alignment). The visual anchor facilitates
		75		scanning of content, and left-hand alignment fits as well forms that
		76		have been oversized individually.
		77
		78		.. container:: flex
		79
		80		.. container::
		81
		82		.. figure:: /img/Form_Align_NO.qml.png
		83
		84		BAD
		85		no alignment over controls
		86
		87		.. container::
		88
		89		.. figure:: /img/Form_Align_YES.qml.png
		90
		91		GOOD
		92		left aligned controls
		93
		94		- Keep track on label size; avoid big differences in text length (even
		95		after translation), that could result in much white space for
		96		multiple aligned controls.
		97
		98		.. figure:: /img/Form_Align_Long.qml.png
		99
		100		BAD
		101		Avoid very long captions
		102
		103		- In some cases it may be useful to visually separate groups of related
		104		options within one group box to facilitate scanning of the dialog. In
		105		that case, put a vertical, fixed-size spacer of 16px height between
		106		the options.
		107
		108		.. figure:: /img/Form_Align_Space.qml.png
		109		:alt: Separating groups of related options with a vertical spacer.
		110
		111		Separating groups of related options with a vertical spacer.
		112
		113		Check boxes and Radio buttons
		114		~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		115
		116		For more details on alignment of :doc:`radio buttons </controls/radio>` and :doc:`checkboxes </controls/checkbox>` see the detailed HIG pages.