Log in / Register

Forum › How do I...?

Header Footer Margins Are Relative?

nishantvarma
Hello,

The Header and Footer margins are relative to the page margin when we use the @top, @bottom attribute?

For example in this case (html pasted below) the layout is:

------------------------------
Header Header
Body Body
Footer Footer
------------------------------

Now when I change to @top-left-corner, @bottom-left-corner it comes but one Header is missing since it allows only corner.

------------------------------
Header
Body Body
Footer
------------------------------

Question is

1) How do I make @top not use relative positioning? It should start from the margin specified.

2) Is there an alternative way you could suggest?

3) Prince 8.x didn't behave like this? We were using Prince 8.x earlier, now migrating to Prince 10.x


<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<style type="text/css">

@media print {


#header_content {position: running(header);}
#footer_content {position: running(footer);}
#first_page_content {position: position(first_page);}
#landscape {page: landscape;}

@page {
size: LETTER Portrait;
margin-left: 0.5cm;
margin-right: 0.5cm;
margin-top: 1.0cm;
margin-bottom: 1.0cm;
@top {
float-top: next;
margin-left: 0.5cm;
margin-right: 0.5cm;
height: 1.0cm; content: element(header);
}
@bottom {
margin-right: 0.5cm;
margin-left: 0.5cm;
height: 1.0cm; content: element(footer);
}
}

}

</style>
</head>

<body>

<div id="header_content"> Header Header </div>
<div id="footer_content"> Footer Footer </div>
<div id="body_content">Body Body</div>

</body>

</html>
nishantvarma
It seems I didn't format it correctly.

When I use @top and @bottom,

    Header Header
  Body
    Footer Footer


When I use @top-left-corner and @bottom-left-corner,

  Header
  Body
  Footer

nishantvarma
The suggested approach as per this is to not specify a margin for Header Footer or do we have a finer control over it. I am just curious especially I don't think Prince 8.x was like this.
Baikuntha
@Nishant, I am also facing the same issue.
mikeday
I think you want to remove the margin from the @top and @bottom declarations, and it would help to add a border to @top, @bottom, and @page so you can see the box sizes and locations.
nishantvarma
Right, Baikuntha.

In our application, we have Header and Footer Margins exposed to the end user. As per this behavior we will have to inform them that Header and Footer Margins are relative to the Page Margin. This doesn't seem to be the way it was for Prince 8.x?

Anyway the only fallback I can think of is to just remove the relative-ness by adding the page margin back using our Template engine, but that doesn't seem to be a good approach? Here is a gist ...


@page
{
 margin : {body-margin}
 // Now it won't be relative anymore. Whatever front-end value is given it will be Header Margin.
 top {margin: header-margin - body-margin }
 bottom { margin: footer-margin - body-margin}
}

nishantvarma
Thanks for the reply mike. As the above post mentions why I needed that value. We expose Header and Footer margin to our end users. Also was there a difference Prince 8.x and Prince 10.x in how margins are taken for @top and @bottom?

Yes I use the borders wherever its required to debug those details. That is how I found the box locations.
nishantvarma
We got this during migration from 8.x to 10.x hence the emphasis on if it had changed :)
mikeday
It's possible that the margins on flowed blocks could have been zeroed out in Prince 8.x, I will check.
nishantvarma
Ok Thanks. I will offset it in the Template for our purpose.