Hello,

I think I have come across a weird bug concerning static flow elements. I have a dedicated div.pdf-footer element, that I remove from the normal flow and define as static flow element for the footer.

HTML:

          <div class="pdf-footer">
            <span class="pagenumber">-1</span>
            <span class="title">Title</span>  
          </div>

CSS:

      .pdf-footer {
        flow: static(pdf-footer);
        text-align: inside;
        text-transform: uppercase;
        font-size: 6pt;
        line-height: 7pt;
        margin: 0;
        border: 1px solid orange;
      }

And the @page rule:

      @page {
        color: #000;
        size: 215mm 280mm;
        margin: 12mm;
        border: 1px solid green;

        @bottom-right {
          border: 1px solid red;          
          font-size: 6pt;
          font-weight: bold;
          content: flow(pdf-footer);
          vertical-align: bottom;
          padding-bottom: 8mm;
        }
      }

At first everything was rendered correctly. However, note the 'padding-bottom' attribute of '@bottom-right'. When changing it from '8mm' to '9mm' the span.title disappears and only the span.pagenumber is rendered.

Summary: With the 'padding-bottom' attribute of the '@bottom-right' margin box < 9mm everything is rendered correctly. Increasing it to >= 9mm, the span.title disappears.

As always, I have attached the HTML as well as the two output files. Please let me know if I can be of any help or you need further information.

Greetings,
John

1. footer_bug.html‎ 1.2 kB ‎
   HTML
2. output_padding_bottom_8.pdf‎ 8.4 kB ‎
   Output: 8mm
3. output_padding_bottom_9.pdf‎ 8.4 kB ‎
   Output: 9mm

I think it's all just getting too squashed; the bottom margin is only 12mm high to begin with, so using 9mm for padding only leaves 3mm, which isn't really big enough for any text at all.

hello mike,

yes you are right. This totally makes sense. It looks as if at least "4mm" are needed to render the text. I didn't realize this, because the 'span.pagenumber' is still rendered.

greetings,
John

Looking further into this, the example does not really make sense, since what is tried to be achieved is moving the static element to the top. This can easily and correctly be achieved by:

          vertical-align: top;

instead of

          vertical-align: bottom;
          padding-bottom: 9mm

It doesn't explain why only the span.title element disappears, but the problem can easily be avoided by writing proper CSS that also makes sense

Edited 16 Oct 2017 by John

Right.