I've been struggling to get a 2-column document to work.
But I just can't get things to hang together the way I want them to.
The basic document design is
The key bits of the style sheet are
The intention is the "Section title" run across two columns. Straight after that, we go into the "sectiontext" div, wherein everything is set in 2 columns.
The problem comes when controlling page and column breaking. The rules I want to have are
1) an imgpair must be in 1 column
2) an imggroup must be on 1 page
3) a subsection should be on 1 page
4) the columns and pages should fill as much as they can
I tried this
But it just doesn't seem to quite work.
I've fiddled around with the font size to simulate having more or less content in each of the divs.
If the font is small, and everything fits in 1 column, there is no drama.
But increasing the font will first force the two subsections together into the 2nd column (leaving the 1st column with just the intro text).
Increasing the font still more (to the point that only 1 subsection fits in a column) suddenly makes both subsections bump to a new page - leaving the intro text marooned on the 1st page.
Increasing it still further (so a subsection is bigger than a column) gives the hoped-for page break between the subsections, but still leaving the intro marooned.
What is frustrating is it almost works... but not quite.
Am I missing something?
I can supply a more complete (but still trimmed down) working example if needed.
But I just can't get things to hang together the way I want them to.
The basic document design is
<div class="section>
<h2>Section title</h2>
<div class="sectiontext">
<p>Text at start of section</p>
<div class="subsection">
<h3>Subsection title</h3>
<p>Text in the subsection</p>
<table>...</table>
<div class="imggroup">
<div class="imgpair">
<h4>Title for first img pair</h4>
<img> <img>
</div>
<div class="imgpair">
<h4>Title for 2nd img pair</h4>
<img> <img>
</div>
<p>caption for the two sets of images</p>
</div>
</div>
<div class="subsection">
<h3>Subsection 2</h3>
...
</div>
</div>
</div>
The key bits of the style sheet are
div.section {column-count: 1; page-break-before: always}
div.sectiontext {column-count: 2; }
The intention is the "Section title" run across two columns. Straight after that, we go into the "sectiontext" div, wherein everything is set in 2 columns.
The problem comes when controlling page and column breaking. The rules I want to have are
1) an imgpair must be in 1 column
2) an imggroup must be on 1 page
3) a subsection should be on 1 page
4) the columns and pages should fill as much as they can
I tried this
div.imgpair {column-break-inside: avoid}
div.imggroup {page-break-inside: avoid}
div.subsection {page-break-inside: avoid}
div.sectiontext {column-fill: auto}
But it just doesn't seem to quite work.
I've fiddled around with the font size to simulate having more or less content in each of the divs.
If the font is small, and everything fits in 1 column, there is no drama.
But increasing the font will first force the two subsections together into the 2nd column (leaving the 1st column with just the intro text).
Increasing the font still more (to the point that only 1 subsection fits in a column) suddenly makes both subsections bump to a new page - leaving the intro text marooned on the 1st page.
Increasing it still further (so a subsection is bigger than a column) gives the hoped-for page break between the subsections, but still leaving the intro marooned.
What is frustrating is it almost works... but not quite.
Am I missing something?
I can supply a more complete (but still trimmed down) working example if needed.