Bottom align text

Discover how to align text to the bottom of a positioned box with a few CSS tricks. These techniques can be applied to various use cases, for example: the address block of a letter or invoice or a personalized phrase combined with copy fitting (auto scaling) on the front side of a post card.

Quick note! At this stage it requires a short CSS fragment (mea culpa) but things will be turned into a feature to hide these technical aspects in a future version of OL Connect Designer.

The recipe

Before we begin, you will need to create a new print template and use the Insert Positioned Box icon on the toolbar. We’ve used a simple data model containig a text field holding the first name of the recipient.

Preparing the content

  1. Type a short greeting and insert an expression for the first name.

There are various ways to add an expression: double click the data field in the Data Model view inserts the expression at the cursor position or simply type the name of the data field between double curly braces). At this stage your text will look something like this: Hey {{first}}

  1. Select Paragraph from the Text Elements drop down/combo on the toolbar (the first dropdown on the toolbar). At this stage you have a box containing a short paragraph.

Underwater this means there is <div> element (our box) containing a <p> element (the paragraph). This is also shown in breadcrumbs when placing the cursor in the text. Notice how the path states: div > p > ~content.

Setting up the style properties

With the elements setup we can have a look the alignment. This is where CSS comes in handy.

  1. Right click the box and choose Box… from the contextual menu. The Box Formatting dialog appears.
  2. Click Advanced. The Advanced Formatting dialog allows you to input style properties that are not exposed in the user interface.
  3. Add the CSS properties as shown in the picture below and click OK (Apply) to set the bottom alignment.

The following image shows the same technique applied to an address block. Each line is a paragraph. The beauty about this paragraph approach is that the underlying engines automatically collapses empty paragraphs which mimics the ‘skip empty line’ concept.

Background information

Below a short explanation of the used CSS properties. Although OL Connect Designer supports the flex model it is important to understand that not all CSS propeties may work. OL Connect Designer is current running the same engine as Firefox 38.

Property Value Description
display flex The children of a flex container (our paragraph) can be laid out in any direction.
flex-direction column Defines the direction for the flex container, as we want to layout the information to the bottom we use the column.
justify-content flex-end Stack our flex items from the end.

Users with more experience with CSS stylesheets may prefer to add a style rule to one of their stylesheets files. The snippet below shows a class name based rule.

.address-block {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}