Forum Bugs

Page contents overlapping footnotes area

mbaker00
I have been seeing problems in numerous documents I've been testing in several versions of Prince including the current v11. In some pages a block of the page content will flow over into the footnotes area creating overlapping text. I'll include an attachment from a page and a section of the html and the whole css file. The html segment won't contain enough text to reproduce the error on its own. I can send the document to the developer if needed. I suspect the float on this <div> is part of the problem, but usually the floated <div> divides properly from the bottom of one page to the top of the next and sometimes it just bleeds into the footnotes area. Most of the time it works fine dozens or hundreds of times in several documents. Hopefully I've been clear and included enough information that the problem is understandable.
Thanks,
Michael

The attached PDF of a page shows overlapping text at the bottom in the footnotes, and there is a line that is hidden by the overlapping footnotes.

This is a small section of the html. It only contains two <article> whereas the original contains hundreds.
<!DOCTYPE HTML>
<html xmlns:xs="http://www.w3.org/2001/XMLSchema">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" type="text/css" href="../../css/DB-WB.css">
      <link rel="stylesheet" type="text/css" href="../../css/DB-WB-print.css" media="print">
      <title>Deed Book A</title>
      <meta name="author" content="Michael D. Baker">
      <meta name="subject" content="Book">
   </head>
   <body>
<div class="transcription column-type">

<article id="kychr-db-a-239">
  <h3 class="article">John Thompson Sr. to James Thompson Jr.</h3><a href="#kychr-db-a-239"></a>
  <aside class="fn">The 160 acres was surveyed for John Thompson 10/28/1798 and recorded in CCSB 1:192 on commissioners certificate #3712. The 100 acres was surveyed for Thompson 4/13/1803 and recorded in CCSB 2:192 on Christian County certificate #18. The 200 acres was surveyed for Thompson 3/16/1807 and recorded in CCSB 4:163 on Christian County certificate #1169. The final 100 acres was surveyed for William Hopson, assignee of James Thompson, John Thompson, Margarett Thompson, 12/21/1813 and recorded in CCSB 6:170 on Christian County certificate 2742. See survey to John Thompson 10/28/1798 CCSB 1:192 commissioners  certificate #3712 for 160 acres.
  </aside>
<p>Know all men by this presants that I John Thompson Sen of the county of Christian and State of Kentucky do hereby bargin Sell and Convey unto James Thompson Jnr of the State and County aforesaid all my Rite title Interest demand and Claim which I hold to four tracts of Land Situate Lying and being in the county of Christian and State aforesaid on the west fork of Pond river and known and Discribed as follows (to wit) one in the name of John Thompson for 160 acres it being a part of 200 acres Cert. No 3712 granted to the Said John Thompson by the Court of Commissioners in 1798 one other in the name of John Thompson for 100 acres Certificate No 18 Granted to him by Christian County Court in May 1801 one other in the name of John Thompson Snr for 200 acres Granted to him by Christian County Court No 1169 and granted Ap<sup>l</sup> 1803 one other in the name of John Thompson asse of Margret Thompson for 100 acres Cert<sup>t</sup> No. 2742 which was granted to the s<sup>d</sup> Margaret Thompson by the County Court of</p>
<div class="pageNo"><span epub:type="pagebreak" id="page433" title="433"/>[page 433] 422</div>
<p>Christian Ap<sup>l</sup> 1805 all of which plats and certificates is Register<sup>d</sup> in the Land office of the State afforesaid And I do hereby Authorise and impower the Register of the land office afforesaid now in office or his Successor if not done until successor his is appointed to Isue the Pattens for the afforesaid four several Tracts of land in the Name of the aforesaid James Thompson hereby Ratifying and confirming what my said Attorney the Register of the land office aforesaid may do in and about the Premises In witness whereof I have hereunto set my hand and seal this 7th Day of June 1808</p>
<div class="BigSigDiv">
  <div class="signed">John Thompson (seal)</div>
</div>
<div class="BigWitDiv">
  <div class="witness">Simon Lindley</div>
  <div class="witness">John Lindey</div>
  <div class="witness">Ann Lindley</div>
</div>
<p>Christian County Sct Clerks office 23 June 1808</p>
<p>This day came before me John Clark clerk to S<sup>d</sup> County Court the within Named John Thompson Sn<sup>r</sup> and acknowledged the within letter of Attorney and Transfer unto the within Named James Thompson Jr as and for his Act and deed hand and seal and agreed that the same might be Recorded as such and agreeable to an act of Assembly in such Case made and provided I have Duely Recorded and examin<sup>d</sup> the same in my office in Deed Book A Page</p>
<div class="clerk">Jn<sup>o</sup> Clark</div>
</article>

<article id="kychr-db-a-240">
<h3 class="article">John Thompson Sr. to James Thompson Jr.</h3><a href="#kychr-db-a-240"></a><div class="pageNo"><span epub:type="pagebreak" id="page434" title="434"/>[page 434] 423 434</div>
<p>Know all men by these presents that I John Thompson of the common wealth of Kentucky Christian county for and in consider of the sum of five Hundred Dollars lawful and Current money of the commonwealth afforesaid to me in hand by James Thompson of the same place well and truly paid at or before the sealing and Delivering of these presents the Receipt and payment whereof is hereby acknowledged hath Bargaine<sup>d</sup> sold and deliver<sup>d</sup> and by these presents According to a due form of law do bargain sell and deliver to him the following property (to Wit) one Waggon and four pare of geers with Iron chanes and suitable Double trees with a Log chain &amp;c also thirty head of Neat cattle all Marked with a Crop off the Right Ear and a piece off the upper side of the left also seventeen Head of sheep Marked as afforesaid as also thirty head of Hogs with the same mark as also one Bay Horse Not Branded as also two large Skillits and one large pot and two Dutch ovens and one Skillet two Iron Pot Racks and one pair of tongs as also two Pewter Dishes and two basons with twelve Pewter Plates as als [sic] one large Walnut Chest and one Flax hackke one feather Bead and furniture with one pair of curtains of callico coloured blue and yellow as also two set of Barshear Plows Irons and one shovel Plow with two clevish [sic] Irons to Each Plow as also one spade and Mattock all which property as aforesaid I do by these presents warrant and Defend to the said James Thompson in his possession now being by Virtue of this Bargain and Sale from me and every and all and every other person or manner of persons in witness whereof and to these presents I the said John Thompson hath set my hand and affixed my seal this 7th of June 1808</p>
<div class="BigSigDiv">
 <div class="signed">John Thompson (seal)</div>
</div>
<div class="BigWitDiv">
  <div class="witness">Simon Lindly</div>
  <div class="witness">John Lindly</div>
  <div class="witness">Anna Linly</div>
</div>
<div class="pageNo"><span epub:type="pagebreak" id="page435" title="435"/>[page 435] 424</div>
<p>Christian County Sct Clerks office 23rd June 1808</p>
<p>This day came before me Jn<sup>o</sup> Clark Clerk to said County Court the within named Jn<sup>o</sup> Thompson Sn<sup>r</sup> and acknowledged the within Bill of Sale unto James Thompson Jn<sup>r</sup> as and for his act and Deed hand and seal and agreed that the same might be Recorded as such and agreeable to an act of Assembly in such Case made and provided I have Recorded the same in my office in Deed Book A Page [blank] and Examined</p>
<div class="clerk">Jn<sup>o</sup> Clark</div>
</article>

</div>
</body>
</html>


Here is the whole print CSS file
@page {
  size: 8.5in 11in;
  margin-top: 0.75in;
  margin-bottom: 0.75in;
  counter-reset: footnote;
	@footnotes {
		border-top: solid black thin;
        float: bottom;
		border-clip: 100px 100px;
    	padding-top: 6pt;
    	margin-top: 6pt;	}
  @top-left  { vertical-align: top; padding-top: .3in; }
	@top-right { vertical-align: top; padding-top: .3in; }
}
@page :first {
  margin-top: 10cm;
}
@page titlePage {
  @top-left  { content: normal }
	@top-right { content: normal }
}
@page mainContent:left {
  @top-left  { content: counter(page); }
	@top-right { content: string(book-title) }
  margin-left: 1.35cm;
  margin-right: 2.75cm;
  font-size: 10pt;
}
@page mainContent:right {
  @top-right { content: counter(page) }
	@top-left { content: string(header) }
  margin-left: 2.75cm;
  margin-right: 1.35cm;
  font-size: 10pt;
}
@page mainContent:right:first {
  margin-top: 5cm;
}
@page mainContent:blank {
	@top-right {content: normal; }
  @top-left {content: normal; }
}
@page:blank {
  @top-left {content: normal; }
	@top-right {content: normal; }
	}
@font-face {
	font-family: CharisSIL;
	src: url("/Library/Fonts/charisSIL-R.ttf")
}
html { 
	margin: 0;
	padding: 0;
}
body {
	margin: 0;
	padding: 0;
	font-family: CharisSIL;
	font-size: 10pt;
  line-height: 12pt;
}
div.margin {
	clear: both;
  	float: outside; 
  	width: 25pt;
  	margin-outside: -30pt;
  	page-break-inside: avoid;
  	}
/*Headings*/
h1 {
	font-size: 18pt;
	line-height: 25pt;
	color: black;
	string-set: book-title content();
	text-align: center;
}

h2 {
	font-size: 16pt;
	clear: both;
	color: black;
	text-align: center;
}
h2[id] {
	page-break-before: right;
	prince-page-group: start;
	page-break-after: avoid;
	string-set: header content();
}
h2#records + p {
	margin-bottom: 12pt;
}
h3 {
  clear: both;
	font-size: 12pt;
  line-height: 24pt;
  margin-top: 0;
  margin-bottom: 0;
	page-break-after: avoid;
	page-break-inside: avoid;
	text-align: left;
}
h3.article {
	font-size: 10pt;
	line-height: 12pt;
	font-variant: small-caps;
	margin-top: 12pt;
	margin-bottom: 0;
	display: block;
	clear: both;
}
h3.article::before {
	content: "[";
}
h3.article::after {
	content: "]";
}
h3.alphabetical {
	text-align: center;
	background-color: lightgray;
	margin-bottom: 0;
	margin-left: 0;
}
/* end headings */

h3 + a + aside {
	background-color: #ffffff;
	margin-bottom: 0;
}
.intro h3 + p {
	margin-top: 0;
}
article p {
	clear: both;
	line-height: 12pt;
	margin-top: 0;
	margin-bottom: 0;
}
article {
 clear:both;
}
blockquote {
	margin: 0;
	font-style: normal;
  font-size: 10pt;
  line-height: 12pt;
	display: block;
	border-left: 3px solid gray;
	padding-left: .75em;
}
/* document sections */
.titlePage {
	display: block;
	page: titlePage;
	text-align: center;
}
.mainContent {
	page: mainContent;
	counter-reset: page 1;
}
.intro {
	display: block;
	margin-left: 20%;
	margin-right: 20%;
	prince-page-group: start;
	hyphens: auto;
	text-align: justify;
	}
/* end document sections */
.justify {
	text-align: justify;
}
.mono {
	font-family: monospace;
}
.flRt {
	float: right;
	padding-left: 6pt;
	}
.center {
	text-align: center;
}
.right {
	text-align: right;
}
.left {
	text-align: left;
}
.nowrap {
  white-space: nowrap;
	}

.two-column {
	background-color: blue;
}
.column-type {
	column-count: 2; 
	column-gap: 16pt;
	column-rule: thin solid gray;
	column-fill: auto;
}
.column-type-i {
	column-count: 3; 
	column-gap: 16pt;
	column-rule: thin solid gray;
	column-fill: auto;
}

/* style space above [page xxx] xx */
.pageNo {
	clear: both;
	margin-top: 12pt;
	margin-bottom: 0;
	line-height: 12pt;
	page-break-after: avoid;
	}
p + .pageNo {
	margin-top: 12pt;
	}
.fn + .pageNo {
}
h3 + a + .pageNo { /* can probably remove the h3 */
	clear: both;
	margin-top: 0;
	margin-bottom: 0;
	page-break-after: avoid;
}
h3 + .pageNo { /* this one probably no longer needed */
	clear: both;
	margin-top: 0;
	margin-bottom: 0;
	page-break-after: avoid;
	background: green;
}
/* end of .pageNo style*/

.entry {
	orphans: 2;
	widows: 2;
  /*font-size: 10pt;
	line-height: 12pt;*/
	clear: both;
	margin-top: 12pt;
	margin-bottom: 0;
}
.entry .pageNo {
	page-break-after: avoid;
	margin-top: 0pt;
	}
h3 + a + .entry {
	margin-top: 0;
}
.cite {
	clear: both;
	margin-top: 9pt;
	margin-bottom: 3pt;
	margin-left: 0;
	font-style: normal;
  font-size: 10pt;
  line-height: 12pt;
	border: .5pt solid black;
	background-color: #e5e5e5;
	padding: 2pt 5pt;
}
.clear {
	clear: both;
	margin: 0;
}
/*
Styling for names in text preceded by [signed] etc. and one space
*/
.signed, .witness, .cc, .surveyor, .official {
	margin: 0;
	padding: 0;
}
.clerk {
	font-size: 10pt;
	line-height: 12pt;
	margin-bottom: 0;
	margin-top: 0;
	text-align: right;
}
.surveyor {
	text-align: right;
}
.BigWitDiv {
	float: left;
	clear: left;
	margin-top: 6pt;
	margin-bottom: 6pt;
	font-size: 10pt;
	line-height: 12pt;
	padding-right: 4pt;
	padding-left: 0;
}
.BigSigDiv {
	float: right;
	clear: right;
	margin-top: 6pt;
	margin-bottom: 6pt;
	font-size: 10pt;
	line-height: 12pt;
}
.right-sig-div {
	float: right;
	clear: right;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 10pt;
	line-height: 12pt;
}
.left-sig-div {
	float: left;
	clear: left;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 10pt;
	line-height: 12pt;
}
/* end of section */

/* lists */
li {list-style: none}

ul {
	list-style: none;
	margin-top: 0;
	margin-left:  0;
	padding-left: 0;
}

ul.firsts {
	margin-left: 0;
	padding-left: 10pt;
	text-indent: -10pt;
	background-color: red;
}
.indent2nd {
	margin-left: 10pt;
	padding-left: 10pt;
	text-indent: -10pt;
}
.indent-no {
	padding-left: 0;
	margin-left: 0;
}

.name-last {
}
/* end lists */

sup {
  font-size: 85%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  margin-left: 1pt;
  top: -3pt;
}

hr {
	clear: both;
	margin-top: 6pt;
	margin-bottom: 6pt;
}

img.colImage {
	border: 2pt black solid;
	width: 232pt;
}

/* table related */
table {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
	border: none;
	border-collapse: collapse;
}
table.slavesTable {
	width: 100%;
}
 table.entry-list-table {
  margin-right: auto;
  margin-left:  auto;
 }

tr { page-break-inside: avoid; }
tr + tr {
 border-top: 1px black solid;
}
td > hr {
	margin-top: .1em;
	margin-bottom: .1em;
}
th {
	background: #EEEEEE;
}
/* end table */


/* turn tab lines into table lines*/
.newtable {
  display: table;
  width: 100%;
  font-size: 10pt;
  line-height: 12pt;
  margin-top: 0;
  margin-bottom: 0;
}
p + .newtable {
	margin-top: .0;
	}
.newtable + p {
	margin-top: 0;
	}
.tdLt {
	display: table-cell;
	padding-left: 0;
	}
.tdRt {
	display: table-cell;
	white-space: nowrap;
	padding-left: 4pt;
	text-align: right;
	}
/*  end turn tab lines into table lines*/

/* turn tab lines into table lines*/
.grid {
	display: table;
	border-collapse: collapse;
	width: auto;
	margin-left: auto;
	margin-right: auto;
	}
.cell {
	display: table-cell;
	padding: 2pt 4pt;
}
.row {
	display: table-row;
	line-height: 12pt;
	page-break-inside: avoid;
	padding: 0 0; /* see if need change */
}
.row + .row {
 border-bottom: .25pt black solid;
}
.thead {
	display: table-header-group;
	background-color: #eeeeee;	
	font-weight: bold;
}
.tbody {
	display: table-row-group
}
.col1 {
  display: table-column;
}
.col2 {
  display: table-column;
	background-color: #f5f5f5;	
	border-left: 1pt solid black;
}

aside.fn {
	display: prince-footnote;
   /* float: footnote; */
    counter-increment: footnote;
   /* display: inline; */
    font-size: 8pt;
    line-height: 9pt;
	}

.fn + div {
	display: inline;
	}
.fn + p {
	display: inline;
	}

*::footnote-call {
    content: counter(footnote, symbols('*','†','‡','§','**','††','‡‡'));
    font-size: 12pt;
    color: red;
    font-weight: bold;
    vertical-align: inherit;
    padding-left: 3pt;
    padding-right: 3pt;
}
*::footnote-marker {
    content: counter(footnote, symbols('*','†','‡','§','**','††','‡‡'));
    font-size: 8pt;
    color: black;
}
#toc a::after {
	content: leader('.')
	target-counter(attr(href), page);
}
ol.toc a::after {
	content: leader('.')
	target-counter(attr(href), page);
}
  1. margin-error-pg.pdf43.7 kB
    PDF of page with overlap in footnotes
hallvord
Hi, I can not reproduce with this document and style (as you already indicated would be the case) - could you send me the full document? Send it to hallvord AT hallvord.com and I'll investigate a bit. It would also be interesting to see the non-print specific CSS.
-Hallvord R

Announcement: repos for tests/utils

mbaker00
Hallvord,
Thanks for offering to review the issue. I've sent the files you requested. Look forward to seeing if there is a solution to the formatting issue.
Michael
hallvord
Hi, I received the files. Prince outputs some warnings about not being able to fit footnotes on certain pages when it runs, but so far I haven't found any instance of the problem :-/ I will keep investigating.
There are some IMG tags, I suppose I can just replace them with blue square images or something - but perhaps they should be a specific size? It also complains about not being able to find /Library/fonts/charisSIL-R.ttf ;). I don't know if those parts matter or change the rendering in a way that makes it more likely to reproduce the problem.

Announcement: repos for tests/utils

hallvord
Hi, thanks for passing on those extra files - seems the images are not (that) important but the font seems to matter - at least it was easier to reproduce with it than without!

I've reduced the file somewhat - from the top up to and including the place I see the problem - and put the files inside this zip file:
http://hallvord.com/temp/prince/3575.zip
Also, the output is here (as well as inside the zip) - look at footnotes on the last page:
http://hallvord.com/temp/prince/KyChr-DB-A-text.pdf

I tried a little bit to reduce the file(s) even more, but it's a tricky problem to boil down, very sensitive to the exact amount of text. I think I need to pass this problem on to @mikeday and colleagues at this point - just crossing fingers they can reproduce with those files. BTW I see prince output a warning "prince: warning: cannot fit footnote(s) on page 30" so perhaps they can tell easily what's going wrong here..

Announcement: repos for tests/utils

  1. prince-content-footnote-overlap.png53.1 kB
    Problem apparent in my reduced file
mbaker00
Hallvord,
Thanks for your time invested. I look forward to seeing if a solution is possible. Maybe this is rare for other users, but it occurs in most of the documents I've tested. But most of my tests have been on documents with the same type of html structure.
Thanks,
Michael
mbaker00
I wanted to check back on this issue to see if it might be investigated in the future. I just installed Prince 11.1 on macOS, ran it on 3 documents and all three show areas where the page content bleed over into the footnotes area and are covered up by footnotes. I can provide more examples and code if necessary, but the previous posts I assume may be sufficient.
Thanks,
Michael B.