On IE 8 and Firefox (3.6 and 4), if you go to Print Preview, you adjust the Print Scale by a a percentage or use Shrink to Fit. Does CSS have a property like scale:50%; or something to adjust the print scale?
There is Zoom:
http://reference.sitepoint.com/css/zoom
And moz/webkit-transform:
http://help.dottoro.com/lcebdggm.php
<style type="text/css" media="print">
body {
zoom:75%; /*or whatever percentage you need, play around with this number*/
}
</style>
Since zoom or -ms-zoom doesn't work the way I expected it to on IE8, I ended up fiddling with the font-size and tr sizes. Hopefully MS makes a zoom that works like the Print Scale/Size functionality in the Print window from the browser.
Related
There is a print setting (Scale) in Chrome that I would like to emulate.
In IE11, I have added in the css and that seems to fix it but not in Chrome.
#page {
size: A4 portrait;
margin: 1mm 1mm 0 5mm;
}
In Chrome, I have to manually change the scale to 50 to fix it. I have tried in css
zoom: 50%
transform: scale(0.5);
UPDATE
Now I know why it is working in IE11. Nothing to do with setting the A4 size.
Looks like IE has a 'Shrink to Fit' settings that's turned on by default.
I don't think there is a way to do in CSS.
Finally found the answer.
It is because of the bootstrap css.
I implemented the fix below and it seems to work for now.
https://github.com/twbs/bootstrap/issues/12078
You cannot provide zoom in #page. However you can set zoom to parent container inside #media print. You can do something like this
#media print: {
.container: {
zoom: 50%;
}
}
Here container class is applied to parent, so when you print it entire screen will be scaled to 50%.
As per documentation #page only support size, marks and bleed. More details available over here https://developer.mozilla.org/en-US/docs/Web/CSS/#page.
For more details about using print css you can read beautiful blog by Racheal Andrew. https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
You can check pen here https://codepen.io/sandipnirmal/pen/ajWWgp.
Following are screenshots:
Chrome Scaling:
Media Print with zoom: 50%
Those are User settings you are trying to manipulate and you cannot alter the Scale.
Try this out:
#media print {
body {transform: scale(.5);}
table {page-break-inside: avoid;}
}
I have the following situation, in .NET I have a master page that contains the following CSS for printing:
<style type="text/css" media="print">
div{overflow:visible !important}
</style>
This works fine in Firefox and Chrome, however, in IE the top of the page gets cut off. I spent quite a bit of time trying to adjust the page, I know I need overflow:visible !important otherwise the page looks terrible in other ways, like the scroll bar appearing. Anyone have any advice?
Printing CSS:
Make sure all print floats are: float none;
Make sure your body is overflow-y: visible;
Make sure all your contents for print have display: block;
I have this "web-site" -> http://www.krlja-ustvari.hr
It works 'perfect' in Google Chrome. By 'perfect' I mean that content is always 100% width and 100% height, overflown stuff is hidden and line breaks are made without <br /> tags. That's exactly what I need.
However, when I look at the same page in Firefox or Internet Explorer (didn't check with other browsers) I can see vertical scroll bar. That's exactly what I don't want.
My question is simple: how to make this page render in all browsers like in Google Chrome?
Thank you very much for any help!
if you do not need scrollbars in the body/document at all
<style type="text/css">
body { overflow:hidden; }
</style>
I believe that if you change the min-height:100% declaration on #content to just height:100%, you should be fine in those other browsers.
That worked when I edited your page in Firebug for FF.
I'm having an issue with IE9 showing horizontal scroll bars on a printed page even though the contents of the page fit entirely. I've tried several things to remove them in my print css. Has anyone else had this issue and found a way around it?
I faced the same issue. It is a funny fix. Define the overflow property as important. It works. LOL on IE.
overflow:hidden !important;
I have had this issue several times with IE in the past. It is usually a margin issue. Different browsers calculate margins differently. How are you positioning the elements? Do you have a fixed-width wrapper around the content or does the body expand to the browser width?
It's really difficult to pinpoint the problem without the actual css code.
I would suggest removing any negative margins you have (IE does not like these), and check to see if you have any right margins on elements that are unnecessary.
#media print{
.dont-print
{
overflow:hidden;
}
}
dont-print is just a class name which i've used before, changed that to whatever you need
Use following code on body tag in JavaScript function print:
printWin.document.write(
'<style>div {overflow: visible !important; height:auto !important;}</style>'
);
Are you sure you set the right stylesheet media type? Like:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />`
And try the following in your print.css:
html, body { overflow-x: hidden; }
Are there CSS or other reasons why Safari/iPhone would ignore some font-size settings? On my particular website Safari on the iPhone renders some font-size:13px text larger than font-size:15px text. Does it maybe not support font-size on some elements?
Joe's response has some good best practices in it, but I think the problem you're describing centers around the fact that Mobile Safari automatically scales text if it thinks the text will render too small. You can get around this with the CSS property -webkit-text-size-adjust. Here's a sample of how to apply this to your body, just for the iPhone:
#media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
Use 100% instead of None.
normalize.css includes this
Also, make sure you are setting the initial zoom setting to 1 in your viewport meta tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
Also check if you don't have a "width/height" set to the elements you're manipulating, Safari gives sizing precedence over font size in svg's, Chrome and FF don't, it seems, currently at least.
I had the same problem, turns out in the original CSS there was this line:
-webkit-text-size-adjust: 120%;
I had to change it to 100%, and everything was smooth. No need to change all px to em or %%.