Currently, I am using the latest version of FireFox and IE8.
In order to change the printing orientation, I utilized the following code in my CSS file:
@page { size: portrait; } You can find more information about the @page property here.
Although it is said that the @page property is supported in both browsers, my testing shows that it only works in Chrome. Can anyone advise on how to print a page in different orientations in FireFox or IE8?
Currently, it is not advisable for any application to rely on this feature for cross-browser compatibility as the CSS3 standard for page orientation in printing is still being implemented in most browsers.
Interestingly, Google Chrome seems to have no issues with this feature:
Ultimately, the decision to change the orientation during printing lies with the user (even if it technically works). You can inform users to print the page in landscape or portrait, but in general, there may never be a way to prevent users from changing the orientation when printing from desktop browsers.
A recent bug report for Firefox can be found here: https://bugzilla.mozilla.org/show_bug.cgi?id=851441
If you need more information, you can refer to the accepted answer on this question: Landscape printing from HTML
According to the MDN reference:
You are restricted to changing only the margins, orphans, widows, and page breaks of the document. Any attempts to modify other CSS properties will not take effect.
I am unable to provide you with specific markup that achieves your desired outcome here on SO. Moreover, it would be a challenging task given that you are looking to make an older version of IE perform as well as a modern Firefox browser.
If you want to switch the page printing layout from portrait to landscape and see the difference, follow these steps:
To enable this feature, use the following CSS code which is supported since version 19.0. This should help resolve your issue: For IE8, you will need to include the HTML5 directive in your HTML.
<!doctype html>
Css code :
@media print{@page {size: landscape}}
For more information on browser support, check out these links: Firefox: https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart IE: http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx
Isn't it strange that this
{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
isn't working for you in the newest version of Firefox? I tested it myself and it worked just fine.
If you're having trouble, check out this link. It may not be exactly what you need for portrait mode (printing), but it could give you some inspiration.
As a last resort, if you're really stuck and need to figure this out, you could take a screenshot of the webpage using something like html2canvas, rotate the image, and then print the image instead of the page itself... Not the most ideal solution, but it does bypass the browser.
When I encountered this issue some time back while creating a basic form, it posed quite a challenge for me.
It appears that Chrome is considered the top browser when it comes to restricting user control over the printing process. Nonetheless, its capabilities are still limited, and other browsers like Firefox do not support @page.
To address this, I decided to incorporate a @media print into the style sheet to prompt the user to print the page in portrait mode. I used display: none; on the header, nav, and footer elements to eliminate any unwanted browser additions (this method works on Chrome and Firefox, but IE may require manual adjustments). Additionally, I set border: 0; on input fields since they were part of a form... Lastly, I specified a width and height for the container div to align with an 8.5 x 11 paper size for optimal fitting.
@media print{
@page {size: auto; margin: auto;}
header nav, footer {display: none;}
input {border: 0px;}
#container {width:9.1in; height:10in;}
}
In the end, webpage printing remains heavily influenced by the user's browser choice, making it a rather complex issue to tackle. Utilizing @media print certainly helps, but generating a PDF version of the page for users to export may be the most reliable way to ensure accurate printing results.
To adjust the page layout, simply navigate to the file menu and select page setup to modify the orientation setting. I have successfully used this method before.
I've been facing issues with sending HTML in my emails. To troubleshoot and prevent errors, I've opted to utilize Mailgun's email templates. Although I can successfully send out the emails, the problem arises when I receive them - the HTML ...
I have created a single side panel that allows me to toggle between opening and closing the sidebar by hovering on it. I can also pin and unpin the sidebar by clicking on the pin image. Now, I want to open the sidebar onClick instead of onHover and remove ...
Recently, I encountered an issue while working on a website that involved using JavaScript code to format currency values. Here is the snippet of code that was causing the problem: UsdAmount.toLocaleString(siteCulture, {style: 'currency', ...
I am facing an issue with my code where changes in the parent component trigger a re-render of the child element. The Menu component is supposed to appear on right-click on top of the placeholder tag, but when it does, the entire parent component flicker ...
I've set an onClick event for a textbox. Is there a way to have the click event of a different div also execute when clicking on the textbox, even though they are not nested and in separate parts of the document? Any help with this in Javascript would ...
What is the purpose of including jquery.mn.js file in the SCRIPT tag for form validation and other jquery and ajax applications? Is there a specific location to download this file, and where should it be saved on a personal computer? ...
My Node Js API utilizes a find function to retrieve data from the database, which works flawlessly and returns the results. However, when I pass this data into setState using React and Axios, it ends up returning null. Below is my API's find() functi ...
Below is the code that can be run to showcase my issue. Design: <div id="app"> <v-app id="inspire"> <v-data-table :headers="headers" :items="desserts" hide-default-header ...
Hey there, I'm currently working on a function in AngularJS and I'm not sure what the best practice is for defining methods. Any suggestions would be greatly appreciated. Option 1: var getBranchKey = function(currentBranchName) { }; Option 2: ...
While plotting a route, I noticed that the segments on highways are quite far apart. Is there a way to get a more detailed routing with finer points along the journey? $.ajax({ url: 'https://route.cit.api.here.com/routing/7.2/calculateroute ...
I've encountered an issue with asynchronous calls in JavaScript where the function is receiving unexpected values. Take a look at the following pseudo code: i=0; while(i<10){ var obj= {something, i}; getcontent(obj); / ...
I'm currently facing an issue with uploading and parsing a file in Rails, as well as displaying the file content in a sortable table. I followed a tutorial on to get started. This is what my index.html.erb View file looks like: <%= form_tag impo ...
Newbie alert! I am currently working on an app that utilizes Here's Geocoding REST API through node.js with express. (I made sure to keep my api key hidden on the server side to prevent exposure to clients.) However, I have come to realize that in or ...
When I execute the following code snippet: var obj = $.parseJSON(json.responseText); $.each(obj.collection.response, function (i) { $.each(this.PRESENT_STUDENT, function (i, j) { $.each(j , function (i, j){ $( ...
I noticed that in this example the hyperlink is aligned at the bottom compared to the text. Can anyone help me identify the issue and provide a solution? Thank you! ...
We are utilizing Markdown (Kramdown) for generating a static website. When incorporating infoboxes, we can enhance paragraphs and achieve the following outcomes: {:.note .icon-check title="This is a title"} Lorem, ipsum dolor sit amet consectetur adipisici ...
This code snippet is from my app.js file import React, { useState, useEffect } from "react"; import { v4 as uuid } from "uuid"; import "./App.css"; import Header from "./Header"; import AddContact from "./AddCo ...
While working on test automation for a section of Outlook Web App, I focused on checking a designated test mailbox that receives emails from our company. I needed to verify specific texts within an email using Assert, but encountered difficulty in identify ...
Is it possible to run frontend and backend on the same port in Rest APIs if using vanilla JS for the frontend and Node.js for the backend? I've come across information on how to do this with React, but nothing specific to vanilla JS. Any insights on t ...
Is there a recommended method for "encoding" complex identifiers such as {Source:"ARCH.1", Code: "456-789.456 A+", SubNumber:##2} to be used in HTML elements' id, class, and name attributes? I could come up with something myself, but perhaps there is ...