I am struggling with the problem that a "div" (just containing text in paragraphs) that spans more than one column (or page) doesn't fully fill its background to the baseline of the page.
That is, whenever the column break takes places (I set orphans/widows to 4) it should still fill the div's background color to the end of the page. It looks really not natural like that.
I tried to in xml-fo directly to set space-after.minimum/space-before.minimum/space-after.maximum/space-before.maximum which results in slightly better result, i.e. the div starts farther down to fillup the gap at the bottom. Is there a solution to set these properties with css2xslfo?
Any good ideas?
I appreciate your help,
Markus
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
I'm afraid there is no solution for this. The div's block area contributions have the background, but a block cannot fill up the remaining vertical space. It is confined to its contents. Setting the properties you mentioned is not possible with CSSToXSLFO. You will have to set them in a post-processing step.
You can play with @page rules where CSSToXSLFO lets you set the background-color of a page. With named pages you can switch between pages and backgrounds.
Best regards,
Werner.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Thank you for your feedback even though it's really bad news.
I cannot play with the @page attributes since the column-gap should be white and It could be that there are two blocks on one page with different background.
Do you think there might be a work around with empty blocks having "min-height" and "max-height" set?
Thanks and best regards,
Markus
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
I don't think min-height and max-height are going to help, because the div is high enough. The block areas that are contributed by the div are filled up with paragraphs. They flow through the page gallery and use the space needed to accommodate their contents. This is a consequence of the CSS box model, which is also the basis for XSL-FO.
Perhaps the following trick may help. If you set the default background colour on the body element you will have a white column gap, because the body element will translate to the region-body element in XSL-FO. When some divs need another background colour you assign it to them and they will render over the region-body. However, that doesn't solve the problem of a div that flows from one column to another. There will always be a bit of the default background colour at the end of the first column.
Best regards,
Werner.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Ok so I guess also in the future something like that wont be possible :(
I'd rather follow the space-before.minimum/space-before.maximum work-around which will at least try to partially align the first part of the block at the bottom of the page. Therefore, the "white gap" is shifted to the top of the block, where it is less bothering. So I'll have to change the source code to not filter out these tags. Is there maybe something similiar in CSS3 already?
Inisde the block I use now a table and set an empty table footer and header (table-omit-header-at-break = false) which adds at least a padding. Unfortunately, there is no such option to stretch a footer to the end, I guess.
Thanks,
Markus
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Hi,
I am struggling with the problem that a "div" (just containing text in paragraphs) that spans more than one column (or page) doesn't fully fill its background to the baseline of the page.
That is, whenever the column break takes places (I set orphans/widows to 4) it should still fill the div's background color to the end of the page. It looks really not natural like that.
I tried to in xml-fo directly to set space-after.minimum/space-before.minimum/space-after.maximum/space-before.maximum which results in slightly better result, i.e. the div starts farther down to fillup the gap at the bottom. Is there a solution to set these properties with css2xslfo?
Any good ideas?
I appreciate your help,
Markus
Hi Markus,
I'm afraid there is no solution for this. The div's block area contributions have the background, but a block cannot fill up the remaining vertical space. It is confined to its contents. Setting the properties you mentioned is not possible with CSSToXSLFO. You will have to set them in a post-processing step.
You can play with @page rules where CSSToXSLFO lets you set the background-color of a page. With named pages you can switch between pages and backgrounds.
Best regards,
Werner.
Hi Werner,
Thank you for your feedback even though it's really bad news.
I cannot play with the @page attributes since the column-gap should be white and It could be that there are two blocks on one page with different background.
Do you think there might be a work around with empty blocks having "min-height" and "max-height" set?
Thanks and best regards,
Markus
Hi Markus,
I don't think min-height and max-height are going to help, because the div is high enough. The block areas that are contributed by the div are filled up with paragraphs. They flow through the page gallery and use the space needed to accommodate their contents. This is a consequence of the CSS box model, which is also the basis for XSL-FO.
Perhaps the following trick may help. If you set the default background colour on the body element you will have a white column gap, because the body element will translate to the region-body element in XSL-FO. When some divs need another background colour you assign it to them and they will render over the region-body. However, that doesn't solve the problem of a div that flows from one column to another. There will always be a bit of the default background colour at the end of the first column.
Best regards,
Werner.
Hi Werner,
Ok so I guess also in the future something like that wont be possible :(
I'd rather follow the space-before.minimum/space-before.maximum work-around which will at least try to partially align the first part of the block at the bottom of the page. Therefore, the "white gap" is shifted to the top of the block, where it is less bothering. So I'll have to change the source code to not filter out these tags. Is there maybe something similiar in CSS3 already?
Inisde the block I use now a table and set an empty table footer and header (table-omit-header-at-break = false) which adds at least a padding. Unfortunately, there is no such option to stretch a footer to the end, I guess.
Thanks,
Markus
Hi Markus,
I'm afraid indeed it won't be possible and neither will stretching a table footer to the end, for the same reasons.
Best regards,
Werner.
Hi Werner,
Thanks anyways for your help - and also for this project, I really like it. Maybe one of the best/useful projects I found within the last year :)
Maybe I'll have a mind blowing idea later.
Regards,
Markus
Hi Markus,
Thank you very much for those encouraging words!
Best regards,
Werner.