As the title suggests, I'm working on a project and need to have print capability on a specific page. This page is 90% text. Changing the window size affects the size of the content printed on each page. This is odd because I'm already using an #print media query in my stylesheet.
In other words, when inspecting the print dialog while the window is at full width, the preview shows small print and all the content is stretched out across the page. When halving the screen size and again inspecting the print dialog, the content and text become bigger and better fit the page. This behavior persists even when I change the unit of measurement for font-size from px to pt.
Put simply, the size of the printed output is responsive to the size of the window. Is this normal / to be expected? Is there a way around this? I don't see this behavior on other sites. I would think that whether you attempt to print at full window size of half window size, the size of the printed content should be the same.
Either use a printing stylsheet as explained by mdn
<link href="/path/to/print.css" media="print" rel="stylesheet" />
or use a print media query css selector in your regular stylesheet.
#media print {
/* set a constant font size, width and height, hide toolbars etc */
}
Related
I am trying to design a webpage that needs to be printed/saved only at certain height and width when printing (or) saving it as pdf using "Microsoft Print to PDF".
I tried
#media print{
#page{
margin-top; 2px;
margin-botton" 2px;
size: 5in 7in;
}
and a lot of similar variations but no matter what I do the exported pdf always is in 8.5*11 size.
How do I print a webpage by setting the page size and margins to my specification. This should work in IE11
Maybe it's because you typed your message really quickly, but the code you are using is not valid css...
Regardless, this is from MDN:
You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.
This makes sense if you think about it, as you can't be sure what paper size a user will be using.
So what I'd suggest is applying the height and width to an element in your html, maybe add a black border to it that can be used to cut out your document from the resulting print out.
Browser support for page-break-inside: avoid is poor. There are lots of scenarios where it's not applied. In my case it's a nested flexbox with flex-wrap.
Is there any way to add a page break using javascript?
I can detect if the browser is in print mode with onbeforeprint event in FF, or window.watchMedia on Chrome, but what next?
I guess I need to find out what's the printed page size in pixels, so I can determine the position where to insert the page break. But window.screen.availHeight returns the same value and window.print.availHeight does not exist :(
Assuming this is possible somehow, how do I do the page break then?
You can try a calculation, A4 has a certain proportion between width and height, so simply said if your print css makes the html/body 900px width. The height for each print page can be calculated by using the A4 proportions.
So you can add a print css file that changes the layout so that the content that needs to be on the next page has a margin top.
I am using onclick="window.print()" on button print. Now the print screen overlaps the current screen. So I need to reduce the size of the print screen. I cannot use JQuery as there is no specific #id, the whole page has to be printed.
You can't crop printing area, but you can define a CSS style different for printing.
https://www.arclab.com/en/webformbuilder/how-to-print-a-specific-part-of-a-html-page-css-media-screen-print.html
I want to print the contents of a div(a table containing info) using jquery. I was wondering if it's possible to resize the table in order to use the whole A4s width.
Thanks a lot
Do you mean you want to use a bleed to print right up to the edge of the page, or to simply have your navigation and other elements disappear so the width can take up the whole printing area (but still have page margins)?
I don't believe browsers support full bleed printing.
However, if you just want to use the full area with margins, most browsers should auto-size to the largest element on the page. So, use a print stylesheet.
For testing, Firebug can conveniently show the print view in the browser, or you can simply remove the media="print"
Hide other elements and make the div take up the full width of the viewport
Make sure to use width:auto; on that for best results. Since paper and screen are very different proportions, you don't want the browser mistakenly sizing-down your text because both are defined in pixels and it thinks you want it to preserve proportions.
I have a site that is a fixed width, within the content area I am displaying a log viewer.
The log viewer is hard to read as it is confined by the fixed width of the site and the log lines are quite long.
What I want to do is above the log viewer have a button that says "Expand", when clicked the log viewer's width would grow to be just slightly less than the size of the viewport.
The rest of the site would still remaine fixed width but the log viewer would be as wide as the screen.
I've drawn an image of what I want to achieve here:
http://imgup.co.nz/3940
I have tried setting "position: absolute; left: 20px" (As well as setting the width) but this causes the footer of my site to move up to be under the log viewer (As the log viewer is no longer increasing the height of the content area).
I'm not sure what to do, it should all be css related I believe.
Any help would be much appreciated!
Try this: http://jsfiddle.net/h4C2p/
EDIT: Sorry, that won't work for different widths. Here is one that works:http://jsfiddle.net/h4C2p/1/
if you don't mind setting a height for the content area, set it for the parent of the element of wherever you show the log.
or, don't wrap everything in one tag. ie. have separate header, content, footer, that normally have the same width and are centered, but when you click expand, the content.. expands