Log in / Register

Forum › How do I...?

overlapping DIVs with float:outside in PDF results

mbaker00
I'm having trouble with a test of formatting using float:outside for adjacent divs where the content overlaps in the margin.

The sample html:
<!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="outside.css" media="print">
      <title>Test Book</title>
      <meta name="author" content="Michael">
      <meta name="subject" content="Book">
   </head>
   <body>
      <div class="mainContent">
<article id="kychr-sb-2-066-1">
<h3 class="article">Test Article Title</h3>
<div class="pageNo">[page 001] 1</div>
<div class="margin">Test margin note number one.</div>
<div class="margin">This is a second test margin note</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo nunc et dui varius, mollis imperdiet felis rutrum. Integer sapien orci, ullamcorper a blandit et, rhoncus in massa. Nullam velit mi, porttitor at gravida quis, scelerisque id enim. In volutpat elementum massa quis dapibus. Morbi pellentesque ligula aliquam porta facilisis. Sed nec venenatis orci. Vestibulum convallis egestas porttitor. In hac habitasse platea dictumst. Quisque lacinia luctus felis id porttitor.
</p>
<div class="left-sig-div">
<div class="cc">Name One }</div>
<div class="cc">Name Two } cc</div>
</div>
<div class="right-sig-div">
<div class="surveyor">Name Three</div>
</div>
<div class="clear"></div>
</article>
      </div>
   </body>
</html>


The CSS: outside.css
@page {
  size: 6in 9in;
  margin-top: 0.75in;
  margin-bottom: 0.75in;
}

@page mainContent:left {
  @top-left { content: counter(page) }
	@top-right {content: string(book-title) }
  margin-left: 3cm;
  margin-right: 4cm;
}

@page mainContent:right {
  @top-right { content: counter(page) }
	@top-left {content: string(header) }
  margin-left: 4cm;
  margin-right: 3cm;
}

div.margin {
  	float: outside; 
		clear: outside;
  	width: 6em;
  	margin-outside: -7em;
  	page-break-inside: avoid;
  	font-size: .8em;
  	line-height: 1em;
  	}
	
@page :first {
  margin-top: 8cm;
  @top-left { content: normal }
	@top-right {content: normal }
}
@page mainContent:right:first {
  margin-top: 5cm;
}

html {margin: 0;
}
body {
	margin: 0;
	padding: 0;
	font-size: 10pt;
  line-height: 12pt;
}
h3.article {
	font-size: 10pt;
	line-height: 12pt;
	font-variant: small-caps;
	margin-top: 12pt;
	margin-bottom: 0pt;
	display: block;
	clear: both;
	}
h3 + .pageNo {
	clear: both;
	margin-top: 0pt;
	margin-bottom: 0pt;
	page-break-after: avoid;
}
article p {
	clear: both;
	line-height: 12pt;
	margin-top: 0em;
	margin-bottom: 0em;
}
.mainContent {
	page: mainContent;
	counter-reset: page 1;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
}
.left {
	text-align: left;
}
.nowrap {
  white-space: nowrap;
	}
.indent-no {
	padding: 0;
	}
.right-sig-div {
	float: right;
	clear: right;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1em;
}
.left-sig-div {
	float: left;
	clear: left;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 1em;
}


Attached is the PDF showing the overlapping margin notes which come from DIV's with class="margin"

Any suggestions for keeping the content from overlapping without separating the DIVs by some of the body text?
Thanks,
Michael
  1. test-outsdie.pdf‎ 38.4 kB ‎
    PDF with overlapping in float outside
mikeday
This is a limitation of the way Prince handles floats with negative margins that get pulled out of the flow: they can overlap with other floats. We hope to fix this limitation in the future.

In the meantime this requires moving the floats down, either by manual intervention or by using JavaScript and a two-pass process to identify overlap.

Another possibility is to use footnotes instead of floats, and absolutely position the @footnotes area to the side of the page, however this means they will stack instead of lining up vertically with their origin point in the text.
mbaker00
I've been playing with this again. I have a partial solution which might work in my particular case just using CSS styling. Since most of my margin notes are short and few enough they would not likely run past the document section or article into a following section/article the following may work for me.
The added CSS is:
div.margin:nth-of-type(1) {
	margin-top: 0em;
	background-color: yellow;
}
div.margin:nth-of-type(2) {
	margin-top: 0em;
	background-color: pink;
}
div.margin:nth-of-type(3) {
	margin-top: 5em;
	background-color: lightblue;
}
div.margin:nth-of-type(4) {
	margin-top: 10em;
	background-color: tan;
}

I'll have to look through the entire document after running this stylesheet and see if the interval needs to be increased.

I will attach the PDF showing the results. I would like suggestions for a better way if there is one that doesn't use JavaScript, which I'm not prepared to learn further right now, and something that would take into account the size of the stacking margin note DIV's

Thanks,
Michael
  1. test-outsdie.pdf‎ 41.3 kB ‎
    PDF of DIVs flouted outside and stacked
mbaker00
Looks like I posted too soon. When applied to a more complex longer document, the positions do not flow as neatly. I'll have to re-examine. Perhaps I misunderstood the specificity of the nth-of-type pseudo class. I'm not sure it uses the class attached to the div. I'm probably showing my ignorance of CSS.
Michael
mikeday
Right, :nth-of-type only applies to the element name and not other parts of the selector.

However, the new CSS4 Selectors in Prince 11 allow you to write this:
:nth-child(4 of div.margin) { ... }

It looks a little strange, but it extends the old :nth-child() selector so that you can apply it to the subset of elements matched by another selector.
mbaker00
Thanks for the follow-up. I ended up changing the CSS to using adjacent siblings selectors.
.margin+.margin {
	margin-top: 6em;
	background-color: pink;
}
.margin+.margin+.margin {
	margin-top: 12em;
	background-color: lightblue;
}


This gets me about 90% of what I want. There is still the problem of uneven spacing between longer and shorter margin notes and the potential for very long margin notes to run into the next note.

Is there any benefit to using the following Prince CSS you suggested over the adjacent sibling selector? 
:nth-child(4 of div.margin) { ... }


Mike, when you suggested
Another possibility is to use footnotes instead of floats, and absolutely position the @footnotes area to the side of the page, however this means they will stack instead of lining up vertically with their origin point in the text.
, I'm assuming that all the sidenote footnotes from multiple <article> sections would stack up. If the stacking occurred only beside each <article> section, that would be what I want. If two <article> sections on one page had its sidenotes running together with this technique, it would not be what I'm seeking. I am using left and right pages with wider inside margins for the gutter. That is why I'm trying to make this work with the float: outside CSS properties.


If anyone has successfully used the javascript method you suggested and would be willing to share their code, I would be interested in examining this technique. Otherwise, I think I'll have to stick with this partial solution until or if Prince offers some new options to handle sidenotes. Thanks for your help again.

Michael
mikeday
Adjacent sibling should be fine, I didn't think of that one. :)

Using footnotes would stack up, yes. I don't think there's a way to stop the footnotes from different articles from stacking together at this time.
samL
This is a limitation of the way Prince handles floats with negative margins that get pulled out of the flow: they can overlap with other floats. We hope to fix this limitation in the future.

Has anything changed in the way Prince handles these floats? I'm having a similar issue, but the elements are in separate divs, so I can not use the adjacent sibling selector.
mikeday
Not yet, but it's a high priority item on our list as so many people need it for sidenotes!