Multipage column layout

OL Connect Professional Designer
1

I’ve been given a new challange by my dear boss. So for most part of the day I’ve been playing around in Designer, but I can’t quite get things right.

In my test scenario I just have a master page for the first page, one for all other pages (smaller header than the former) and 1 section filled with 18 Lorem Ipsum paragraphs.

The target is a multipage column layout. With this css I’m coming close but not quite there:

body {
-moz-column-count: 2;
-moz-column-gap: 1cm;
-webkit-column-count: 2;
-webkit-column-gap: 1cm;
column-count: 2;
column-gap: 1cm;
width: 100%;
margin-top: 3mm;
/height: 24.5cm;/
}

431×694 29.9 KB

Adding the height (e.g. height: 24.5cm;) doesn’t really help. It just moves the “overflow” to a third column.

594×591 49.7 KB

Obviously the target is that this “overflow” goes to a second page. I’ve played with every combination of page-break-before and page-break-after on the p tag I could think of, but nothing helps. I’ve also tried wrapping all the p tags in a container div and applying the above css to that div. No avail.

So I must be missing something. My big question for you is, what?

By the way. In the real live template I will be loading an externally generated html file instead of the Lorem Ipsum p tags with some variant of

query(‘html’).loadhtml(‘snippets/article.rhtml’);

This external html will mainly consist of h, p and ul (+ li) tags.

As always, every idea is welcome!

2

I don’t think there’s an easy way in Connect to achieve that, at least it’s not part of a built-in functionality.

It may be possible to do it with some extended and sophisticated JavaScript to control the page break on columns, but that’s certainly not done simply.

3

While I certainly value your answer I really hope you’re wrong and that someone else has already found a relatively easy way to do this. Doing this with JavaScript would indeed need a lot of sophistication, but I still think this should be possible without. In fact I don’t really understand why the pagination fails to create the second page anyway.

Maybe I should try to wrap the p tags in a single row single cell table. Tables seem to trigger pagination just fine.

4

I really hope you’re wrong

You do realise that you are talking to someone who works for Objectif Lune?

5

Oops. :blush: No, I didn’t. Well, I guess he won’t be wrong then.

Nevertheless I can still hope someone has already put together the “extended and sophisticated JavaScript” Journeyman mentioned.