Appearance
Inline Elements
An inline element consists of content that can be arranged in a (wrapped) line. For example:
- Text (styled and unstyled)
- Images
- Hyperlinks
In contrast to block elements, inline elements may only have other inline elements as children and must be the descendant of a block.
Sequential inline elements (two or more inline siblings in a row) are concatenated into a series of lines within their parent.
Inline Alignment
The exact layout of line wrapping can be determined by a block's text-align attribute. This can be left, right, center, or justified.
Note that this is different from h-align and v-align which determine where block elements should be positioned relative to one another.
<frame>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
<frame/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<frame text-align="right">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
<frame/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<frame text-align="center">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
<frame/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<frame text-align="justified">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.
<frame/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Wrap
Additionally, blocks may specify wrap="none" which asserts that text should avoid wrapping onto multiple lines, and should instead be truncated.
For example,
xml
<p width="50%" text-align="right" wrap="none">
This is a very long piece of text.
</p>will try to fit the text (right aligned) into a width 50% of the frame's parent. However, if the text is too long it will truncate it to fit on a single line (e.g. to this is a ver...).