|
CSS - Printing Html Page Landscape
I am trying to print an HTML page in the landscape orientation using a css print style sheet. I have added the link to the style sheet in my document
Code:
<link rel="stylesheet" href="print.css" type="text/css" media="print" /> the code in the stylesheet itself is Code: @page {size: landscape; margin: 0.25in;}
When I print the page from Internet Explorer the settings from my browser are used. What do I need to do to have the page printed in the landscaped orientation without the user configuring their browser settings? Similar TutorialsHi , I am trying to print my html page in the landscape mode.I should print this automatically in landscape mode with css orientation landscape. i am using the below code to print all tables in my html page in landscape mode @page rotated { size : landscape } table { page : rotated } Its not working . Is this write or wrong? Is there any other way to do it. Thanks, Ok, I've google a bit, and come up with http://home.tampabay.rn.com/bmerkey...scape-test.html, but it seems to fail if I try printing tables in Landscape. It's for an intranet ap, using IE6 predominantly but also needs to work in Moz. Does anyone know of a way to do this with tables? I have a form that users search for data. The query results are presented to them inside a table. Up until this point, there were only a handful of results in the DB and so printing was not a problem. However, now that the DB has grown, there's about a couple pages of data. When the user prints this table, only the first page gets printed. All subsequent pages are ignored. The markup looks something like below. I have 2 fieldsets - one for the form and the other for the results shown inside a table. Code: <fieldset>
<form name="searchForm".....>
<Insert form fields here>
</form>
</fieldset>
<fieldset>
<div id="searchResults">
<table>
<INSERT header row and data rows here>
</table>
</div>
</fieldset>
I am not sure where to even begin looking for the problem. Is it an HTML issue or a CSS issue? Thanks! Hey guys, I'm working on a website and I have been notified by the client that the page does not print correctly in IE. Prints just fine in Mozilla however. I tested this and sure enough it cuts off the rightmost 100 or so pixels. The entire page exists in a table that is centered and set to be 729 pixels wide. I tried attaching an extra stylesheet: Code: <link rel="stylesheet" type="text/css" media="print" href="dummy.css"> but that has no effect. Even when I use the other stylesheet to move the content to the top left corner of the page with no borders, it still prints the page centered and lops off the rightmost 100 or so pixels. Any ideas? (telling them to print in another browser is not an option unfortunately) Hi I need to print a webpage, but I dont want it to print the date and url and title of the page on the top and bottom of the page. And also is there a way that you can print a page with buttons, without printing the buttons? Because these are difficult issues to resolve from W3C documentation, I thought I'd post my notes on printing for HTML (which apply likewise to saving HTML as PDF, etc., or loading HTML pages into further client applications, to be saved as other formats): In printing HTML output, user agents ("browsers") will not honor usual CSS code, dedicated to screen output. Similarly, functions such as loading an HTML file into a document editor or saving an HTML page to PDF will not honor screen-dedicated CSS, either. Browsers are not equipped for instance with logic to determine whether to discard left and right margins or padding, surrounding the usual web page. Similarly, some content may be undesirable to print, as is. Images for instance may need to be scaled to a different size; font-sizes and weights may need to be adjusted, and so forth. The whole trick to accommodating the separate needs of screen and print output is to deploy separate media-specific ("screen"/"print") style sheets. When you save an HTML page as PDF, or when you load an HTML page into a document, the client application honors the CSS of the "print"-specific implementation. ------------------------------------------------- LINKING IN SEPARATE CSS FILES: For printing and file conversion functions to honor CSS, you have to link in media-specific style sheets as follows (media="screen" and media="print"): <head> <link href="css-pfmpe.css" type="text/css"rel="stylesheet" media="screen" /> <link href="css-pfmpe-print.css" type="text/css"rel="stylesheet" media="print" /> </head> ------------------------------------------------- ENCLOSURE OF MEDIA-SPECIFIC CSS CODE IN EACH FILE: All the CSS declarations of your "screen" style sheet (css-pfmpe.css) must be enclosed as follows: @media screen { /* all css code here */ } All the CSS declarations of your "print" style sheet (css-pfmpe-print.css) must be enclosed as follows: @media print { /* all css code here */ } ------------------------------------------------- GENERAL APPROACH TO MODIFYING THE PRINT-SPECIFIC CSS FILE: Assuming you have refined your screen-specific CSS to intended behavior, you would generally save a separate, further copy of your "screen" style sheet as the latter "print" implementation. You would then change the top "@media screen" expression to read instead, "@media print." The general focus of modification within the print-specific CSS file is as follows: 1. Eliminating outer, left and right margins or padding from exterior (enclosing) block constructs (within which your further block constructs are displayed). This reduces the left and right margins to default printing or file conversion values (which you may have no control over, even in the client application's preferences/settings). A screen-specific CSS implementation for instance will generally limit itself to some column width which, when/if printed, may result in huge left and right page margins. These are reduced by your modifications of the print-specific CSS, so that paper is used to best advantage. 2. Re-scaling fonts. Owing to translation differences, screen fonts are generally too large for printed media. Depending on the screen sizes you display, you may: a. determine a general scaling factor to apply to your font-size specifications; b. and manually apply that scale to converted font-size specifications. 3. Re-scaling images. You will generally want to apply a manually calculated scale to your images as well. a. This means that standard images (used in many pages for instance) may require separate image-specific styles, indicating size; and that height and width specifications must be avoided in scaled images, in your HTML markup. 4. Indicating page break preferences. Print-specific page break specifications (not needed in your screen CSS) indicate whether page breaks can be inserted before, after or within block content. 5. Indicating whether to print content. Content which you don't want/need to be printed can be marked, "display: none;". ------------------------------------------------- TYPICAL CHANGES IN EACH PRINT-SPECIFIC CSS FILE: The general manner of addressing each concern is: 1. Eliminating outer, left and right margins or padding from exterior (enclosing) block constructs (within which your further block constructs are displayed). a. Follow a pattern of engineering with an outer enclosing block, determining either margins or padding, and/or width of the outer block. b. Set the margins or padding to 0, and/or the width to 100% in the print-specific CSS. 2. Re-scaling fonts. a. Determine a general scaling factor to apply to your font-size specifications. For instance, if your screen output declares a font-size of 17px for a given style class, and experiments determine that the desirable size ratio for print output is 11px, open your calculator, enter "11," divide by "17," store the result (ratio) in memory, and multiply your further font-sizes by the ratio to get resultant sizes. You will discover a minimum size in this process. If the answer is less than the minimum, apply the minimum instead. b. Once you have calculated each scaled font-size, use global search-and-replace, starting with the smallest sizes to convert, and progressing to the larger. This will avoid double-processing errors (modifying the result of previous scaling, versus your intention to scale only unscaled declarations. 3. Re-scaling images. a. Apply image-specific styles, indicating height and width in the style declaration. Scale height, width and margins as needed for print output. 4. Indicating page break preferences. Print-specific page break specifications (not needed in your screen CSS) indicate whether page breaks can be inserted before, after or within block content. These declarations are generally made for the base style, so that properties are inherited to subclasses (where exceptions can be declared, if desirable): a. HEADINGS - TITLES, SUBTITLES Break before, but not within, nor after (next paragraph sticks to title, or title breaks off to next page with succeeding paragraph). hx.MyStyle or p.MyStyle { page-break-after: avoid; page-break-befo auto; page-break-inside: avoid; } b. IMAGE Break before or after, but never within image. img { page-break-after: auto; page-break-befo auto; page-break-inside: avoid; } c. LIST ITEM Break before, after, or within (but not in area occupied by image). li { page-break-after: auto; page-break-befo auto; page-break-inside: auto; } d. PARAGRAPH Break before, after, or within (but not in area occupied by image). p { page-break-after: auto; page-break-befo auto; page-break-inside: auto; } 5. Indicating whether to print content. a. Content which you don't want/need to be printed can be marked: BaseClass or BaseClass.Subclass { display: none; } Typical objects of this treatment for instance might be RSS subscription links. ------------------------------------------------- PRINTING BACKGROUND COLORS OR IMAGES: Note that according to W3C standards, printing of background colors or images is optional to the end user; and that by default, each are disabled in printer configuration options. It may be desirable to enable background colors or images for saving an HTML page to PDF for instance, while it may be undesirable for printed output (owing perhaps to vast consumption of ink). To enable either for a particular purpose, access your printer preferences. Hi there..I have a big problem here..I was told to put a print button in the web page and the page nust be printed out in landscape...he setting must be done in the coding not manually..and i found this coding below but not sure where to put in... PHP Code: <style type="text/css" media="print"> div.page { writing-mode: tb-rl; height: 80%; margin: 10% 0%; } </style> and i have done with the print button.. PHP Code: function printit(){ if (window.print) { window.print() ; } else { var WebBrowser = '<OBJECT ID="WebBrowser1" WIDTH=0 HEIGHT=0 CLASSID="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></OBJECT>'; document.body.insertAdjacentHTML('beforeEnd', WebBrowser); WebBrowser1.ExecWB(6, 2);//Use a 1 vs. a 2 for a prompting dialog box WebBrowser1.outerHTML = ""; } } </script> <SCRIPT Language="Javascript"> var NS = (navigator.appName == "Netscape"); var VERSION = parseInt(navigator.appVersion); if (VERSION > 3) { document.write('<form><input type=button value="Print this Page" name="Print" onClick="printit()"></form>'); } </script> now the problem is with the landscape...pLS anybody..HELP..!! Hi everyone, Having some problems with CSS printing. I am trying to get a webpage to print in B4, no print margins, no header or footer. There is supposively a way to do this in CSS with the @page properties. I've tried the examples from the w3c site but to no avail. Does anyone have any code that definitely works for internet explorer? Thanks, Dave. I am trying to update an old site with lots of pages, I am trying to create a printing stylesheet (first time as you may guess) I have managed to exclude what I do not want to print but some text is still running off the RHS of the page. I have tried playing with page widths and margins but to no effect, any suggestions? this is what I currently have: TBODY { position: static; width: 700px; margin: 0 auto; } When printing at the top there is Page 1 of 1 and at the bottom the web address comes up, is there a way to get rid of these? Regards I am using PHP to generate labels and I want to print them. I am wondering if anyone could help me learn how to set the page margins? By default it looks to be printing 30px or so margins. The label sheets I am using have margins of about 5-10px. I was thinking to set margins would be something like this: Code: <style type="text/css">
<!--
body {
margin-left: 0px; margin-right: 0px;
}
</style>
but that does not seem to work, any help out there? Thanks! Hello, I'm design the web page printing feature, i apply a print button for trigger out the window.print() javascript command and it will set the button.style.display to none after button clicked. Whereas, It is happen when user using the CRTL-P and the button will continuous remain on printing paper . I wonder any optimize way to solve this problem? Can it be solve in CSS styling? Hi, I am trying to remove the annoying url and page numbers that appear at the bottom of a page when you print a website - I want to do this using CSS so that anybody who prints my site wont get those annoying references, not change my browser. Anybody got any ideas on how to do so? Dom. I have a report that prints a list o people and a select box that will run the same list in a form format (all on one page) so that the user can print this off and get one form per page. I am using page-break after always as part of a div that contains the info to be printed (this is a loop from a db query). On my printer and a few others it works like a charm, but I have a user that gets the first page (first loop) no problem, but after that he gets parts of the pages when he prints (they display fine on the screen in the browser - IE6). Some pages come out with half the info (the bottom half is missing. Anyone ever hear of this issue? He is using WinXP IE 6 Printer is HP 855 (or something like that) Hi, I am trying to find a way to print address labels from a web page. The page will either be ASP or ASP.NET. Is it possible to get enough control over the print layout to create consistent labels? The browser will be IE6 and the printer will be printing onto standard address labels that you buy for this sort of thing. If it is possible, could someone please point me in the right direction, I am stumped. Thanks, Matt I have a simple page layout using div's and CSS, but the alignment becomes screwed up when printing the page. My CSS for the layout is: #OneColumn { width:575px; background:#fff; } #LeftColumn { float:left; width:458px; background:#fff; padding-top: 15px; } #RightColumn { float: right; width:113px; background:#fff; text-align:center; padding-top: 38px; font-family: Arial; font-size: 10px; color: #000; } My code is formatted in the same order so, on the actual page OneColumn is on top of the left and right columns. If the page is short (less than on page) it prints and looks fine in print preview. Problem 1: In IE 6 If the page is longer than one page when printed the information that is in OneColumn is on the first page of the printout and the rest of the information (from the left and right column) is on the next pages. Problem 2: In IE 6 and Mozilla Firefox 0.8 Also, the right column is used to display thumbnail-pics that correlate to the text in the left column. At times I used styles to space the pictures. Here is one of them: .spacePic { margin-top: 95px } This works fine except for when printing the images, they generally are printed lower than they apprear on the screen. Any suggestions or tips would be appreciated. Thanks for your help! Casey Hi, I've got a webpage that I need to print almost exactly as it appears on the screen. Currently I've got two style sheets linked to, one for the 'screen' and one for 'print'. I know this is working because the top line of my print CSS is: @page {size: A4 landscape;} however I can't seem to alter any of the elements on the print CSS. If I adjust the width, height, even the color it always inherits the stuff from the screen CSS and uses that, ignoring the print CSS. In fact, I can't even define a margin for my page using @page {margin...}. The two style sheets look like this: for the screen: body {..... etc etc all works fine... for the print: @page {size: A4 landscape;margin:3cm;} body {.... etc ALMOST same as above the print CSS is essentially the same as the screen one, except that I want to define different widths and heights for table elements so I can fill an A4 page with a margin. The printing process ignores the widths and heights from the print CSS, and even ignores the margin definitions. It must be reading the print CSS because it knowns to print landscape. What am I doing wrong, or am I completely misusing the @page and media commands? Thanks in advance. Andy I am trying to copy a pdf, and it is imperitive that the pages match up: page 1 on the pdf is page 1 on the html file when printed and so on. I am using font 12pt sizes. if it prints out correctly on my computer will it print out correctly on all since I am using the pt instead of something relative like <font size=3>? if this will not work for all then does anyone have any recomendations on how to do it? Hello I would like to print my html page in landscape. The page source is : ---- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" media="print" href="style/print.css" /> </head> <body> <table width="75%" border="1"> <tr> <td>one</td> <td>2</td> </tr> </table> </body> </html> ---- the style sheet is : ---- @page { size:landscape; margin:3cm; } ---- Why the page never print in landscape ??? The margin don't work too ! I have try why IE 6.0 and Netscape 7.1. Thanks for your help Anouk Im deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this? |
|||||||