Attaching objects to text

In most cases, implementing responsive behavior in a template means that you have to find ways to adapt your layout to the most variable of objects: text.

This is because users have a tendency to enter much less or much more text than you have planned for the layout.

This page contains several best practice examples for working responsively (pun intended) with text.

Subproperties of text

Attaching objects to text, or more precisely to the edges of a text, is made possible by subproperties. Here is an overview of the different subproperties of text objects:

text1.left, -.right, -.top and -.bottom return the X or Y values for the current edges of the text content. Note that the (inner) bounding box of the text content (green) is different from the (outer) bounding box (blue) defined by the "max width" and "max height" properties.

You can go one level deeper to access the subproperties of each individual text line using this syntax: text1.lines[i].x, text1.lines[i].y, text1.lines[i].width and text1.lines[i].height. In this case, .x and .y refer to the upper left corner of the individual bounding box of each line. "i" is an integer starting at 0, i.e. the first text line is referenced by text1.lines[0].

The current number of lines is given by text1.lines.length.

Background objects

To place a rectangle in the background of a text object, simply assign the following sub-properties of the text to the corresponding properties of the rectangle:

X =         text1.x
Y =         text1.y
Width =     text1.width
Height =    text1.height

If you want to have an individual rectangle behind each line of text, you have to use an iteration. See the "Iterated objects" article for an example.

Waterfall principle

Often, you want to maintain a certain distance between text objects (and/or other objects) while allowing them to grow or shrink depending on the content entered. A simple way to implement such a responsive layout is to use the waterfall principle:

Attach the second object to the bottom edge of the first object, then attach the third object to the bottom edge of the second object, and so on... Now, when an object grows, all the objects below it move down (or, in some cases, shrink). Take a look at this example:

The template consists of three different text objects and one image. All four objects are connected to each other in a responsive layout according to the waterfall principle. Here is a list of the relevant properties of each object with their specific expressions:

text1 (Headline)
Y = 50

text2 (Text)
Y = text1.bottom + 20

text3 (Details)
Y = text2.bottom + 20

image1 (Image)
Y = text3.bottom + 20
Max height = 1300 - (text3.bottom + 20)

The waterfall principle does not necessarily have to be applied from top to bottom. It can be applied in any direction. It comes down to choosing a hierarchy of objects in which each object makes room for the objects (hierarchically) above it.

Centering groups of text

The waterfall principle can also be used to center groups of text objects, like you can see in this example:

To achieve this effect, you first need to apply the waterfall principle, i.e. attach the second text to the bottom of the first and the third text to the bottom of the second. Then you need to insert an expression for the Y property of the first text object to automatically move it up or down by the correct amount when one of the text objects grows or shrinks.

Here are the relevant properties:

text1
Y = SUB(675, DIV(ADD(40, text1.height, text2.height, text3.height), 2))

text2
Y = text1.bottom + 20

text3
Y = text2.bottom + 20

The first expression works by starting in the center (in this case 675, since the canvas is 1350px high) and then subtracting half (division) of the total height of the group (addition, including all individual heights and the gaps in between).