Log in / Register

Forum › How do I...?

multi-line headers and footers

Anonymous
Is there a way for Prince to create headers and footers with multiple lines and different styles on each line?

For example:
                                    
                                                     Heading Line 1 (right-aligned, bold)
                                                     Heading Line 2 (right-aligned,italic)
                   Heading Line3 (centered, large font)

I have played around with the top-right, top-center, and top-left margin boxes, but I haven't been able to figure out how to put line breaks and multiple styles into a single margin box.


Thanks,

Marie
xuehong
Hi Marie,

To have a header or footer in a single margin box that has multiple lines with different styles on each line, you can use the "prince-flow" property instead of using the "string-set" property. Here is an example for achieving what you are trying to do:

<html>
<head>
<style>
@page {
    margin-top: 100px;
    @top {
        content: flow(header);       /* use the header flow as content */
        border-bottom: solid red
    }
}
#header {
    prince-flow: static(header);     /* flow the element to the header */
    font-size: 14px
}
#line1 { font-weight: bold }
#line2 { font-style: italic }
#line3 { font-size: 24px; text-align: center }
div.chapter { page-break-before: always }
</style>
</head>
<body>
<div id="header">
<div id="line1">This is the first line of the header (bold)</div>
<div id="line2">This is the second line of the header (italic)</div>
<div id="line3">This is the third line of the header (big, centered)</div>
</div>
<div class="chapter">First chapter of the document.</div>
<div class="chapter">Second chapter of the document.</div>
</body>
</html>


The "prince-flow" property (which can also be referred to just as "flow") can move an entire element out of the normal flow of the document and place it in a repeating page header or footer in a page margin box. This allows headers/footers to be designed using arbitrary markup with different styles.

The documentation for this property is under headers and footers.

Hope this helps,

Xuehong
Anonymous
Thanks so much! --Marie
kaphinga
I am having trouble getting the headers to run for more than two pages. This code, for example, produces headers for Chapter 1 and Chapter 2 but not for Chapter 3 or Chapter 4. 

<html>                                                                                                                                        
<head>                                                                                                                                        
<style>                                                                                                                                       
@page {                                                                                                                                       
    margin-top: 100px;                                                                                                                        
    @top {                                                                                                                                    
        content: flow(header);       /* use the header flow as content */                                                                     
        border-bottom: solid red                                                                                                              
    }                                                                                                                                         
}                                                                                                                                             
#header {                                                                                                                                     
    prince-flow: static(header);     /* flow the element to the header */                                                                     
    font-size: 14px                                                                                                                           
}                                                                                                                                             
#line1 { font-weight: bold }                                                                                                                  
#line2 { font-style: italic }                                                                                                                 
#line3 { font-size: 24px; text-align: center }                                                                                                
div.chapter { page-break-before: always }                                                                                                     
</style>                                                                                                                                      
</head>                                                                                                                                       
<body>                                                                                                                                        
<div id="header">                                                                                                                             
<div id="line1">This is the first line of the header (bold)</div>                                                                             
<div id="line2">This is the second line of the header (italic)</div>                                                                          
<div id="line3">This is the third line of the header (big, centered)</div>                                                                    
</div>                                                                                                                                        
<div class="chapter">First chapter of the document.</div>                                                                                     
<div class="chapter">Second chapter of the document.</div>                                                                                    
<div class="chapter">Third chapter of the document.</div>                                                                                     
<div class="chapter">Fourth chapter of the document.</div>                                                                                    
</body>                                                                                                                                       
</html>


I think the trouble is related to the number of pages and not to the number of div tags. For example, I tried adding lots of text (about 10 pages worth) to the First Chapter. The first two pages had headers and the other headers were blank.

Here is everything I can tell you about my environment.

* I am running a freshly downloaded version 5.0 (not a beta) on Macintosh OS X.
* I am running the demo version. I am planning to buy the full version as soon as I am confident that I can get the headers to work.
* I am using the mac's Preview application to view the PDF.
* I am getting two warnings when I run Prince:
prince: warning: error getting family name for 'MT Extra Plain:001.000' (-8905)
prince: warning: error getting family name for 'MT Extra Plain:001.000' (-8905)
( I don't use "MT Extra Plain" in my document. )


I have done everything I know to get the headers to display past the second page. I keep thinking that I must be doing something goofy.

Any ideas would be greatly appreciated.

Thanks,

Marie

Marie Matthews

xuehong
Hi Marie,

It seems that you have discovered a bug in Prince 5.0 affecting the flow property. We have fixed the bug here and will upload a new build of Prince with the fix for you to try in the next couple of days.

Thank you for reporting the issue!

Xuehong
kaphinga
Thanks for your quick response! I will look forward to the fix.

Marie Matthews

mikeday
Hi Marie,

We have uploaded a maintenance build of Prince 5.0 that has fixed the issue affecting the "flow" property. (It also includes some other bug fixes and performance improvements).

You can download it from our website:

prince-5.0r2-setup.exe (Windows)
prince-5.0r2-macosx.tar.gz (MacOS X)
prince-5.0r2-linux.tar.gz (Linux)
prince_5.0-3_i386.deb (Debian)

Please let us know how it goes and whether this fixes the problem! :D

Best regards,

Michael
kaphinga
I just tried it and it works great! Thanks so much!

Marie

Marie Matthews

Jose
I don't seem to be able to get the footer in every page and instead only get it on the very last one

CSS
@page {
	size: US-Letter; margin: 10mm 15mm 20mm 25mm;

	@bottom {
		content: flow(footer);
		vertical-align: top;
		background-color: #f00;
	}
}
.footer {flow: static(footer);}


HTML
  <div class="footer">
    <p>
      <strong>Terms:</strong> Payment due upon receipt.<br />
      <strong>For inquiries, please contact:</strong> xxxxxxxx, xxxxx &nbsp;|&nbsp; xxxx &nbsp;|&nbsp; xxxxx: <a href="mailto:xxxxx@xxxxx">xxxxxxxxxxx</a>
    </p>
    <div class="pagec">Page <span id="pagen"></span> of <span id="paget"></span></div>
  </div>
mikeday
By default the flowed footer block will only appear on the page on which it occurs and subsequent pages, so if the footer is at the end of the document it will only appear on the last page. You can change this behaviour by flowing it to the start of the document like this:
.footer { flow: static(footer, start) }
Jose
mikeday wrote:
By default the flowed footer block will only appear on the page on which it occurs and subsequent pages, so if the footer is at the end of the document it will only appear on the last page. You can change this behaviour by flowing it to the start of the document like this:
.footer { flow: static(footer, start) }


Thanks for the quick reply!! This helps. Now, where on earth can I find this information in the documentation? Is there a book that can be purchased that will be littered with practical examples? Thanks.
mikeday
That would be nice, and we would love to write one, if we were not so busy implementing new features! :)
Jose
mikeday wrote:
That would be nice, and we would love to write one, if we were not so busy implementing new features! :)


Fair enough. Given the quick turnaround when posting, it's probably not an issue ;)
gastronovi
Hello,

sorry for digging out an old thread, but this is exactly what I'm trying to accomplish. I have this styling:

@page {
	@bottom {
		content: flow(footer);
	}
}

[...]

.footer {
	flow: static(footer, start);
}


and this is the corresponding HTML:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	</head>
	<body>

                [...]

		<div class="footer">
			<div class="footer_text>LINE1</div>
			<div class="footer_text>LINE2</div>
			<div class="footer_text>LINE3</div>
		</div>	
	</body>
</html>


My Problem is that there is only one line (the first) in the footer when I create the PDF.

I also tried using <p> or pure text inside the footer-div, but nothing seems to work. :(

Can you tell me why?


Greetings, gastronovi
mikeday
Perhaps the @page margin-bottom is not big enough to fit the footer?
gastronovi
That was indeed the problem! Thank you very much. :)