Menu
In my application, the user is allowed to define his own headers and margins for printing. For the header, the user can provide the following two fields:
The fields (a) and (b) are as shown in the figure below:
For example, if the user provides (a) as 10mm and (b) as 100mm, then the height of the 'Header Region' would be 90mm.
Now the content within the header needs to be aligned at the top of the Header Region.
Is there a way to set the Header Region Height and to top-align the content within this header region.
At present, i am doing the following for the header-html option:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body
{
border:0;
margin: 0;
padding: 0;
height: 90mm; //in actual program, this is set dynamically in PHP
}
</style>
<script type="text/javascript">
function subst()
{
//process the GET parameters and accordingly set the Header Region text info
}
</script>
</head>
<body onload="subst()">
<div>
//text
</div>
</body>
</html>
The margin-top option is being set as 100mm.
I have tried setting vertical-align: top for the body CSS, But that too did not work.
The final output that I achieve does not seem to have the Header Region content vertical aligned in either top or middle. It is somewhere a little above the middle of the Header Region.
983
Use -T -B -L and -R for margins.
Footers And Headers: Headers and footers can be added to the document by the --header-* and --footer* arguments respectively. In header and footer text string supplied to e.g. --header-left, the following variables will be substituted.
Edit: This fix seems to be required only when wkhtmltopdf is installed in a Windows based system.
After lot of trial and error, I observed that the following logic seems to be work:
So, the changed code (for the above example) for html-head looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body
{
border:0;
margin: 0;
padding: 0;
height: 120mm;
/*
In the actual program this height is calculated dynamically in PHP as
($headerMargin - $topMargin) * 1.33
*/
}
#master-div
{
overflow: hidden;
height: 100%;
}
</style>
<script type="text/javascript">
function subst()
{
//process the GET parameters and accordingly set the Header Region text info
}
</script>
</head>
<body onload="subst()">
<div id="master-div">
//The actual content goes here
</div>
</body>
</html>
I have checked this for atleast 7 to 8 different paper sizes (including setting custom page-width and page-height. Also checked with different Header Region content size (ranging from 1 line to 20 lines).
The only catch is that this logic of 1.33 times the header region height seems to work only if the Header Margin(b)/Footer Margin is less than or equal to one-third the paper-height. If the margin height goes beyond that the content gets clipped as the margin-height increases. But having such large header-heights would generally not be required, i guess.
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With