CSS FLOAT property support about dompdf

[GoogleCodeExporter]

Im also waiting on this one, hope it gets done on next release cause it would 
be good
to set logos on the top-right of the page.

Thx for the work so far!

Original comment by [email protected] on 4 Jun 2009 at 6:35

[GoogleCodeExporter]

lets tell me if you are finish.

Original comment by [email protected] on 30 Jul 2009 at 11:51

[GoogleCodeExporter]

The Float-property support would be absolutely great.

Original comment by [email protected] on 1 Sep 2009 at 1:07

[GoogleCodeExporter]

yes thats really nedded

Original comment by [email protected] on 1 Sep 2009 at 1:20

[GoogleCodeExporter]

floats are definitely more needed in our case

Original comment by [email protected] on 18 Oct 2009 at 12:39

[GoogleCodeExporter]

seens like a high priority enhancement

Original comment by [email protected] on 18 Oct 2009 at 6:48

[GoogleCodeExporter]

Original comment by [email protected] on 18 Oct 2009 at 10:59

• Added labels: Priority-High

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Any other possible alternative to align before this is done?

Original comment by [email protected] on 28 Oct 2009 at 7:40

[GoogleCodeExporter]

I've used padding/margin along with negative values to move anything anywhere i 
want,
even over the top of another object. It works very well.

E.g. padding-top: -10;

Notice I've not used pixels or any form of measurement. I found using this 
method
enabled me to position something accurately. You can also use a single decimal 
place
here to make it even more spot on, such as "padding-top: -10.5;".

Original comment by [email protected] on 28 Oct 2009 at 7:19

[GoogleCodeExporter]

Float support would be nice. I don't like to use tables instead.

Original comment by [email protected] on 3 Jan 2010 at 12:52

[GoogleCodeExporter]

Float property is very important at this time, because div it been used more 
than ever

Original comment by [email protected] on 26 Jan 2010 at 10:13

[GoogleCodeExporter]

Issue 137 has been merged into this issue.

Original comment by fabien.menager on 16 Mar 2010 at 9:53

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Original comment by fabien.menager on 27 Aug 2010 at 6:00

• Changed state: Started
• Added labels: Milestone-Release0.6

[GoogleCodeExporter]

Issue 68 has been merged into this issue.

Original comment by eclecticgeek on 27 Aug 2010 at 6:04

[GoogleCodeExporter]

I'm currently working on this issue, which is the most wanted, but also one of 
the hardest issues.
So, if anyone has ideas about this, he'll be welcome !
I searched a lot on the web to find how existing engines work, and I found a 
few things.
 - The first is the spec : http://www.w3.org/TR/CSS2/visuren.html This is where I know how it should look
 - The second one is a project (pybrowser) which is a "Python Web Browser with it's own rendering engine". I didn't test it, but the engine seems to be quite complete, and I found a few clues about how to implement floats : 
   - http://git.paulbonser.com/?p=pybrowser.git;a=blob;f=boxmodel/box.py#l22
   - http://git.paulbonser.com/?p=pybrowser.git;a=blob;f=boxmodel/layout.py#l124
Even if it is not working as it is missing a few lines of code, this looks good.

I also looked at other PHP libraries that aim to convert HTML to PDF, but no 
one supports float.

After reading all this, I had a better idea of how to do this.

All the rules I'm going to detail are for left-floating element, but it is 
analogous for right-floating elements.

First, all floating elements should behave like block elements except that 
their width will be adapted to there contents instead of there container 
(except if specified explicitly).

Then, if an element B is floating to the left, it will be pushed to the left of 
it's container, but at the right of any other existing floating element A if 
the bottom of A is below the top of B.
Floating elements are never pushed down or up from there initial Y position 
(except if specified by margin-top or top of course).

The element B that follows a floating element A is pushed at the top of the 
floating element (like if A had a zero height). The available width for B is 
then reduced by A.width+A.x
So, if a text is following A, it will have a restricted width, and the lines 
will be shorter, as long as the line's Y position if higher than the A. The 
text's lines will get their width back after this.

Furthermore, a floating element can not only affect it's next sibling, but also 
all the inline elements that come after it : 
http://www.w3.org/TR/CSS21/images/float2p.png
So a list of previous floating elements need to be kept on each page in order 
to refer to it to see if any floating element will affect the inline element's 
placement and size. The block elements are not affected if they are not 
siblings.

The specs say : "The contents of floats are stacked as if floats generated new 
stacking contexts, except that any positioned elements and elements that 
actually create new stacking contexts take part in the float's parent stacking 
context." So the floating elements need to be drawn after any "normal" element 
so that they appear on top.

Ouch.
This won't be easy.

Original comment by fabien.menager on 27 Aug 2010 at 7:10

[GoogleCodeExporter]

I commited a basic support for floating elements in r305, please try it by 
checking out the SVN trunk. I added an example, and I attach the resulting PDF 
document.
Note that I only tested this on floating images, but I will also add support 
for any element type.

Original comment by fabien.menager on 30 Aug 2010 at 9:26

Attachments:

• dompdf_float.pdf

[GoogleCodeExporter]

Fabien, that looks like an awesome start! Your method of handling this 
functionality should work out great (and should be easier to implement than 
what I had mentioned in email).

As you said, this won't be easy. But I think with the work you're putting in 
we'll at least have some basic float capabilities in DOMPDF for the next 
release.

Original comment by eclecticgeek on 31 Aug 2010 at 5:48

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Here is what works now (in the SVN trunk) : 
 - Images floating left and right inside raw text 
 - Images floating left inside text containing inline elements (strong, em, etc), it partially works when floating on the right
 - Blocks floating left and right are well positionned, but its content remains on its initial place (??)

What doesn't work (or that I didn't test yet):
 - The line after a right-floating block is not shifted, the same for the line before a floating-left block.
 - Inline floating elements
 - Successive floating elements
 - Floating elements inside tables

This may not all be fixed before the next beta release

Original comment by fabien.menager on 3 Sep 2010 at 12:54

[GoogleCodeExporter]

Have any idea how to 'hard-code' a temporary fix until it is done in the 
released version? I ned to have 2 columns of images next to each other that are 
all contained in divs. So far they float alright, but all on the same line, 
when the parent container has a defined css height, they all show but the float 
right doesnt flot on the same line anymore. 
I've tried playing around with the block_positioner and image_renderer files 
but couldnt find how to force a height on the parent container only on 
float:right..
Any idea?
Thanks

Original comment by [email protected] on 17 Sep 2010 at 10:46

[GoogleCodeExporter]

Hello, all the work is done by Block_Frame_Reflower. Actually, my main goal is 
to support image floating inside text.
I hope I won't have to take another direction that the one I'm following to 
support float.

Original comment by phenxdesign on 17 Sep 2010 at 7:06

[GoogleCodeExporter]

Hi there!
I´m trying to use negative margins (while I can´t use float at least), but it 
won´t work at all. The second object that should be besides the first one 
won´t move.

.print_activos {
margin-left:5px;
}
.print_pasivos {
margin-top:-268px;
margin-left:450px;
margin-bottom:100px;
}

The second block of text won´t be aligned beside the first one, but after it.
Any advice would be geatly appreciated. 
Thanks!
Rosamunda

Original comment by [email protected] on 15 Oct 2010 at 9:39

[GoogleCodeExporter]

Hi there!
I´m trying to use negative margins (while I can´t use float at least), but it 
won´t work at all. The second object that should be besides the first one 
won´t move.

.print_a {
margin-left:5px;
}
.print_p {
margin-top:-268px;
margin-left:450px;
margin-bottom:100px;
}

The second block of text won´t be aligned beside the first one, but after it.
Any advice would be geatly appreciated. 
Thanks!
Victoria

Original comment by [email protected] on 15 Oct 2010 at 9:40

[GoogleCodeExporter]

@victorialoisi: Negative margins are not fully supported. The issue has been 
partially address in the latest code. Even with the latest code you will want 
to apply the negative value to the adjacent margins. If .print_a is followed by 
.print_p then you should be able to use this:

.print_a {
  margin-left:5px;
  margin-bottom:-268px;
}
.print_p {
  margin-top:-268px;
  margin-left:450px;
  margin-bottom:100px;
}

Original comment by eclecticgeek on 18 Oct 2010 at 6:26

[GoogleCodeExporter]

Issue 196 has been merged into this issue.

Original comment by eclecticgeek on 10 Nov 2010 at 6:53

[GoogleCodeExporter]

Issue 189 has been merged into this issue.

Original comment by fabien.menager on 15 Nov 2010 at 1:09

[GoogleCodeExporter]

please need the fix for css float. many thanks

Original comment by [email protected] on 8 Feb 2011 at 10:25

[GoogleCodeExporter]

Hello everybody, I commited an initial support for CSS float, you can see what 
it looks like here :

http://pxd.me/dompdf/dompdf.php?base_path=www%2Ftest%2F&options[Attachment]=0&in
put_file=css_float.html

Please note that this may not work in every cases for now, especially with 
elements aligned on the right, or when there are more than one floating element 
on the same side, but, we are on the good path !

Original comment by fabien.menager on 24 Jun 2011 at 10:20

[GoogleCodeExporter]

I made a few changes after my first commit for the float support and there are 
still lots of issues remaining : 
 - it doesn't work in tables, but tables can be floating
 - floating elements normally have an effect on all the elements in the page (except them with CSS clear) not only the ones in the floating element's parent
 - sometimes when the float is at the end of a line, the line itself is too narrow for its words
 - clear is not supported
 - when floating elements touch themselves, they behave strangly
 - floating elements should widen their container when they can and when they are wider
 - floating block elements should not take all the width when they don't have a width specified
 - maybe other problems

For now, it looks like floating images work in most of the simple cases, I hope 
we'll have a pretty complete support in the next release.

Original comment by fabien.menager on 29 Jun 2011 at 9:23

[GoogleCodeExporter]

I fixed this bug this weekend : 
 - sometimes when the float is at the end of a line, the line itself is too narrow for its words

Don't hesitate to try the latest revision from the trunk in your project !

Original comment by fabien.menager on 18 Jul 2011 at 10:26

[GoogleCodeExporter]

With domPDF 0.6 beta2 the float does not work (in this one case I have).

On the left a div with a table inside. On the right a div with an image (in an 
anchor). Around a div-container with class "floatbox" (a class to end floating 
in YAML (Yet another multicolumn layout).

But it does not work. The image and table is on top of each other.

Original comment by [email protected] on 30 Aug 2011 at 3:03

[GoogleCodeExporter]

Here is described how the YAML Framework and the floatbox-class works.

http://www.yaml.de/en/documentation/basics/how-floats-work.html

Original comment by [email protected] on 30 Aug 2011 at 3:04

[GoogleCodeExporter]

Hello, there have been lots of changes in the SVN trunk, did you look at them ?

Original comment by fabien.menager on 31 Aug 2011 at 3:42

[GoogleCodeExporter]

Issue 345 has been merged into this issue.

Original comment by fabien.menager on 31 Aug 2011 at 3:43

[GoogleCodeExporter]

If i might say something, it would be : Why inline-block elements have a 
natural float to left? i mean,it's not a real float but works like. The only 
problem with inline-block elements is that they doesn't support styles like 
padding, margin. If it is possible to make inline-block elements accept attr 
off a block element such as positioning (top,left,right,bottom) and size 
(margin, padding, width, height) inline-block elements would be just like block 
elements but with the natural float.
It wouldn't solve the problem and it's not the way we (i) want to do our 
software, but is a work arround to thing about:
Ex 
div.somediv {
  display:inline-block;
  padding:5px;
  margin:2px;
  background:#CDF;
}
<div class="somediv"></div>
<div class="somediv"></div>

It will works almost perfectly in any version of DOMPDF, but margin, padding 
and any other attr that will modify the form of the El will not.

Original comment by [email protected] on 31 Aug 2011 at 5:00

[GoogleCodeExporter]

@ukarr... we are still implementing float support. As @fabien.menager says, the 
latest code from the repository has much improved float support. You can grab 
it from the repository or download a nightly here: 
http://eclecticgeek.com/dompdf/

Also, you have to specifically enable float support in you configuration file. 
See DOMPDF_ENABLE_CSS_FLOAT

Original comment by eclecticgeek on 22 Sep 2011 at 2:57

[GoogleCodeExporter]

@guiferrolli inline-block support is only nominal right now. To ensure better 
support you should create a new issue/enhancement request so we can better 
track it.

Original comment by eclecticgeek on 22 Sep 2011 at 3:00

[GoogleCodeExporter]

Issue 220 has been merged into this issue.

Original comment by fabien.menager on 15 Jan 2012 at 11:12

[GoogleCodeExporter]

I worked again on this issue, we have pretty good results now, especially with 
floating elements inside text blocks. There are still a few issues : like the 
example on the top of this issue report which doesn't work yet. 

It's hard to try all the combinations so, feel free to post examples here that 
you'd like to see working, keep in mind that the work is done in the SVN trunk 
so, try your examples with it before.

Don't forget to enable float support in the config.

If you want to see what result we can obtain, look at the examples "css_float" 
and "css_position_all" here: http://pxd.me/dompdf/www/examples.php

Original comment by fabien.menager on 26 Jan 2012 at 7:10

[GoogleCodeExporter]

hey, gimme the last release.

Original comment by [email protected] on 8 Feb 2012 at 2:39

[GoogleCodeExporter]

If you can't wait for the official beta 3 release you can download a nightly 
here:
http://eclecticgeek.com/dompdf/

Original comment by eclecticgeek on 8 Feb 2012 at 3:46

[GoogleCodeExporter]

Issue 423 has been merged into this issue.

Original comment by fabien.menager on 14 Feb 2012 at 2:24

[GoogleCodeExporter]

I tried the floating, but It apears to still have alot of problems. When I put 
some elements on float they all apear on top of each other in the right corner.

Original comment by [email protected] on 23 Mar 2012 at 4:20

[GoogleCodeExporter]

One more test case: a floated element styled with width: auto

ref. Issue 480

Original comment by eclecticgeek on 15 May 2012 at 2:02

[GoogleCodeExporter]

Issue 495 has been merged into this issue.

Original comment by eclecticgeek on 6 Jun 2012 at 7:55

[GoogleCodeExporter]

Issue 523 has been merged into this issue.

Original comment by fabien.menager on 8 Aug 2012 at 12:58

[GoogleCodeExporter]

Original comment by eclecticgeek on 24 May 2013 at 3:00

• Added labels: Restrict-AddIssueComment-Commit