I am attempting to use the markdown-pdf node library to generate a pdf document from a markdown document. It is producing the pdf but I cannot seem to get repeating footers working.
The footer is at the end of the document with the following code:
<div id="footer">
© 2013 MyCompany
</div>
And the CSS file I am including has the following in it:
#media print {
#footer {
position: running(footer);
}
}
#footer {position: relative ; left: 0px; bottom: 0px; right: 0px; font-size:10px; }
This produces nicely formatted code on the html page at the bottom left, but the test is not displaying as a page footer on any of the pdf pages.
Any help much appreciated.
I think there could be 2 problems:
[1] markdown-pdf don't read the element because:
"A running element is not shown in its natural place; there it is treated as if ‘display: none’ had been set. [...]" -> W3.org
[2] markdown-pdf don't read the element because it's only defined for media print. (Maybe markdown read in media screen?)
I hope this thougths could help you.
Possible "solvings":
try media all/screen
ask alanshaw if running elements are supported (if not use your relative Css settings)
Related
I tried to convert this html resume to pdf and print it but as you see there is a problem in template after changing. For example compare skills in both html version and pdf version.
This is Github repo of this project: https://github.com/xriley/DevResume-Theme
And this is a sample of HTML file: https://themes.3rdwavemedia.com/demo/devresume/
How can I fix it for ever?
I need this: https://themes.3rdwavemedia.com/wp-content/uploads/2019/04/DevResume-Sketch-Template-PDF-Preview.pdf
Solution 1 - Without Coding:
You can select margins as custom from more settings to make changes for each page accordingly.
Then you can drag these blue dotted borders to adjust text based on your need.
As i have drag thelower border upward to make senior developer text to appear in next page.
Solution 2 - With Coding:
Simply adjust margins for each page from solution 1.
Then by using the #page in your CSS. You can modify margins when printing a document. You can't change all CSS properties with #page. Only few properties such as margins while printing the page etc.
#page:first { <----- first here is refering to only First Page
margin-left: 0.75cm;
margin-top: 0.25cm;
margin-bottom: 0.25cm;
margin-right: 0.75cm;
}
If you want to apply margins on all page then simply do this:
#page { your margins values }
You can read more about #page property here.
I am trying to make a footer for a HTML file where the footer needs to display on every printed page. I found a topic with a solution that locks a specific text to every page I print.
HTML:
<div class="divFooter">This is a footer</div>
CSS:
#media screen {
div.divFooter {
display: none;
}
}
#media print {
div.divFooter {
position: fixed;
bottom: 0;
}
}
The problem with this code is that the rest of my code just overwrites this whenever it reaches the footer. Anyone know a nice and quick solution for this? If not, maybe a different way to lock a footer to every page I print of that HTML file? I would also like to note that I cant link a seperate CSS file to the HTML. So every code I make, needs to be in the same file.
Maybe the solution is not just to use HTML and CSS, but to use PHP, making a footer include on each page, so you have a fixed footer for each.
<html>
...
<? php
include_once ("footer.html");
?>
...
Is there a way to describe a printable document (A4 size for instance) using HTML/CSS ?
In HTML5 we have <header>, <footer>, and plenty of elements which can be used for building a document, but I wonder if I can output PDF documents where content is displayed using web technologies.
I try using media query #print in CSS in order to output a HTML file as PDF using my browser print box, but this solution is not so good in my point of view (displaying page number, or footnotes in footer).
Furthermore the render is not the same using different browser, and I want my documents to be all the same.
#print is the best solution:
#media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
See all posible solutions here:
Print <div id=printarea></div> only?
You will probably find what you need.
I've been playing with getting a HTML document to display in A4 size and using the code in this codepen works perfectly:
https://codepen.io/rafaelcastrocouto/pen/LFAes
CSS
body {
background: rgb(204,204,204);
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
HTML
<page size="A4"></page>
However, I'm not sure how or why declaring page and page [size information] in CSS allows you to use the tag in HTML. In fact, I can find any reference to a HTML page tag anywhere.
Can someone please explain how the code is working in the codepen? Thanks in advance
I do not believe that <page> is an actual HTML element.
When the browser sees this, it probably thinks it is getting old and missing out on new inventions that didn't exist when the browser was released.
In that case it is treated like a <div>, and CSS rules still apply.
But really it's best to stick to elements that really exist, instead of pretending they will some day, because in the future the implementations of newly created tags could be different than you expect.
It would have been better to be written as <div class="page" data-size="A4"> with the CSS looking for div.page and div.page[data-size="A4"].
It isn't HTML. This just takes advantage of the fact that, in order to facilitate future expansions to the language, browsers allow unknown elements to be targeted with CSS and JS.
You can read about HTML5 tags HERE
If you want use HTML5 you should replace <page></page> with <div> or <section>. Page tag doesnt exist!
with it you can style your HTML with
section {
"your style"
}
section[size="A4"] {
"your style"
}
I am trying to create an html page which will be used for printing data using browser. I need to include a footer with it which will show up in every page at the bottom when printed and I have developed the following code for implementing this.
The following code is working fine, but the problem is when my contents inside the div content gets long enough to make users scroll down the page, that time if I go to the print option of Google Chrome and see the print preview, I can see the footer shows up in the first page, but not in the rest of the pages. But this same code works in firefox and the footer shows up in all the printed pages(and even shows up in the print preview).
Could you please help me to show up the footer in every pages when printed using Google chrome?
Thanks :)
<html>
<head>
<style type="text/css">
html {margin:0;padding:0;border:0; overflow-y: scroll;}
body { font-size:75%;color:#222; font-family: Geneva, Arial, Helvetica, sans-serif;}
#container {margin:0 auto; height:100%; }
#content{}
#footer {position: fixed ; left: 0px; bottom: 0px; right: 0px; font-size:10px; }
</style>
</head>
<body>
<div id="container">
<div id="content">
My Contents
</div>
<div id="footer">This is my Footer</div>
</div>
</body>
</html>
Should have position: relative to parent element of footer
and it's parent element is body so give it to body or container
http://jsfiddle.net/jXujq/ See the CSS code...
For anyone still facing this issue, I've created an open-source library that could solve it. It allows printing repeated headers and footers from Chrome, depending on the structure of your html. See this answer:
https://stackoverflow.com/a/34444930/2196424
I've spent a lot of time on this footer thing, I was able to do it on IE using position: fixed and bottom 0, with some body margins to avoid the content from overlapping with the footer.
But with chrome, the only way I was able to do something similar was by using javascript to calculate the white space required to push the footer to the bottom (by assigning that value to an empty div): -
var printPageHeight = 1900; //(have to test this value)
var mFooter = $("#footer");
var bottomPos = mFooter.position().top + mFooter.height();
var remainingGap = (bottomPos <printPageHeight ) ? (printPageHeight -bottomPos) : printPageHeight - (bottomPos % printPageHeight );
$("#whiteSpaceToPositionFooter").css("height", remainingGap+"px");
However, getting the size/height of the print page right is very difficult and the height() method of jquery doesn't account for margins and heights.
You need to set in your footer:
position:fixed;
bottom:0;
Maybe this would help you?
CSS Sticky Footer