Because the Curl language relies on nested graphical containers to place objects, it is helpful to understand the relationship between objects and their containers as well as the relationship between sibling objects within the same container.

Graphical objects can be sized, aligned, and formatted according to their object property types. Each type of graphical container will have specific defaults used for alignment.

You may think of aligning graphical objects from two perspectives:

• Alignment is specified by the parent container. All child objects are aligned in the same manner.

• Alignment is individually specified by each child object. This allows each child object to individually specify its alignment. In this case, the parent container can override the child specifications.

Alignment Defaults

Before we get into alignment details, let's back up and discuss the default behavior. Each graphical container will align its children using its own particular default behavior. The default alignment behaviors of HBox and VBox, two of the most common containers, are as follows:

Let's look an an example showing several different objects in an HBox. Each object is aligned by its vertical origin, whose location is described in the following table.

Clearly, the various built-in Curl graphical objects implement quite a variety of different alignment behaviors.

Specifying Alignment on Child Objects

Many containers, such as HBox, use the outside origins of child objects to align the child objects relative to one another. The outside origin is a certain defined point on each graphical object that is available for use by its graphical parent for aligning graphics within the parent.

You can change an object's outside origin location by setting its vorigin or horigin option to one of the following string values:

• Possible values for vorigin are: "top", "center", "bottom"

• Possible values for horigin are: "left", "center", "right"

You can also specify an object's origin using a numerical value between 0 and 1. The following example shows several possible locations of an object's origin, at the corners and midpoints of the object's bounding box.

Move your pointer over the shaded area for numerical values you could use to specify outside origin locations. (You may need to click on the shaded area first, to activate this behavior.)

In the next example, we set the vertical origin to a value of "center" for each child object. Note that vorigin = 0.5 is equivalent to vorigin = "center".

Aligning Objects Specified by the Parent

Instead of specifying the alignment using each child object, we can often change the parent container's alignment behavior. Many containers have valign or halign options that change their alignment behavior. If these options are set to values other than "origin", they will also override any outside origins specified by a child object.

• Possible values for valign are: "top", "center", "bottom", "origin" (default)

• Possible values for halign are: "left", "center", right", "origin" (default)

In the next example, we add valign = "center" to the parent container. This aligns all children at the center of the HBox.

In conclusion, you may think of aligning graphical objects from two perspectives.

• By placing the responsibility on the children. Each parent container has its own way of displaying its children, often using the children's outside origins. You can change the children's outside origins to accommodate the parent's display algorithm.

• By placing the responsibility on the parent. Most container objects use the halign and/or valign options to provide an additional way to control alignment.