Forum How do I...?

Header positioning and behaviour

Redraptor
Hallo i have some questions about the header.

first lets take a look at the code.

@page {
	size: A4 portrait;
	margin:0mm;
	border:0px;
	padding:0mm;
	background: cmyk(0.29, 0, 1, 0);
	prince-shrink-to-fit: auto;
	marks: crop cross;
	prince-bleed: 10mm;
	prince-trim: 0mm;
	/* header */
	@top {
		content: "Testtext" ;
		background: cmyk(0, 0, 1, 0);
		font-family: Arial;
		font-size:18pt;
		line-height:18pt;
		border: 1px solid #000000;
	}
	@top-left-corner {
		background: cmyk(0, 0, 0, 1);
		content: "test";
	}
}


AS you can see, i defined a top and a top-left-corner. Its just a test, but there is a strange behaviour with the text set by "content:".

it looks like this:

header_1.PNG


when i set a "margin-bottom: 6mm" into the "@top" section, i getting this:

header_2.PNG


Also interessting is, that the first page with header has an bigger font-size in header (and also footer...) as the following pages.

compare wiht the pic before...
header_3.PNG



What i am doing wrong?

Sir, we are surrounded!

Excellent! Now we can attack in any direction.

  1. header_1.PNG59.7 kB
    text outside the background
  2. header_2.PNG6.1 kB
    background not in textbox
  3. header_3.PNG4.3 kB
    first header font-size is bigger
Redraptor
Ok the last behavior is produced by prince-shrink-to-fit: auto;
On the first page there is an Image, which forces a sizeing of all elments on page.

Sir, we are surrounded!

Excellent! Now we can attack in any direction.

dauwhe
Have you tried adding a margin to @page to create room for the headers? For @top-header, for example, we'd set a top margin on @page:

@page {
size: 5.25in 8in;
margin-top: 72pt;
@top-center {
vertical-align: bottom;
padding-bottom: 14pt;
}
}

So text in @top center will sit 14pt above the top of the body text, and there's still plenty of room above the header.

Dave


Redraptor
Thanks for reply,

but i tried something else, and i got a satisfying result.

header_green_bordered.png


The green Border is the TrimBox (active this in Adobe Acrobat Pro). The Black Border shows the dimensions of the Header Box.

@page {
	padding-top:15mm;
	marks: crop cross;
	prince-bleed: 10mm;
	prince-trim: 0mm;

/* header */
	@top {
		margin-top:10mm;
		margin-bottom:10mm;
		text-align:left;
		content: string(page-title);
		background: cmyk(0.29, 0, 1, 0);
		font-size:18pt;
		line-height:18pt;
		padding-top: 8mm;
		padding-left: 2mm;
		border: 1px solid black;
	}
}


In Adobe Reader (wihtout any border!) it looks like this:

header_green_blank.png



I try to understand how the height of the @top Box is composed.
Looks like the height (the height attribute isnt recognized) is set by the margin (top + bottom) and the baseline of the box is in the middle of the text. Adding a padding shifts the text (not the baseline!).
Since i am not define a margin for the header, the box will have no height. So the border of the Box wil be only one line (look first post).
Is my notice right?

Thanks

Sir, we are surrounded!

Excellent! Now we can attack in any direction.

  1. header_green_blank.png4.1 kB
    how it looks in Adobe Reader
  2. header_green_bordered.png3.6 kB
    Bordered with visible TrimBox
mikeday
@top is a margin box, so it occupies the page top margin. If the page has no margin, it will overlap with other content.