I am printing my page from IE using javascript print function. The text is way smaller than what it should be.
function BtnPrintClick() {
var printHTML = $('#divPrint').html();
window.innerHTML = "";
window.innerHTML = printHTML;
window.print();
This is my script. Why does it not pick up the font size of the web page? The font is not being resized in any #media print styling. I am using IE9.
When you print a webpage, Internet Explorer shrinks the content of the
webpage to fit the width of your paper. If the webpage is wide,
reducing the text size to fit the page can cause the text to be
unreadably small
http://windows.microsoft.com/en-us/windows7/printing-webpages-in-internet-explorer-9-frequently-asked-questions
The user solutions proposed by microsoft are:
Change print orientation to landscape.
Select portions of the webpage and print them separately. See the question "How do I print specific parts of a webpage?" later in this topic for more information.
Click the Tools button Tools button, point to Print, and then click Print preview. From the Change Print Size menu, choose Custom. Specify how large you would like the webpage to be printed by setting a percentage in the Custom Size text box. This will enlarge the printed size of the entire webpage, but it might result in some of the webpage being cut off on the printed document.
As a developper, you may look at #media to see if it overwrite the print rules of IE9.
Check the percentage size of the impression while printing ... it might be a stupid thing. But I've already faced something similar.
Related
I want to show the user how a page will look when printed, without actually asking them to click on the print button. I have the necessary media query based CSS for printing, but that will only be applied in print preview and when the page is actually printed. My requirement is to display the print formatted page in a dialog box within the app.
I have come across this same requirement for a project. AFAIK this cannot be done as the #media print rule is specific for printing to low cost devices, as per the specification.
My workaround has been to emulate a printed paper using CSS. For instance, I created a div with a grey background and then an inner div with a white background, emulating paper. I set margins according to my print margins and placed html inside this container. This approach does not guarantee by any means a replica of what to expect when printing, since elements such as wide tables and images might make the container wider than the printed page, while a print engine could apply scaling.
Compounding these issues, it is not possible to reliably predict how print engines and printer configurations might handle page breaks. You can help with suggestive css attributes in the #media print rule, like page-break-inside, page-break-before, page-break-after, widows, and orphans. In my print preview div, I simply layout a continuous html within the emulation containers and make it clear to the user this is an emulation.
I have a document in HTML format. The fonts are specified in 'pt' units (e.g 14pt).
I also have page width specification (e.g 400pt), so when the text line is longer than 400, it will wrap to the next line.
I would like the appeared font size in QTextEdit to match the window widget size. Such that if I make the window smaller, the fonts will get smaller. If i make the window bigger, the appeared fonts will get bigger. In any case, the line will break at the exact same place.
Similar to the editing experience in Pages or Word.
What is the best way to accomplish that?
I'm working on a printing template in the browser for print-to-pdf, and am using a transparent .png overlay in one section.
This happens both with transparent .png files and transparent .gif files:
Chrome, when printing (both to .pdf, and in the print preview window), seems to outline transparent images with a 1px gray line:
Exhibit A:
I've tried this in several other browsers (including Safari) and none appear to do what Chrome does. Has anyone seen this before? I need to find a way to disable it or hack it on the Chrome side so that this will work across browsers.
To see this in action, click here: http://jsfiddle.net/brandonscript/nELwd/ (just an <img /> tag) and press Cmd/Ctrl+P to bring up the print preview. You'll see this in the preview and if you print to .pdf. Make sure you have "Background colors and images" enabled, or you won't see any images.
Note: I'm not looking for workarounds after it's been printed and I'm aware that if you size the image to 100% and view the .pdf at 100% zoom you don't see the gray line. I need to programmatically (or otherwise) remove the gray line prior to printing the .pdf.
I have experimented enough and considered all the answers above while doing so.
Suspiciously, Upon saving your image and opening in gimp and some pokes into it, What I found was this.
Which makes me think that your image in truth, containing the gray border around it. My suggestion is you remove that layer and make that empty space around the actual image to transparent.
EDIT(response to #remus comment)
I do not know if my claim is correct, but I am believing that the image is not what you are expecting it to be. You need to correct that image. I have tested with another image of mine, pasted on the fiddle is not having any border around it in screen and print preview. (And the final pdf too). Sorry if this Answer is correct and hurts you.
Though I haven't come across this exact issue, I do a lot of work with css printing (for pdf and browser printing) and more often than not I have to use 2 images: 1 for screen and 1 for printing (do not use transparency for the printing one in yuour case):
<img src='http://apigee.ignite.ms/iloveapis/portal/badge/heart-overlay.gif' width='300' height='400' class="screen"/>
<img src='http://apigee.ignite.ms/iloveapis/portal/badge/heart-overlay_print.gif' width='300' height='400' class="forPrinting"/>
in your main css file:
img.forPrinting { display:none }
in your print css file which should be declared after your main css file:
img.screen {display:none }
img.forPrinting { display:block; }
Short Answer:
Change your PDF printing preset to a higher resolution.
you'll get:
The Long version:
I noticed you have re-sized the image by changing its width height properties in the HTML code.
So I made sure your image is exactly in the size you need it and it will not have this strange contour.
See Link: jsfiddle.net/cyVqw/
I have a print preview:
PDF screenshot:
To verify that in any size the PDF will keep your image transparency I checked
PDF saved in a Higher resolution preset i.e. "Print Quality". this resulted in a large file but with better zooming quality:
Here is High Resolution 33% preview:
High Resolution 200% preview
So, what you need to do is to adjust your PDF quality preset.
I have tried to search for this all over, but haven't found anything close to my question anywhere.
Does anyone know if it's possible to print out a CSS generated linear-gradient? I am mocking up a website for my boss, and it looks really nice, but when I try to make a printer-friendly page, the gradients don't display at all.
For reference, what I'm trying to print is a indicator bar that has a slider element on top of it, to indicate the result of a value within a range.
The gradients look really great on the page, but just don't show up in a print dialog.
Thanks in advance!
If i understand your problem correctly, sounds like all background images aren't printing right? That's a default behavior of IE. To print background graphics (which might include your 'gradient graphic', go to print -> page setup and click on "Print background colors and images".
Hope this helps.
Not exact here, but printing is rendered in it's own engine apart from the browsers engine.
It TYPICALLY (with the exception of say, the iPad) filters out background images and certain types of rendered material to save on ink. The only way to change this is if the user changes his or her own printing preferences.
There is no CSS or Javascript way to make this happen, unless you render the page as an image, and print the image.
I can go in to more detail if you'd like, but with the exception of the iPad, print formatting like eMail formatting is a tricky area to get in to.
What are the right sizes for a webpage to be printed on A4 size paper? What other stuff should be considered?
*inline CSS is preferred in this case
Clarification: This web-page's only propose is to be printed, since it is a receipt.
Clarification # 2: This web-page is for the internal use of the company I'm working for. They would like it to look professionally designed receipt.
Clarification # 3: This web-page must be printed on one page -of A4 size- only.
Answer
I'd recommend using two different style sheets.
For viewing in the browser you could set the table width to the width of an A4 paper: 21cm. (Minus margins 18cm.)
For printing the size of the table should be "100%", which means the printer fills the whole width of the page, using the margins given by the browser's settings. (Those page margins are what makes it impossible for you to make a printout look exactly the same.)
Possibly working
Make the table narrow enough to be safe it's in the page margins. Then center that table vertically.
Solution for perfect layout
There's no way you're going to achieve that with HTML & CSS, it's just not designed to allow exact layouts!
Create PDFs online and let the users download them. Most browsers are able to render PDFs anyway.
the best way is use from #Media command in stylesheet
for example
#media print{}
use for print layout of all control and
#media screen{}
used for screen layout of control, just think you have a
<div class="wrapper">content</div>
and then in your media you should have
#media print{ .wrapper{width: 100%;background-color:Transparent;color:Black;}}
and
#media screen{ .wrapper{width: 100%;background-color:#cdebcd;color:Red;}}
with this #media you can style your layout totaly different for print and screen. you can also use
.SomeDivOrContent{visibility:hidden;display:none;}
to hide ites in print.
let me know was it helpfull or not
Like the other guys said you need to use a print CSS, but remember one thing:
display:none; //is your friend!
You can use this to make sure elements such as your navigation etc are not printed out.
By the way A List Apart has this great article on print stylesheets, check it out.
Make your printable version as simple and free from page furniture as possible.
You should create a print-specific stylesheet that as a minimum removes any width restrictions on the page so the print page can flow the text to fit the output paper.
You should also be aware that most browser don't print CSS background images by default so don't rely on them being present on the printed page.
EDIT: In answer to your comment, I would make the receipt as simple as possible. The main issue is you don't have control over the end-user's printer so you can't know for sure exactly how wide the printable area is.
Design the page using a liquid/flowable layout and try and keep it simple. Amazon's receipt style that you get in the delivery box is probably worth using for inspiration.