Hi,

first of all, I'm new to Prince, but I love it already. Thanks to the team for an awesome product.

However, there is one situation where Prince gives me worse results than browsers, which is a bit disappointing -- all the more that it does not seem to be a very "exotic" use case.

Consider a page with 3 paragraphs, and a floating (right) image between the 1st and 2nd paragraph (index.html‎). On the screen (see screen.png), the top of the floating image is vertically aligned with the top of the 2nd paragraph, which is normal. This is exactly what Prince does, but then if the floating image does not fit on the page, it moves it to the next page as well as the following paragraph, which is ugly (prince.pdf‎).

Browsers are a little smarter in this respect (see firefox.pdf‎ and chrome.pdf‎): they move the floating element to the next page, but not the following paragraph, which avoids the huge white space that Prince is letting at the bottom of the first page.

I understand that the Prince developers may consider this as a feature rather than a bug, as the browsers is making an arbitrary decision that may not be the right one (I may prefer to have the image float to the top of the same page rather than the next one). However:

* even if this behaviour for float:right is considered correct, there should still be a (well documented) way to achieve the same result as browsers (I tried to fiddle with Prince-specific values of the float attribute, without success);
* I still think it would be better to align with browser's behaviours -- but this is your call.

That being said, thanks again for a wonderful tool.


PS: note that I had to manually fiddle with margins with Chrome to get this result, but it does not change the fact that Chromes implements the same "smart" management of floating elements as Firefox.

1. chrome.pdf‎ 67.1 kB ‎
   Chrome print rendering
2. firefox.pdf‎ 14.4 kB ‎
   Firefox print rendering
3. index.html‎ 2.8 kB ‎
   example source file
4. prince.pdf‎ 16.2 kB ‎
   Prince 10 rev 7 rendering
5. screen.png‎ 160.6 kB ‎
   screen rendering (Firefox)

I just ran your index.html file through Prince locally. The float seems to behave as I would expect—the subsequent paragraph is not pushed to the following page.

It's a bit unusual to set both the height and width of the image, as that would likely change the aspect ratio. Do you get similar results if you remove "height: 12em" from your CSS?

Hi, I do see the issue when running Prince. Removing height:12em will fix it for me, but the reason is the image height shrinks to fit inside the first page - it's not really a fix, just some manual work to adapt the page to Prince's pagination. Chrome's print preview does what you'd like Prince to do, my Firefox does however sort of cheat since it splits the picture across two pages - that seems like the worst way to do it, and will rarely if ever be what you actually want.

I don't know if Prince developers will consider this a bug or not - applying float basically turns the image into (or wraps it in?) a block element per CSS and I see the logic in Prince's rendering - although Chrome's approach creates a better result.. Prince's logic is "hey, you just told us to place the image on the right side of this text, sticking out of its generated block element which sits above the text it will be next to - oops, those won't fit before the page break, let's move it down".

I haven't found any CSS tricks to fix this either, except shrinking the image to fit before the page break.

Announcement: repos for tests/utils

Thank you both for your replies. The reason why I set the height of the image is that, in this example, there is no actual image to constrain the actual height of the box. Indeed, in real life, I only specify the width.

@dauwhe: which version of Prince are you using? On which OS? (I'm using 10 rev 7 on Linux)

@hallvord: I agree with you that the Prince developers may consider this as a feature rather than a bug (I mention it in my original post). However, there should be a way to achieve the same result as browsers.