Log in / Register

Forum › How do I...?

Width for @bottom content added via string-set

pestafo
How can I set the width when I add content to the @bottom via string-set? In my example the footer text flows over the page border and I could not find a way to set the width to force the text to be wrapped.

<html>
  <head>
    <title>Test</title>
    <style type="text/css">
@page {

  margin-bottom: 15mm;

  @bottom {
    content: flow(pageFooterFlow);
	vertical-align: top;
	width: 175mm;
  }

}

.dynamicFooter-set{
  string-set: dynamicFooter content(); 
}
.dynamicFooter-clear{
  string-set: dynamicFooter "";
}

.footerText {
  flow: static(pageFooterFlow);
  content: string(dynamicFooter);
  max-width: 175mm;
}


</style>
  </head>
  <body>
    <div>
		<div style="width:175mm;" class="dynamicFooter-set">
			<p class="footerText dynamicFooter-set">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
		</div>
      <table>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
      </table>
    </div>
    <div style="float: bottom; margin:0; padding:0;">
      <table>
         <tr><td class="dynamicFooter-clear" >bottom</td></tr>
         <tr><td >bottom</td></tr>
         <tr><td >bottom</td></tr>
      </table>
    </div>
  </body>
</html>
mikeday
Commenting out the content property on the .footerText class seems to do the trick. I don't see why you need to use string-set to capture the text and flow to capture the element, generally only one of those mechanisms will be used at a time. Also, the specified width of 175mm on the block seems much too big.
pestafo
What I want to achieve with the string-set construct is a an empty footer on the last page.

I could replace the 'string-set dynamicFooter content()' with 'string-set: dynamicFooter "Lorem ipsum ..." but I thing that makes no difference.

When I set the margins and background-color of the @bottom area like 
@page {

  margin-top: 15mm;
  margin-right: 15mm;
  margin-bottom: 15mm;
  margin-left: 15mm;

  @bottom {
    content: flow(pageFooterFlow);
    vertical-align: top;
    background-color: yellow;
  }

}

it can be seen, that the text flows out of the yellow @bottom rectangle.
mikeday
How about dropping the content and then flowing an empty block to remove the footer on the last page?
pestafo
I am not quite sure if I understand you correctly. Do you mean to cover the footer with an empty block with the corresponding size?

Did you see the problem with the text going over the border of the @bottom area and even over the page border.
mikeday
How about you try this:
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
@page {

  margin-top: 15mm;
  margin-right: 15mm;
  margin-bottom: 15mm;
  margin-left: 15mm;

  @bottom {
    content: flow(pageFooterFlow);
    vertical-align: top;
    background-color: yellow;
  }

}

.footerText {
  flow: static(pageFooterFlow);
  max-width: 175mm;
}


</style>
  </head>
  <body>
    <div>
      <div>
         <p class="footerText">Lorem ipsum dolor sit 
amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At 
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd 
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </div>
      <table>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
        <tr><td >top</td></tr>
      </table>
    </div>
    <div style="flow: static(pageFooterFlow)"></div>
    <div style="float: bottom; margin:0; padding:0;">
      <table>
         <tr><td>bottom</td></tr>
         <tr><td>bottom</td></tr>
         <tr><td>bottom</td></tr>
      </table>
    </div>
  </body>
</html>
pestafo
I first thought that your solution would solve my problem. But I have multiple content elements in my page footer, some of them should and others should not appear on the last page - I know my example does not show this.

The problem is that some of the elements which should be on the page footer of the last page are counter based. When repeating them in the footer for the last page the counter values used are no longer the same and I get wrong texts.

With string-set I could replace only those contents which are different on the last footer. Is there a reason why the content added with string-set behaves different than 'using' the content of the element itself.
mikeday
I'm not sure if we've ever tried this combination of flow and string-set, so there could be an overlooked bug. We'll investigate the issue.
mikeday
This bug should be fixed in Prince 7.1, available now.