Log in / Register

Forum › How do I...?

Merging column for notes in normal flow

Mike
Hi guys,

I have a normal flow, which is formatted into 3 columns.
At some point in the flow I want to insert notes about content, meaning note can be

top/middle/bottom left/right taking one/two/three columns, height being auto.

Please see the ANSI below for understanding what I mean by "mergingcolumns".

What would be the best CSS to achieve this?

 __________ __________ __________
|          |          |          |
|          |          |          |
|          |          |          |
|          |          |          |
|          |          |          |
|          |          |          |
|          |          |          |
|          |__________|__________|
|          |                     |
|          |         NOTE        |
|          |                     |
|__________|__________ __________|

 __________ __________ __________
|          |          |          |
|          |          |          |
|          |          |          |
|          |          |          |
|          |          |          |
|          |          |          |
|          |          |          |
|__________|__________|__________|
|                                |
|             NOTE               |
|                                |
|__________ __________ __________|

jim_albright
Have you considered just using the latter case for both? That is already supported.

Jim Albright
Wycliffe Bible Translators

Mike
Hi Jim,

Could you please expand on how the latter case is supported?

Thanks.
mikeday
You can use page floats:
<html>
<body>

<div style="float: bottom; border: solid red thin">
Notes at the page bottom.
</div>

<div style="columns: 3; column-rule: solid thin">
Some text goes here.<br/>
Some text goes here.<br/>
Some text goes here.<br/>
Some text goes here.<br/>
Some text goes here.<br/>
Some text goes here.<br/>
Some text goes here.<br/>
</div>

</body>
</html>


Or you can use a column float that spans columns:
<div style="columns: 3; column-rule: solid thin">
<div style="float: prince-column-bottom; column-span: all; border: solid red thin">
Notes at the column bottom.
</div>
Some text goes here.<br/>
Some text goes here.<br/>
Some text goes here.<br/>
Some text goes here.<br/>
Some text goes here.<br/>
Some text goes here.<br/>
Some text goes here.<br/>
Some text goes here.<br/>
Some text goes here.<br/>
</div>

Although for this last one I've just noticed that the column rules cut across the column float, which probably is not what you want in this situation. :|
Mike
I had a solution worked out with float however the problem was that I need explicitly specify 'notice box' width to take 2 columns and this is something I want to avoid.

The latter solution with column-span is exactly what I was looking for with the problem of column rules cutting across. Is there any way/hack to cancel them?

jim_albright
The footnotes area

Footnotes are placed within the @footnotes area of the page, which can be styled within @page rules. Note that if there are no footnotes on a page then the footnotes area will not be displayed on that page at all.

CSS

@page {
@footnotes {
border-top: solid black thin;
padding-top: 8pt
}
}

This rule adds a border and some padding to the top of the footnotes area.

I believe this makes footnote across all columns. I could be wrong though.

Jim Albright
Wycliffe Bible Translators

Mike
Thanks, Jim.

But it's not only bottom where I would like to place note-box.

top/middle/bottom left/right taking one/two/three columns, height being auto.


If footnote's would work for bottom, the question remains open for top/middle...
mikeday
We can probably fix the issue with column rules overlapping into column floats in a future release of Prince. One quick fix in the meantime is to apply a white background to the column float, to draw over the rules.

Beyond that, I'm not quite sure what layouts you want to create, and how you want to create them. Are you trying to avoid specifying how many columns it should span, and have the size of the content determine the spanning? Because that isn't possible yet in CSS.