A
Anonymous
Guest
This is really odd. Whatever html / css strategy I use, the first page prints as if it has a top margin, whereas the remaining pages do not. (At least all of the remaining pages that contain images. The ones that have text may as well, but I cannot determine that.)
The latest desperation of many renditions uses flexbox css against (old) html tables.
Here is the css code. (Note that the print stylesheet is separate because the @print element did not work for me in Chrome)
and here is a excerpt of the page (after PHP processing)
I generate each page through PHP. Odd pages contain images, even pages contain text that will print behind the odd pages when printed duplex.
BTW I prefer the extra space at the top of the page.
The latest desperation of many renditions uses flexbox css against (old) html tables.
Here is the css code. (Note that the print stylesheet is separate because the @print element did not work for me in Chrome)
Code:
<style type="text/css">
td {
width: 45%;
margin: 1%;
}
td img {
display: block;
width: 100%;
}
ul {
height: 5.25in;
padding: 15%;
flex-direction: column;
}
li {
text-align: center;
list-style: none;
}
.facts {
width: 70%;
}
tr, ul {
display: flex;
justify-content: space-around;
}
</style>
<style type="text/css" media="print">
.table-page {
page-break-after: always;
}
</style>
Code:
<table class="table-page">
<tr>
<td><img src="albatross.png" alt="Albatross"></td>
<td><img src="beaver.png" alt="Beaver"></td>
</tr>
<tr>
<td><img src="blackbear.png" alt="Black Bear"></td> <td><img src="cat.png" alt="Cat"></td>
</tr>
</table>
<table class="table-page">
<tr>
<td class="facts">
<ul>
<li>Known as "Busiest Animal" that is constantly changing its habitat.</li><li>Lives in lodges made of branches and mud.</li><li>It's the largest rodent.</li> </ul>
</td>
<td class="facts">
<ul>
<li>The largest of flying birds with a wingspan of up to 12 feet.</li><li>Swoops over the water then dives in to catch its prey.</li><li>Eats squid, octopus and other fish.</li> </ul>
</td>
</tr>
<tr>
<td class="facts">
<ul>
<li>Sleeps 13 to 14 hours a day.</li><li>Heaviest on record weighed 50 pounds.</li><li>Has powerful night vision.</li> </ul>
</td>
<td class="facts">
<ul>
<li>Excellent tree climber.</li><li>Eats all summer to hibernate in the winter.</li><li>Loves honey.</li> </ul>
</td>
</tr>
</table>
<table class="table-page">
<tr>
<td><img src="cheetah.png" alt="Cheetah"></td>
<td><img src="bookcover.png" alt="bookcover"></td>
</tr> ...
BTW I prefer the extra space at the top of the page.