search

FelixOngati / dompdf

Automatically exported from code.google.com/p/dompdf
0 stars 0 forks source link

CSS FLOAT property support #19

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
What would you like dompdf to do:
Either have a more robust table-within-table functionality (also
div-within-table), or add float support.

Do you have an example:
<div style="width:65mm; height:40mm; float:left;">Block one</div>
<div style="width:65mm; height:40mm; float:left;">Block two</div>
<div style="width:65mm; height:40mm; float:left;">Block three</div>
<div style="width:65mm; height:40mm; float:left;">Block four</div>
<div style="width:65mm; height:40mm; float:left;">Block five</div>
<div style="width:65mm; height:40mm; float:left;">Block six</div>

Original issue reported on code.google.com by goo...@gmail.com on 29 May 2009 at 8:51

GoogleCodeExporter commented 9 years ago 
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 newc...@gmail.com on 4 Jun 2009 at 6:35

GoogleCodeExporter commented 9 years ago 
lets tell me if you are finish.

Original comment by kelvin.w...@gmail.com on 30 Jul 2009 at 11:51

GoogleCodeExporter commented 9 years ago 
The Float-property support would be absolutely great.

Original comment by destilla...@gmail.com on 1 Sep 2009 at 1:07

GoogleCodeExporter commented 9 years ago 
yes thats really nedded

Original comment by amitpati...@gmail.com on 1 Sep 2009 at 1:20

GoogleCodeExporter commented 9 years ago 
floats are definitely more needed in our case

Original comment by daleya...@gmail.com on 18 Oct 2009 at 12:39

GoogleCodeExporter commented 9 years ago 
seens like a high priority enhancement

Original comment by vie...@gmail.com on 18 Oct 2009 at 6:48

GoogleCodeExporter commented 9 years ago

Original comment by ryan.mas...@gmail.com on 18 Oct 2009 at 10:59

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
Any other possible alternative to align before this is done?

Original comment by gigaprom...@gmail.com on 28 Oct 2009 at 7:40

GoogleCodeExporter commented 9 years ago 
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 read...@gmail.com on 28 Oct 2009 at 7:19

GoogleCodeExporter commented 9 years ago 
Float support would be nice. I don't like to use tables instead.

Original comment by Bokern.K...@gmail.com on 3 Jan 2010 at 12:52

GoogleCodeExporter commented 9 years ago 
Float property is very important at this time, because div it been used more 
than ever

Original comment by arp...@gmail.com on 26 Jan 2010 at 10:13

GoogleCodeExporter commented 9 years ago 
Issue 137 has been merged into this issue.

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

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago

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

GoogleCodeExporter commented 9 years ago 
Issue 68 has been merged into this issue.

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

GoogleCodeExporter commented 9 years ago 
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 commented 9 years ago 
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:

GoogleCodeExporter commented 9 years ago 
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 commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
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 commented 9 years ago 
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 ponzus...@gmail.com on 17 Sep 2010 at 10:46

GoogleCodeExporter commented 9 years ago 
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 commented 9 years ago 
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 victoria...@gmail.com on 15 Oct 2010 at 9:39

GoogleCodeExporter commented 9 years ago 
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 victoria...@gmail.com on 15 Oct 2010 at 9:40

GoogleCodeExporter commented 9 years ago 
@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 commented 9 years ago 
Issue 196 has been merged into this issue.

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

GoogleCodeExporter commented 9 years ago 
Issue 189 has been merged into this issue.

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

GoogleCodeExporter commented 9 years ago 
please need the fix for css float. many thanks

Original comment by keic...@gmail.com on 8 Feb 2011 at 10:25

GoogleCodeExporter commented 9 years ago 
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 commented 9 years ago 
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 commented 9 years ago 
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 commented 9 years ago 
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 ukarr...@gmail.com on 30 Aug 2011 at 3:03

GoogleCodeExporter commented 9 years ago 
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 ukarr...@gmail.com on 30 Aug 2011 at 3:04

GoogleCodeExporter commented 9 years ago 
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 commented 9 years ago 
Issue 345 has been merged into this issue.

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

GoogleCodeExporter commented 9 years ago 
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 guiferro...@gmail.com on 31 Aug 2011 at 5:00

GoogleCodeExporter commented 9 years ago 
@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 commented 9 years ago 
@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 commented 9 years ago 
Issue 220 has been merged into this issue.

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

GoogleCodeExporter commented 9 years ago 
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 commented 9 years ago 
hey, gimme the last release.

Original comment by knob...@gmail.com on 8 Feb 2012 at 2:39

GoogleCodeExporter commented 9 years ago 
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 commented 9 years ago 
Issue 423 has been merged into this issue.

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

GoogleCodeExporter commented 9 years ago 
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 laststoc...@gmail.com on 23 Mar 2012 at 4:20

GoogleCodeExporter commented 9 years ago 
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 commented 9 years ago 
Issue 495 has been merged into this issue.

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

GoogleCodeExporter commented 9 years ago 
Issue 523 has been merged into this issue.

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

GoogleCodeExporter commented 9 years ago

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