Block Elements

Block elements reserve their own space, independent of all other blocks. A block element must be contained fully within its parent, and cannot overlap with any of its siblings (unless the element is absolutely positioned.

Content Sizing

Aside from the border, and padding, the width and height of a block element is determined by its content sizing rules.

A block element with no restrictions will grow as large as necessary to contain the content provided to it. However, it will never out grow its parent so if it can't fit all content, then it will be broken prematurely.

Additionally, an element can have certain restrictions on its width and height from its style. These include:

Static Sizing

A static pt value can be provided for a block element's width or height attributes. Static values can also be given for min-width, min-height, max-width, or max-height specifying how large / small the block can be in the given direction.

INFO

Setting width and height attributes sets those attributes for the element's borders, padding, and content inclusively. But not the margins.

Parent-Relative Sizing

A block element's width, height, min-width, min-height, max-width, or max-height attributes can be determined relative to their parent using a percentage instead of a pt value.

e.g.

<frame direction="row">
	<p max-width="75%">...</p>
	<p>...</p>
</frame>

This would create two paragraphs, side by side, the first of which is 75% of the width while the second takes as much as it requires from the remaining space.

Max Sizing

A block's width or height attributes may be set to max, in which case the element will consume all available space in the specified direction.

Fill Sizing

Finally, a block's width or height attributes may be set to fill, in which case the element will fill the space (in the given direction) left by its siblings.

Absolute Positioning

Typically, an element's position is determined by its parent. However, this behaviour can be overridden through the left, right, top, and bottom attributes.

If any of the above mentioned attributes are set, a block becomes "absolutely positioned" and determines its own position (but still will be contained within its parent).

For example, if left="10pt" then the block will be positioned 10pt away from the parent's left hand wall. Similarly for right, top, and bottom.

Block Spacing

To provide a more natural look to the document, block elements may specify values for space-before-desired and space-after-desired which will affect the positioning of the block before/after them respectively.

For example,

<styles>
  <p>
    <space-before-desired>10pt</space-before-desired>
  </p>
</styles>

will ensure that any p tag will be given at least 10pt of space between itself and its previous sibling.

Block Alignment

Certain block elements (most notably frame) allow additional control over the positioning of their children.

A block's v-align attribute can be top, bottom, or center and is used to determine where along the vertical axis the content should begin.

Furthermore, a block's h-align attribute can be left, right, or center and is used to determine where along the horizontal axis the content should begin.

Children

How the children of a block are arranged relative to one another is determined by the type of parent. For example, a frame with direction="col" arranges all of its children vertically, while if direction="row" it does so horizontally. We'll see some more examples in the future.