Log in / Register

Forum › Bugs

Overlapping Floats With Clear

aschmitz
I have some texts with key terms and definitions, where I'm trying to print the definitions in a "sidebar". This is done using a "display: inline; float: left; clear: left; margin: 0 0 1em -41%;" span for the definitions, which generally works fine.

However, if two key terms with definitions are placed too closely in the text, their definitions will overlap in the "sidebar". This doesn't appear to happen in Chrome or Firefox, but does happen when Prince renders them. It seems like perhaps the "clear: left" is being ignored. (Note that using "display: block" doesn't help.)

Is there a way to get the two definitions to not overlap? I'm willing to add extra markup (as long as it can be done automatically - there are thousands of such definitions, and it's not practical to review them all manually), or change the CSS if necessary, but nothing I've tried has made it work as I'd expect.

I've attached a simplified HTML file example that shows the issue (doesn't overlap in Firefox or Chrome, does in Prince) and a copy of the PDF generated by prince-9.0r5-macosx.
  1. overlapping_floats.html‎ 1.3 kB ‎
    An HTML file demonstrating the issue.
  2. overlapping_floats.pdf‎ 45.2 kB ‎
    PDF generated by prince-9.0r5-macosx
mikeday
This is a bit tricky at the moment. We will investigate and see if we can find a workaround.
aschmitz
Has there been any news on this? I believe it's my only remaining blocker on getting a number of books converted to PDFs. Even a workaround would be fine. (If neither a fix nor a workaround is available, I may convert them as "normal" footnotes, but having the text column be narrower for the side notes is helpful because it is easier to read without overly-wide columns.)
mikeday
You could convert them to "side footnotes", where the footnotes area is absolutely positioned to the side of the main text:
<html>
<head>
<style>
@page {
    @footnotes {
        position: absolute;
        width: 2in;
        height: 4in;
        right: 0;
        border: solid red thin
    }
}

.fn { float: footnote }
</style>
</head>
<body>
<p>
Hello, this is a footnote<span class="fn">The footnote.</span>.
</p>
</body>
</html>
aschmitz
Thanks! That isn't exactly what I was thinking of, but it does make it easier to identify which definition is associated with which term, so it's probably better. I'll stick with that, thanks again.