Skip to content

Inline Elements

An inline element consists of content that can be arranged in a (wrapped) line. For example:

  1. Text (styled and unstyled)
  2. Images
  3. 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...).