Print a HTML page in landscape mode? [duplicate] - html

I have a HTML report, which needs to be printed landscape because of the many columns. It there a way to do this, without the user having to change the document settings?
And what are the options amongst browsers.

In your CSS you can set the #page property as shown below.
#media print{#page {size: landscape}}
The #page is part of CSS 2.1 specification however this size is not as highlighted by the answer to the question Is #Page { size:landscape} obsolete?:
CSS 2.1 no longer specifies the size attribute. The current working
draft for CSS3 Paged Media module does specify it (but this is not
standard or accepted).
As stated the size option comes from the CSS 3 Draft Specification. In theory it can be set to both a page size and orientation although in my sample the size is omitted.
The support is very mixed with a bug report begin filed in firefox, most browsers do not support it.
It may seem to work in IE7 but this is because IE7 will remember the users last selection of landscape or portrait in print preview (only the browser is re-started).
This article does have some suggested work arounds using JavaScript or ActiveX that send keys to the users browser although it they are not ideal and rely on changing the browsers security settings.
Alternately you could rotate the content rather than the page orientation. This can be done by creating a style and applying it to the body that includes these two lines but this also has draw backs creating many alignment and layout issues.
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
The final alternative I have found is to create a landscape version in a PDF. You can point to so when the user selects print it prints the PDF. However I could not get this to auto print work in IE7.
<link media="print" rel="Alternate" href="print.pdf">
In conclusion in some browsers it is relativity easy using the #page size option however in many browsers there is no sure way and it would depend on your content and environment.
This maybe why Google Documents creates a PDF when print is selected and then allows the user to open and print that.

My solution:
<style type="text/css" media="print">
#page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
With media="print" will apply only on Print.
This works in IE, Firefox and Chrome

The size property is what you're after as mentioned. To set both the the orientation and size of your page when printing, you could use the following:
/* ISO Paper Size */
#page {
size: A4 landscape;
}
/* Size in mm */
#page {
size: 100mm 200mm landscape;
}
/* Size in inches */
#page {
size: 4in 6in landscape;
}
Here's a link to the #page documentation.

It's not enough just to rotate the page content. Here is a right CSS which work in the most browsers (Chrome, Firefox, IE9+).
First set body margin to 0, because otherwise page margins will be larger than those you set in the print dialog. Also set background color to visualize pages.
body {
margin: 0;
background: #CCCCCC;
}
margin, border and background are required to visualize pages.
padding must be set to the required print margin. In the print dialog you must set the same margins (10mm in this example).
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
The size of A4 page is 210mm x 297mm. You need to subtract print margins from the size. And set the size of page's content:
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
I use 276mm instead of 277mm, because different browsers scale pages a little bit differently. So some of them will print 277mm-height content on two pages. The second page will be empty. It's more safe to use 276mm.
We don't need any margin, border, padding, background on the printed page, so remove them:
#media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}
Note that the origin of transformation is 0 0! Also the content of landscape pages must be moved 276mm down!
Also if you have a mix of portrait and lanscape pages IE will zoom out the pages. We fix it by setting -ms-zoom to 1.665. If you'll set it to 1.6666 or something like this the right border of the page content may be cropped sometimes.
If you need IE8- or other old browsers support you can use -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). But for modern enough browsers it's not required.
Here is a test page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
...Copy all styles here...
</style>
</head>
<body>
<div class="portrait">A portrait page</div>
<div class="landscape">A landscape page</div>
</body>
</html>

Try to add this your CSS:
#page {
size: landscape;
}

Quoted from CSS-Discuss Wiki
The #page rule has been cut down in
scope from CSS2 to CSS2.1. The full
CSS2 #page rule was reportedly
implemented only in Opera (and buggily
even then). My own testing shows that
IE and Firefox don't support #page at
all. According to the now-obsolescent
CSS2 spec section 13.2.2 it is
possible to override the user's
setting of orientation and (for
example) force printing in Landscape
but the relevant "size" property has
been dropped from CSS2.1, consistent
with the fact that no current browser
supports it. It has been reinstated in
the CSS3 Paged Media module but note
that this is only a Working Draft (as
at July 2009).
Conclusion: forget
about #page for the present. If you
feel your document needs to be printed
in Landscape orientation, ask yourself
if you can instead make your design
more fluid. If you really can't
(perhaps because the document contains
data tables with many columns, for
example), you will need to advise the
user to set the orientation to
Landscape and perhaps outline how to
do it in the most common browsers. Of
course, some browsers have a print
fit-to-width (shrink-to-fit) feature
(e.g. Opera, Firefox, IE7) but it's
inadvisable to rely on users having
this facility or having it switched
on.

You might be able to use the CSS 2 #page rule which allows you to set the 'size' property to landscape.

You can also use the non-standard IE-only css attribute writing-mode
div.page {
writing-mode: tb-rl;
}

I created a blank MS Document with Landscape setting and then opened it in notepad. Copied and pasted the following to my html page
<style type="text/css" media="print">
#page Section1
{size:11 8.5in;
margin:.5in 13.6pt 0in 13.6pt;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:4;}
div.Section1
{page:Section1;}
</style>
<div class="Section1"> put text / images / other stuff </div>
The print preview shows the pages in a landscape size. This seems to be working fine on IE and Chrome, not tested on FF.

I tried Denis's answer and hit some problems (portrait pages didn't print properly after going after landscape pages), so here is my solution:
body {
margin: 0;
background: #CCCCCC;
}
div.page {
margin: 10px auto;
border: solid 1px black;
display: block;
page-break-after: always;
width: 209mm;
height: 296mm;
overflow: hidden;
background: white;
}
div.landscape-parent {
width: 296mm;
height: 209mm;
}
div.landscape {
width: 296mm;
height: 209mm;
}
div.content {
padding: 10mm;
}
body,
div,
td {
font-size: 13px;
font-family: Verdana;
}
#media print {
body {
background: none;
}
div.page {
width: 209mm;
height: 296mm;
}
div.landscape {
transform: rotate(270deg) translate(-296mm, 0);
transform-origin: 0 0;
}
div.portrait,
div.landscape,
div.page {
margin: 0;
padding: 0;
border: none;
background: none;
}
}
<div class="page">
<div class="content">
First page in Portrait mode
</div>
</div>
<div class="page landscape-parent">
<div class="landscape">
<div class="content">
Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
</div>
</div>
</div>
<div class="page">
<div class="content">
Third page in Portrait mode
</div>
</div>

Here's what I came up with - add a negative rotation to the <html> element and a positive rotation of equal abs value to the <body>. That saved having to add a ton of CSS to style the body, and it worked like a charm:
html {
transform: rotate(-90deg);
}
body {
transform: rotate(90deg);
}

I tried to solve this problem once, but all my research led me towards ActiveX controls/plug-ins. There is no trick that the browsers (3 years ago anyway) permitted to change any print settings (number of copies, paper size).
I put my efforts into warning the user carefully that they needed to select "landscape" when the browsers print dialog appeared. I also created a "print preview" page, which worked much better than IE6's did! Our application had very wide tables of data in some reports, and the print preview made it clear to the users when the table would spill off the right-edge of the paper (since IE6 couldnt cope with printing on 2 sheets either).
And yes, people are still using IE6 even now.

<style type="text/css" media="print">
.landscape {
width: 100%;
height: 100%;
margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
}
</style>
If you want this style to be applied to a table then create one div tag with this style class and add the table tag within this div tag and close the div tag at the end.
This table will only print in landscape and all other pages will print in portrait mode only. But the problem is if the table size is more than the page width then we may loose some of the rows and sometimes headers also are missed. Be careful.
Have a good day.
Thank you,
Naveen Mettapally.

-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
not working in Firefox 16.0.2 but it is working in Chrome

This also worked for me:
#media print and (orientation:landscape) { … }

The problem I faced is probably the same you have. Everyone here is using CSS to provide it statically, but I had to look for a dynamic solution so that it would change based on the active element without reloading the page..
I created 2 files, portrait.css and landscape.css.
portrait.css is blank, but landscape.css has one line.
#media print{#page {size: landscape}}
in my primary file, I added this line of html to specify portrait.css as default.
<link rel="stylesheet" id="PRINTLAYOUT" href="portrait.css" type="text/css" /></link>
Now, to switch you only have to change href in the element to switch printing modes.
$("#PRINTLAYOUT").attr("href","landscape.css")
// OR
document.getElementById("PRINTLAYOUT").href = "landscape.css" // I think...
This worked great for me, and I hope it helps someone else doing things the hard way like me.. As a note, $ represents JQuery.. If you are not using this yet, I highly recommend you start now.

If you are using React and libraries like MUI, using plain CSS in your React app is not a good practice. The better approach will be to use a style component called GlobalStyles, which we can import from Material UI.
The code will look like this,
import { GlobalStyles } from '#mui/material';
const printStyle = {
['#media print']: {
['#page']: {
size: 'landscape',
margin: '2px',
},
},
};
You might not need to use #page inside the #media print because #page is only for printing. Documentation
The margin will eliminate the URLs, the browser generates while printing.
We can use the GlobalStyles in our App container. Like this
const App: React.FC = () => (
<>
<GlobalStyles styles={printStyle} />
<AppView />
</>
);
It will apply the above CSS whenever we call windows.print().
If you are using other libraries besides MUI, there should be some components or plugins that you can use to apply the CSS globally.

You can try the following:
#page {
size: auto
}

Related

HTML font size changing unpredictably in embedded browser (MFC)

I have an embedded browser control in my C++ / MFC dialog. It displays an HTML page with some transforms.
Everything renders fine, the transforms work and all that.
However!
For reasons I cant fathom, once every two weeks or so, something happens to the font side. Sometimes its too large, sometimes too small.
I go and change the CSS section of HTML to make the font size larger, it works for a couple weeks, then all of a sudden it gets too large, and I have to change the number back down again. Nothing I do to IE zoom levels, etc seems to have effect on the font size inside my MFC app.
I have a vague suspicion that it has something to do with networks connecting/disconnecting, but can not reproduce the issue.
Why would that happen, and how can I prevent that from happening?
Windows 10, IE 10.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box {
display: inline-block;
border-spacing: 0;
border-collapse: collapse;
padding: 0;
width: 0px;
height: 380px;
transform: rotate(90deg) translate(0%, 0%);
font-family: Arial;
font-size: 37px; /* <-- need to keep changing this */
}
.line1 {
color: white;
width: 1000px;
text-align: center;
transform: translate(-35%, 0);
display: inline-block;
}
</style>
</head>
<body id=CHtmlMirror bgcolor=black>
<div class="box">
<div class="line1">My Text</div>
</div>
</body>
</html>
You can try to reset css or enable compatibility mode in IE10.
OK, found a solution.
I can intercept the OnDocumentComplete method of CDhtmlDialog and ensure the zoom level is always set to some fixed value. Then tweak the CSS to look right for that zoom level, and it will not jump around again
void CMyDialog::OnDocumentComplete(LPDISPATCH pDisp, LPCTSTR szUrl)
{
CComVariant zoomLevel;
zoomLevel = 100;
m_pBrowserApp->ExecWB(OLECMDID_OPTICAL_ZOOM, OLECMDEXECOPT_DODEFAULT, &zoomLevel, NULL);
}

Printing a HTML page without page information

I am trying to print a webpage without page information.
With page information I mean: The of the page, URL of the page and the print pages and the date of the printing.
I am using the following code for it:
<style type="text/css" media="print">
#page
{
size: auto; /* auto is the initial value */
margin-bottom: 0mm; /* this affects the margin in the printer settings */
margin-top: 1mm; /* this affects the margin in the printer settings */
}
</style>
This code seems to be working on Google Chrome. But in Mozilla Firefox I still get the 'page information'.
So my question is, why is this code not working on other browsers (Mozilla Firefox) and how can I fix this so it will work on Mozilla Firefox and other browsers?
These are more browser settings than website settings. Yet you can use #page rule. Right now it will work only with Google Chrome (just like you wrote).
#media print {
#page { margin: 0; }
body { margin: 4mm; }
}
About the #page on W3.
For Mozilla Firefox you can try:
<html moznomarginboxes mozdisallowselectionprint>
See this.
Although in many cases this is determined by browser side settings, you might be able to have it behave more as you wish by using:
#media print {
#Header, #Footer { display: none !important; }
}
Source

How to print HTML in landscape?

This question has been asked, and answered, but the heavily upvoted accepted answer both:
doesn't explain how to do it
does not work
The reason, of course, is that the accepted answer1 is deprecated2. And the W3C has not come up with any standard replacement. Which leaves me with a problem, as I have actual things that need to get done.
How to tell browsers to print content in landscape?
Example that doesn't work
I threw together an example that contains every snippet of chewing gum that i could find.
<!DOCTYPE html>
<HEAD>
<STYLE type="text/css">
/* https://stackoverflow.com/a/1392794/12597 */
#page
{
size: landscape;
}
/* http://www.devx.com/tips/Tip/32962 */
#media print{
#page {
size: landscape
}
}
/* https://stackoverflow.com/a/16655216/12597 */
#media print{
.class-name{
#page{
size:landscape;
}
}
}
</STYLE>
<!--https://stackoverflow.com/a/13684191/12597 -->
<STYLE type="text/css" media="print">
#page { size: landscape; }
</STYLE>
</HEAD>
<BODY>
Hello, landscape.
</BODY>
</HTML>
Can anyone come up with something that does work?
Assume Chrome, IE11 or Edge.
Background
The reason i'm doing this, of course, is that i need to print landscape. In my particular case i will be using the rich markup and layout services available in HTML to print on an 8.5x11" piece of tri-perforated paper:
I want to go down the strips vertically, except that means having to have the text, images, and layout, be horizontal on the page:
Bonus Reading
Landscape printing from HTML
How can I define a CSS class to set the printed page in landscape mode?
Print in Landscape format
W3C CSS Print Profile
Printing an HTML Page in Landscape Mode
Is #Page { size:landscape} obsolete?
CSS Paged Media Module Level 3
Kind of hacky and I only tested on CHrome ... inspired by Different page orientation for printing HTML
As I noted in the comments above, for a one page solution this would probably work out for you. You can adjust some of the sizes and such.
<html>
<head>
<style type="text/css">
h3 {
text-align: center;
}
.receipt {
height: 8.5in;
width: 33%;
float: left;
border: 1px solid black;
}
.output {
height;
8.5in;
width: 11in;
border: 1px solid red;
position: absolute;
top: 0px;
left: 0px;
}
#media print {
.output {
-ms-transform: rotate(270deg);
/* IE 9 */
-webkit-transform: rotate(270deg);
/* Chrome, Safari, Opera */
transform: rotate(270deg);
top: 1.5in;
left: -1in;
}
}
</style>
</head>
<body>
<div class="output">
<div class="receipt">
<h3>Cashier</h3>
</div>
<div class="receipt">
<h3>Customer</h3>
</div>
<div class="receipt">
<h3>File</h3>
</div>
</div>
</body>
</html>
You're welcome to preformat output from your application optimized for landscape view printing, but you will not likely see an implementation of software that allows a markup language to control peripheral hardware in the manner you described. This is because doing so could be potentially risky, owing to the proximity of a printer "driver" to "ring-0" (the kernel, in x86 architecture).
The only safe solution (from a security standpoint) is to offer instructions to your users to print using their landscape setting in their print dialogues. Using CSS, you could create a portrait view of your output optimized as such (i.e., "hiding" columns that wouldn't fit; doing "...'s" for long data items to make them squeeze in and fit, etc.); but with a VERY noticeable "WARNING: Landscape view required, please select landscape when printing"-type message; but that's more a UI/UX concern than a technical one.

How to prevent mobile devices to scale font size

On our website we have the following phenomenon: When rendering the website on a desktop browser (Firefox, IE, Chrome), all fonts, in particular those embedded in <td> tags, are rendered in the same size.
However, when rendering the website on a mobile device, the font size of the texts within the <td> tags shrinks. See below. We tried to set
html {
-webkit-text-size-adjust: none;
}
but this only helps with the problem on the mobile safari and opera browser. Using the tips from this website, we added
#media (max-width: 960px) {
td {
font-size: 20pt;
}
}
to the css, but this now miraculously only works for one of our phones held tilted sideways, not in portrait.
How do we prevent the font-size within the table cells to be scaled down?
What Olli and JStephen said, but I also had to add text-size-adjust: none;
html,body {
text-size-adjust: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
}
You were most likely looking for this:
Include the following <meta> tag in the document's <head> section:
<meta name="viewport" content="width=device-width, initial-scale=1">
It helped me with the same problem.
Maybe if you also add body to the css like this:
html,body { -webkit-text-size-adjust:none; }
Resource: iPhone/iPod - prevent font-size-changing
I know this is an old post, but I came across it and found the answer that worked for me is just an extension to Olli's. There are more css styles you have to add to support other browsers:
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
I had originally put everything in table cells which worked on my nexus, but my samsung phone was still randomly deciding which text to scale and which to keep the set size. I set 13px to everything on the page and it was the only font size styling I did. This was the only way I was able to fix it on all the devices I have.
First of all, font-size should be set relative to a default-value that is defined by the html selector, in case of repsonsive formatting.
For example:
html {
font-size: 100%;
}
h1 {
font-size: 2em;
}
td {
font-size: 1.25em;
}
The reason for this is that different platforms use different default values for 100%. E.g. desktops use 16px but mobile browsers often use 24px.
If you define the font-size of one of your elements to an absolute value, it will not scale with the rest of the items that have been assigned no value or a relative value; thus resulting in this behaviour.
The best solution to this problem: use relative font-sizes with em, rem or even % as the unit, istead of the absolute font-sizes with pt or px as the unit.
Edit for more background on the different default font-size on different platforms:
Because each platform has its own use-case, its own average screen size, average reader-to-screen distance, average DPI-value for its screen and (most important of all) a different viewport width, font-sizes aren't equally legible on each of those platforms if set to a fixed size. That's why the browsers define the default size to something different, as to optimise the experience for the user on that specific platform.
Sure, you could ignore this and keep setting all your font-sizes to something fixed, but that's going against the flow and breaking the user experience. Instead, try to make peace with this fact and be sure that it all scales properly.
Edit2: To warn you about the usage of em vs rem: using em will inherit the parent value and multiply it by the value of the font-size you define in your current element, while using rem will always be based on the value that is set in the root element instead of the parent element. So the following code will result in the following absolute values:
HTML:
<html>
<...>
<body>
<div>
<p>..</p>
</div>
</body>
</html>
CSS:
html {
font-size: 100%; /* we agree on 16px for this example */
}
div {
font-size: 1.25em; /* add a quarter of 16, so 20px is the actual value */
}
p {
font-size: 0.8em; /* subtract a fifth of the value of the parent element: 20 * 0.8 = 16 again */
font-size: 0.8rem; /* subtract a fifth of the value of the root element: 16 * 0.8 = 13.8 (will be rounded by browser to 14) pixels */
}

Different page orientation for printing HTML

Code:
I try to make the following simple HTML page work:
<html>
<head>
<style type="text/css">
#media print
{
#page port { size: portrait; }
.portrait { page: port; }
#page land { size: landscape; }
.landscape { page: land; }
.break { page-break-before: always; }
}
</style>
</head>
<body>
<div class="landscape">
<p>This is a landscape page.</p>
</div>
<div class="portrait break">
<p>This is a portrait page.</p>
</div>
</body>
</html>
Question:
I want to print the first div's content onto the first page, with landscape orientation, and the second one with portrait mode. However, all browsers (Chrome, Opera, Safari, IE10) print two portrait pages. Did I miss something or do none of the browsers support this kind of feature yet? In the latter case is there any alternative to achieve that result?
A quick and dirty hack would be to rotate the div that is meant to be in landscape by 90 degrees using CSS3 or filters. The following would work:
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
There is currently no easy way to do this in any other way, as the size CSS directive is only implemented by one browser (Opera), but is nevertheless part of the current drafts ( Is #Page { size:landscape} obsolete? for the deprecation, http://www.w3.org/TR/css3-page/#page-size for the spec).
The next cheapest hack is what I mentioned above: lay your HTML out on a portrait...and rotate by 90 degrees using CSS3.
The size property is not used (anymore), so I wouldn't rely on that. The most pragmatic way would be to generate PDF's on the server before printing.
The rotating solution provided by Seéastien would also work, but only in browsers that support it.