Log in / Register

Forum › Bugs

Extra blank page when first element is "position: running(named-element)"

quiredan
We recently upgraded to the latest version of Prince and wanted to start using position: running() instead of prince-flow: static() since the former is part of the official spec.

Everything seems to be working fine, but we're getting a blank page at the start of the document when using position: running() but NOT when using prince-flow: static() when it's used on the first element(s) in the document.

Our HTML looks roughly like this:

<html>
<body>
  <header class="header-box"></header>
  <footer class="footer-box"></footer>
  <div class="page"></div>
  <div class="page"></div>
  <div class="page"></div>
  <div class="report-body">
    <section class="section"></section>
    <section class="section"></section> 
    <section class="section"></section>
    <section class="section"></section>
    <section class="section"></section>
    <section class="section"></section>
    <section class="section"></section>
  </div>
</body>
</html>


When we use this CSS everything works as expected:

.header-box {
  flow: static(header-box);
}
.footer-box {
  flow: static(footer-box);
}

.report-body {
  page: report-body;
}

@page report-body {
  margin: 1in;
  @top-center {
    content: flow(header-box);
  }
  @bottom-center {
    content: flow(footer-box);
  }
}


But when we use this, there's a blank page:

.header-box {
  position: running(header-box);
}
.footer-box {
  position: running(footer-box);
}

.report-body {
  page: report-body;
}

@page report-body {
  margin: 1in;
  @top-center {
    content: element(header-box);
  }
  @bottom-center {
    content: element(footer-box);
  }
}


There are some other things going on but the trigger seems to be the running elements.

Is this a bug or does position: running() just work differently than prince-flow?
jamespaden
I run into this frequently as well. Stumbled across this post while looking for an answer. Any ideas on how to avoid this? I normally put my headers as the very first element in a doucment.

Try DocRaptor - PrinceXML web service and official PrinceXML partner

jsh2134
I am encountering this same issue and stumbled upon this post. Any workarounds?
esef
same problem here.

what I tried to no avail:

- display: none -- also not visible in target region, even when setting display: block there.
- visibility: hidden -- still a blank page
- absolute, top: -10000, left: -10000 -- still a blank page
- height, margin, padding, width = 0 -- still a blank page
...
jsh2134
Here is my test case. I expected one orange page, and one blue page. However I get a violet page at the start.

<!DOCTYPE html>
<html lang="en">
	<head>
		<style>
		@page {
			margin: 146pt 18pt 34pt 18pt;
			background-color: violet;
			@top {
				content: element(headerFull);
			}
		}
		@page header-full-page {
			background-color: orange;
			margin-top: 146pt;
			@top {
				content: element(headerFull);
			}
		}
		@page header-full-page-tall {
			background-color: blue;
			margin-top: 150pt;
			@top {
				content: element(headerFull);
			}
		}
		.header-full {
			position: running(headerFull);
		}
		.header-full-content {
			display: block;
			page: header-full-page;
		}
		.header-full-content-tall {
			display: block;
			page: header-full-page-tall;
		}
		</style>
	</head>
	<body>
		<div class="header-full">
			header content
		</div>
		<div class="header-full-content">
			Page 1 Content - Default Header
		</div>
		<div class="header-full-content-tall">
			Page 1 Content - Tall Header
		</div>
	</body>
</html>
quiredan
Does it work if you move the header-full element to the end? I think this is simply a bug with how Prince is handling the first element. It seems to be creating a new page before checking to see if the element has been removed from the document flow. I haven't been able to figure out any workarounds.
esef
if you move the running header the end, you got no header, not what you want.

My workaround is to put the header at the beginning of the first page, which is always a titlepage for me.
It is not really correct and also its awkwards but it works. So sth like this

div.page_titlepage
div.running_header
divs ... (the actual titlepage)
div.page_default
...
mikeday
There is an (unintended?) difference at the moment in the handling of "position: running()" and "prince-flow: static()" when the element being taken out of the flow is followed by an element in a different named page group, which can lead to an unwanted blank page.

Hopefully we can fix this behaviour so it is more consistent, but in the meantime you can avoid the blank page by placing the element being taken out of the flow in the same named page group.
esef
If I understand correctly you are proposing sth like this

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1 { break-before: page; }
        #running { position: running(running-element); }
        @page { size: A4; background: red; }
        @page Named {
            size: A4;
            background: lightblue;
            @top-center { content: element(running-element); }
        }
    </style>
</head>
<body>
    <div style="page: Named">
        <div id="running">RUNNING</div>
        <h1>Named 1</h1>
        <h1>Named 2</h1>
    </div>
</body>
</html>


still getting an empty page here.
(tested with latest and 15.1)
mikeday
Can you move the break-before from h1 to the outer div perhaps?
esef
that works and is exactly what I'm doing in production right now.
but it is semantically incorrect, as it nests the runner in a block it does not belong to.
but not a great deal.

Edited by esef