There is a common form design challenge where we want to place parallel columns of text side-by-side on a page. We want the text in each column to grow vertically and to split over to the next page(s) as needed.
One Growable, Splittable Field
First the basics: Before tackling side-by-side fields, how to make a single field growable and splittable:
- Make sure you have saved your form as an "Adobe XML Dynamic Form" or as an "Adobe XML Form".
- Drag a text field on to your canvas.
- On the Object/Field tab select: "Allow Multiple Lines"
- On the layout tab select: "Expand to Fit" under the Y: measurement.
- For all subforms above this field in the form hierarchy select "Auto fit" under the layout tab
- For all subforms above this field in the form hierarchy select "Allow Page Breaks Within Content" under the Object/subform tab.
If you fill that field with enough data, it will grow to the bottom of the page. Fill it with more data and it will cause an overflow. A new page will be added and the field will split between pages.
Two Growable, Splitable, Positioned Fields
The next part of the challenge is to make this work for growable fields situated side-by-side. If the parent subform has positioned layout, then it’s fairly easy. Just place the two fields side-by side.
Two Growable, Splitable, Flowed Fields
If the parent is flowed left-to-right (Western text) then you won’t get the effect you want. If the left-most field has enough data to overflow the page, then the result is that the other growable field doesn’t appear until the second page. This is because in a flowable environment, the layout algorithm will finish layout for the first field before starting the second. Once we have spilled over on to a new page we don’t go back and fill in more data on a previous page.
To make parallel columns work in a flowed environment, add the two fields to a table. Make them sibling cells in the same row. The layout algorithm for table rows will negotiate the row height between all the cells, and will make sure they start and end together.
When the layout algorithm wants to split content, between pages, there’s a step where it negotiates a split point. When there are side-by-side objects, they need to be splittable at the same point in order to successfully split. Some objects are not splittable: e.g. rectangles, images. If they are side-by side with a splittable object, the form will not split.
Multi-line fields are splittable by default. However, for side-by-side multi-line fields to split, we need to find a common baseline. i.e. we cannot split in the middle of a line of text. We either split above or below a line. Side-by-side text fields need to have lines that end at the same point in order to be splittable. There are a large number of properties that can cause lines to be offset from one another — including: top margin, paragraph space before/space after, line spacing, vertical justification, typeface, font size, vertical scale. For example, if two side-by-side fields have top margins that differ by 3mm, then they will not share any common baselines — and we will not find a split point. We are working on changes to the split point calculation that will be more tolerant of baseline mismatches. But until then, you need to be very careful to make the properties of your fields exactly the same.
Blank Pages in Output
Once you have a form where content is not splittable and is too big for a page, you will often see blank pages in your output. The reason for this is because of the way the layout algorithm fills pages. It works something like this:
- Attempt to place an object on a page
- If the object is too large for the remaining space on a page, attempt to split the object to fit on the page
- If the object does not have a split point in the available space, start a new page
- If the object does not fit on the new page, attempt to split it. If it does not have a split point in the available space, start another new page.
- If the object still does not fit, then place the object on a page and truncate the content
Newer versions of the XFA processor have managed to reduce the number of blank pages we see. In a sense, I regret that we "fixed" those conditions because they are usually a warning sign that there is a layout problem that needs to be fixed.
A common use for side-by-side growable fields is to show text side-by-side with a translation. The attached sample shows the preamble to the Declaration of Human Rights in French and English. It shows them a second time with the fields offset slightly so that they couldn’t split.
The debugger has been updated to include a new warning for splittable table rows that have more than one multi-line field. Eventually the same warning should appear for positioned content.
BTW if you’re using the debugger, you’ll want to monitor the post where it was introduced for occasional updates.