When using the columns property in CSS to flow text into multiple columns, how do you get the columns to float around elements. The floating elements are typically images. There are lot of different use cases.
Sometimes the floating element is the width of 1 to N columns, where N is the number of columns. In the following the XXX is the image, the text flows down column 1, to column 2 where it is interrupted by the image, continues below the image in column, and then into column 3, where it flows like in column 2. You can have the same situation with the image floating to the left.
----------- ------------ ------------
----------- ------------ ------------
----------- XXXXXXXXXXXXXXX
----------- XXXXXXXXXXXXXXX
----------- XXXXXXXXXXXXXXX
----------- XXXXXXXXXXXXXXX
----------- ------------ --------------
In the general case the floating image is not an integral number of columns in width. In that case, you want it to look like this:
----------- ------------ ------------
----------- ------------ ------------
----------- ----- XXXXXXXXXXX
----------- ----- XXXXXXXXXXX
----------- ----- XXXXXXXXXXX
----------- ----- XXXXXXXXXXX
----------- ------------ --------------
That is, the central column narrows as it goes around the image.
If you look in almost any magazine layout involving images and sidebars, you will see these kind of image treatments all over the place. I just picked up a few magazines to check this statement, and
I am trying to do a magazine layout previously done in Quark that floats images that are an integral number of columns. floated to the the left and right horizontally, and vertically to the (or section) top, bottom. They float both within a page, but also with a containing block. Such as to the right- of the containing article (which may itself not be across all the columns.)
From experimenting with PrinceXML, I see that one column images are not a problem as long as they don't float. And I seem to be able to get headings or images to span all the columns. But I cannot get elements to span across more than one column but less than all the columns. And floating within a multi-column layout seems totally unpredictable, and to be blunt, broken.
The layout I am trying to replicate doesn't have any cases where you need to narrow a column to get it to flow around an element, but that is pretty common and I can see the designers wanting to do that too.
Possibly, PrinceXML doesn't support some of the CSS3 columns functionality yet. OK, but I can't see even how to achieve any of this without doing a lot of non-semantic markup and writing very detailed stylesheets to move every little element into position precisely. This is much worse than the old-fashioned table-based layouts.
How are these kind of layouts achieved with PrinceXML, given its current state of compliance with the specs?
Sometimes the floating element is the width of 1 to N columns, where N is the number of columns. In the following the XXX is the image, the text flows down column 1, to column 2 where it is interrupted by the image, continues below the image in column, and then into column 3, where it flows like in column 2. You can have the same situation with the image floating to the left.
----------- ------------ ------------
----------- ------------ ------------
----------- XXXXXXXXXXXXXXX
----------- XXXXXXXXXXXXXXX
----------- XXXXXXXXXXXXXXX
----------- XXXXXXXXXXXXXXX
----------- ------------ --------------
In the general case the floating image is not an integral number of columns in width. In that case, you want it to look like this:
----------- ------------ ------------
----------- ------------ ------------
----------- ----- XXXXXXXXXXX
----------- ----- XXXXXXXXXXX
----------- ----- XXXXXXXXXXX
----------- ----- XXXXXXXXXXX
----------- ------------ --------------
That is, the central column narrows as it goes around the image.
If you look in almost any magazine layout involving images and sidebars, you will see these kind of image treatments all over the place. I just picked up a few magazines to check this statement, and
I am trying to do a magazine layout previously done in Quark that floats images that are an integral number of columns. floated to the the left and right horizontally, and vertically to the (or section) top, bottom. They float both within a page, but also with a containing block. Such as to the right- of the containing article (which may itself not be across all the columns.)
From experimenting with PrinceXML, I see that one column images are not a problem as long as they don't float. And I seem to be able to get headings or images to span all the columns. But I cannot get elements to span across more than one column but less than all the columns. And floating within a multi-column layout seems totally unpredictable, and to be blunt, broken.
The layout I am trying to replicate doesn't have any cases where you need to narrow a column to get it to flow around an element, but that is pretty common and I can see the designers wanting to do that too.
Possibly, PrinceXML doesn't support some of the CSS3 columns functionality yet. OK, but I can't see even how to achieve any of this without doing a lot of non-semantic markup and writing very detailed stylesheets to move every little element into position precisely. This is much worse than the old-fashioned table-based layouts.
How are these kind of layouts achieved with PrinceXML, given its current state of compliance with the specs?