I've been creating a website and a portion of the site is designed to be printed on tabloid paper in portrait mode. The problem I'm having is when the print dialog comes up in Chrome it's missing the "Layout" options.
In this screen shot, the left side shows how my dialog box looks vs. how it looks when I print other websites. The ironic thing is even other sites I've created have the option as shown on the right, which is the desired behavior.
My question is, what controls this behavior? How do I correct it? In searching the web the only mention I've see of this is when Chrome is displaying PDF files, but I'm displaying a web page.
Any insight you can give would be greatly appreciated.
Thanks in advance
If you have an #page size declaration in the print CSS, this will override (and hide) the orientation on the print dialog. To override a declaration that is set elsewhere (e.g. Bootstrap 4 does this) you can add:
#page {
size: auto;
}
Just a quick addition to the accepted answer..
For those who are unable to edit the css of the page you're trying to print, you can install the Chrome extension called 'Stylus' (link here), and create a new style with just the above suggestion:
#page {
size: auto;
}
This will enable the missing options from the print dialog on any/every web page..
Related
When am printing a page from internet explorer v11, the printed document contains the URL of the webpage which the client doesnt want to appear. I have searched various forms and articles for the solution but the effort gone in vain.
Is there a working solution to hide the url in IE 11?
Try it by css:
#print {
#page :footer {
display: none
}
#page :header {
display: none
}
}
This is often a browser-specific print setting.
See Firefox and Internet Explorer examples. The client will have to adjust their print settings in IE11 before printing the page.
sorry, we cant control the print job header and footer with css nor with Javascript, its browser and printer setting,
http://www.mintprintables.com/print-tips/header-footer-windows/
If the header and footer is a part of your web page than you can try to control it using CSS code.
Here, you want to access and change the IE browser page settings for print using code which is not possible.
User have to change their browser page settings for print and need to remove URL manually is only the way.
I am building a simple website and for some reason "zoom : 1" is added to the body, like this:
"style = 'zoom:1;'"
Needles to say I did not added this nor does this ever appears in the php file or the css file.
Spooky.
Thanks in advance!
sometimes browser add zoom:1 automatically, it doesn't do any thing.zoom:1 is a normal zoom and does not magnify anything in your website.
I've been editing CSS using Firebug in Firefox, but recently noticed that Chrome is rendering my pages much quicker (with scrolling, interactive elements etc) and wanted to switch to it.
I found Chrome shows the computed CSS and what attributes are overruled in the stack and I can alter them one-by-one but what I liked about Firebug was that I could just edit the entire stylesheet in a real-time text editor. Is this same feature somewhere in the Chrome developer panel, or is there a Chrome extension that lets me alter the stylesheets this way?
In current versions of Chrome (I'm running 16) you don't need any external add-ons.
Right click anywhere in your page, choose inspect element, then in the window that shows up click the Resources tab, then in the left panel select the stylesheet you want to edit. To begin editing you need to first double click, over the css text.
Try StyleBot. It can also save edited CSS.
You can edit any property or create a new property by double click on an entry or empty space in Elements panel's styles pane. There is no way to edit entire css file just as text at the moment.
I use live.js! As you edit your css file it shows you the results realtime in your browser without having to refresh. http://livejs.com/
I've spend countless hours testing almost every Chome extension i could find (including stylebot) to mimic the live CSS editing of Firebug in Firefox. None to date have that same workflow. Live.js is the closest.
Have you tried the Web Developer Toolbar extension's CSS->Edit CSS tool?
https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm
Web Developer Toolbar for Chrome > CSS > Edit CSS
there's a semi-working firebug extension but it's not exactly perfect yet.
User Firebug Lite. It's also available as an extension to Chrome.
You are looking for this - Live Stylesheets
I wrote the LiveCSSEditor 4 years ago for exactly this reason. FireBug in Firefox would let me free-hand write CSS into the page, but nothing else in Chrome would.
I still use it today and have yet to find a better solution. It may work for you as well. :)
I have HTML page of few tables created by ASP.NET and when I do the "Page Setup" option before printing the paper size is already selected as "Letter" and I want that option to be in "A4". I changed the size of the table but its not working.
Is there any page setup information I can put in HTML so that "Page Setup" option can take it from there.
Please help.
Thanks
Anto
You have to use media type in CSS. This way you can specify a different set of styles for print and screen medias.
Here is an article about printer friendly pages. You can also read about media types in the W3C learning section.
You cannot change anything in the Print window from the HTML. You can just specify another CSS file for print media to make your page look better when you print it (like remove buttons, remove any content which is useless on a sheet of paper, change sizes, change fonts, etc.)
Hope this helps.
You could give it a try with CSS, using the #page rule. Mind that this is valid for CSS 2.0 and CSS 3.0 but not for CSS 2.1:
#page { size: A4 };
I'm not sure if this will change your default selected paper size though.
I've recently been working on a print stylesheet for a website, and I realized that I was at a loss for effective ways to tweak it. It's one thing to have a reload cycle for working on the on-screen layout:
change code
command-tab
reload
but that whole process gets much more arduous when you're trying to print:
change code
command-tab
reload
print
squint at print-preview image
open PDF in Preview for further inspection
Are there tools I'm missing out on here? Does WebKit's inspector have a "pretend this is paged media" checkbox? Is there some magic that Firebug (shudder) can do?
There is an option for that in Chrome's inspector.
Open the DevTools inspector (mac: Cmd + Shift + C , windows: Ctrl + Shift + C)
Click on the Toggle device mode icon , located on the upper left corner of the DevTools panel. (windows: Ctrl+Shift+M, mac: Cmd+Shift+M).
Click on the More overrides icon in the top right corner of the browser viewport to open the devtools drawer.
Then, select Media in the emulation drawer, and check the CSS media checkbox.
This should do the trick.
Update: The menus have changed in DevTools.
It can now be found by clicking on the "three-dots" menu in the top right corner > More Tools > Rendering Settings > Emulate media > print.
Source: Google DevTools page*
I'm assuming you want as much control of the printed window as possible without using a HTML to PDF approach... Use #media screen to debug - #media print for final css
Modern browsers can give you a quick visual for what's going to happen at print time using inches and pts in a #media query.
#media screen and (max-width:8.5in) { /* resize your window until the event is triggered */
html { width:8.5in; }
body { font: 9pt/1.5 Arial, sans-serif; } /* Roughly 12px font */
...
}
Once your browser is displaying "inches" you'll have a better idea of what to expect. This approach should all but end the print preview method. All printers will work with pt and in units, and using the #media technique will allow you to quickly see what's going to happen and adjust accordingly. Firebug (or equivalent) will absolutely expedite that process. When you've added your changes to #media, you've got all the code you need for a linked CSS file using media = "print" attribute - just copy/paste the #media screen rules to the referenced file.
Good luck. The web wasn't built for print. Creating a solution that delivers all of your content, styles equal to what's seen in the browser can be impossible at times. For instance, a fluid layout for a predominantly 1280 x 1024 audience doesn't always translate easily to a nice and neat 8.5 x 11 laser print.
W3C reference for purusal: http://www.w3.org/TR/css3-mediaqueries/
Chrome 48 you can debug print styles within the Rendering tab.
Click the menu icon top right of inspector and Rendering Settings.
Edit
For Chrome 58 the location has changed to Web Inspector > Menu > More Tools > Rendering
In Chrome v41, it's there, but in a slightly different spot.
There's an easy way to debug your print stylesheet without switching any media attribute in your HTML code (of course, as pointed out, it doesn't solve the width / pages issue):
Use Firefox + Web Developer extension.
In the Web Developer menu, choose CSS / Display CSS by Media Type / Print
Go back to Web Developer menu, choose Options / Persist Features
Now you are viewing the print CSS and you can reload your page indefinitely.
Once you're done, uncheck "Persist Features" and reload, you'll get the screen CSS again.
HTH.
Chrome's UI is different again as of v53.
I don't need to use this feature often, but whenever I do, it takes me forever to figure out where the Chrome team has moved it since the last time I burned cycles trying to track it down.
Notice it's the ... menu in Dev Tools pane not the ... menu in Chrome Browser pane.
Now scroll down in the Rendering section. It's often below the fold.
Following up to the answer by rflnogueira, the current Chrome settings (40.0.*) will look like below:
Just show the print stylesheet in your browser using media="screen" while debugging. The print preview view uses the same rendering engine as normal browsing mode so you can get accurate results using that.
2019 - Updated instructions
Open Chrome inspector
From Mac => option + command + i
From Windows => F12
Click on the little 3 dots, customize and control devTools
Select More Tools
Select Rendering
Scroll to the bottom to Emulate CSS Media
Select print from the down arrow
If you have a print function that rewrites the content of the page to a new window with your print style sheet referenced you'll get a much better idea of what its going to look like on paper , and you'll be able to debug it with the likes of firebug too.
Heres an example of how this can be done with JavaScript / jquery
$("#Print").click(function () {
var a = window.open('', '', 'scrollbars=yes,width=1024,height=768');
a.document.open("text/html");
a.document.write("<html><head>");
a.document.write('<link rel="stylesheet" href="css/style.css" />');
a.document.write('<link rel="stylesheet" href="css/print.css" />');
a.document.write("</head><body>");
a.document.write($('#Content').html());
a.document.write('</body></html>');
a.document.close();
a.print();
});
In Firefox (87.0), the "DOM and Style Inspector" has a toggle button for print media simulation.
One drawback is that it does not clearly delineate the page boundaries.
In DreamWeaver there is a toolbar that shows virtually any rendering option you want:
screen, print, handheld media, projection screen, tv media, desitn time style sheets, etc.
This is what I use especially because it: instantly shows a preview with 1 single press of a button.
I use macros to send keypress and mouse clicks repeatedly.
Under Windows, AutoHotKey is a great software and under OS X you can read about Automator sort of an alternative AHK for OsX.
Under Windows (replace Ctrl by Cmd under OS X) "Ctrl-s / switch to Fx window wherever it is in the list of windows opened / Ctrl-r" bound to 1 unused key avoids frustration from uninteresting tasks and will ultimately save my arms from RSI :)