Morning from foggy but warm York UK 
Client asked me to print off their home page, damn i couldn’t do it. Every attempt stripped out the css, i tried also screen gran but resolution was degraded. So my question is please how do you print off a web page that is sharp and the layout is not disrupted?
Thanks in advance,
David
If what they want is a print out of exactly what it looks like on screen, Print Screen should be the answer. The resolution is not degraded, it is exactly the same, it’s just that what is considered acceptable resolution on-screen and in print are not the same.
One thing to try (I’ve never done this so can’t be sure if it works) use a media query @media print {} to fix the css for printing.
You can’t unless you create a pdf of the page and print that.
Web pages aren’t made for printing and most browsers automatically block images and background colours to avoid wasting ink so a user would have to set the correct options in their own browser in order for the printing to work and most users won’t know how to do that anyway,
What most people do who want their content printed is to create a print style sheet so that when print is selected the print style sheet comes into affect and removes background colours , images, navigation, adverts, and other presentational stuff from the page and then reformat the page for text in the best way possible (not everything is possible though).
See here for more information on creating a print stylesheet.
So would my idea of wrapping the normal on-sreen css in the print media query @media print {} override this behaviour?
What would be the way to combine both the on-screen and print to the same css rules, is this it?
@media screen, @media screen {}
In short, no.
I usually set media=all on the link element and then at the end of the stylesheet you can over-ride with @media print{}.
Or have an extra link element just for print.
It is usually easier to have the screen styles go to print also and then just over-ride what you don’t want to show. An easy way to do this without having to print preview every time is to change the print media query to screen while developing it so you can see on the screen what the print will roughly look like and then when completed change it back to print.
Creating print stylesheets can be very frustrating because it has poor support for things like page-breaks etc, so you have to take the simplest options and not try anything too clever. Remember that all printers are different also and users may have set different printer settings than you expect so there are no guarantees.
You can never over-ride browser options. That is completely up to the user and the browser defaults.
So it’s looking like a screen grab to get a print-out of how the screen looks.
Browsers have defaults for how they display html without css, Time New Roman etc… Then you add css and override that.
I thought maybe that by adding an @media print {} query, you are explicitly saying how you want something to print and the browser would respect that and override the print defaults. But that’s not how it works.
I suppose you could get into a whole other responsive design thing, to cater for different page sizes and orientations, since media queries for RWD usually target screen not print.
Yes some things you have control of but we are talking about ‘settings/options’ in the browser and not the default stylesheet e.g. when someone clicks a check box in the settings and says ‘Allow pages to choose their own fonts, instead of my selections above’ or ''Print Background Colours & images" then you have no control over that and cannot over-ride it.
That would be good but you have no real access to what the users print settings are so the best approach is just to create fluid text that adapts to any size of paper.
There are some useful tips here also and the article also suggests that you can force the printing of background colours and images in webkit but I think a user would be annoyed if their settings had been over-ridden like that so I can’t believe it will work (although I have not checked it out yet).
The browser owner can also set their own CSS to override whatever is in the page - for example if they wanted all web pages to use Comic Sans font instead of whatever the page owner specified.
The only thing the page owner really has control of is the content.
Yes, I understand that web users and their browsers are able to override css and it’s a good thing for accessibility or just to guard against garish designs. But should not the default behaviour be to obay what the css says, if there is a @media print query?
How would propose the CSS handle the many possible paper sizes?
RWD like with different screen sizes?
You could even add queries if needed.
@media print and (max-width: 150mm) {}
Would that work?
AFAIK browsers do not send information about printer configuration like they do for viewport dimension.
I’m thinking the best you might be able to do is use “max-width” eg.
@media print {
.element {
max-width: 100%;
}
.another_element {
max-width: 100%;
}
That might not preserve the design, but it should ensure that nothing gets cropped on narrower paper sizes
Wow this has created a reaction, looking forward to seeing if I can just print a web page and preserve layout, tried print screen on my mac any everything gets snapped up if that makes sense.
I just did some testing in Fiirefox and it just might work after all.
If I have my printer set up for portrait I see “8 to 9” if I change to landscape I see “9 to 12”
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>paper size test</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style type="text/css">
@media print {
.info::after {
content: "No Match";
}
}
@media print and (min-width: 1.0in) and (max-width: 3.0in) {
.info::after {
content: "Matched 1 to 3";
}
}
@media print and (min-width: 3.0in) and (max-width: 6.0in) {
.info::after {
content: "Matched 3 to 6";
}
}
@media print and (min-width: 6.0in) and (max-width: 9.0in) {
.info::after {
content: "Matched 6 to 9";
}
}
@media print and (min-width: 9.0in) and (max-width: 12.0in) {
.info::after {
content: "Matched 9 to 12";
}
}
@media print and (min-width: 6.0in) and (max-width: 7.0in) {
.info::after {
content: "Matched 6 to 7";
}
}
@media print and (min-width: 7.0in) and (max-width: 8.0in) {
.info::after {
content: "Matched 7 to 8";
}
}
@media print and (min-width: 8.0in) and (max-width: 9.0in) {
.info::after {
content: "Matched 8 to 9";
}
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h1>Paper Size Test</h1>
<div class="info">CSS: </div>
</body>
</html>
Interesting. I honestly haven’t put much thought into how a site prints before, but it’s not uncommon for printers to make a mess of a site.
Hmm, I just tested in a few other browsers. Chrome and Vivaldi both are
Portrait - : Matched 3 to 6
Landscape - Matched 7 to 8
Maybe not so reliable, though both are “PDF Complete” (likely because I don’t have a printer connected) and that is hindering my ability to test
IE is
Portrait - : Matched 7 to 8
Landscape - Matched 9 to 12
I have just been trying your code, using print preview. It seems Firefox and Chrome have options to print the background and images, which may be a step closer to what the OP wants.
Strange how different browsers return different results.
I have the same problem, no printer attached, so can’t change paper size.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.