Turning HTML elements 90 degrees for vertical printing without the need for a landscape class

My current project involves creating a template for generating PDF files with CSS. I've set up different paper sizes and orientations using @page and media queries in my CSS code. You can check out a snippet of the CSS here.

One challenge I'm facing is how to rotate the content of the PDF by 90 degrees on a vertical page layout without resorting to the landscape class. Is there a CSS-based solution that can help me achieve this rotation for PDF generation? Any advice or suggestions on this matter would be highly appreciated. Thank you!

https://i.stack.imgur.com/80659.png

htmlcsspdf

Answer №1

Give this a shot:

CSS:

.spin {
  transform: rotate(90deg);
  transform-origin: bottom left;
  width: 297mm;
  position: absolute;
  left: 210mm;
}

HTML:

  <div class="page border-10mm spin">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Entry Points for Logging In

After stumbling upon this pre-styled Material UI login page example, I decided that it was exactly what I needed. However, I ran into an issue when trying to figure out how to store the username and password values. Whenever I try to use 'State' ...

javascripthtmlreactjsauthenticationmaterial-ui

Navigating through the website has become quite challenging due to the malfunctioning navigation bar. Instead

I recently completed a website and designed an awesome navigation bar in a separate file. However, when I combined them together, the navigation bar disappeared. The background of my "list" div should be filled in and larger, but it's not working as e ...

htmlcssuinavigationbar

Switching from HTML to PHP redirection

I'm encountering an issue with my PHP and HTML setup. I want to create a link that redirects to a PHP page containing a login form. Here's the code snippet I've used: <p><a href="LoginPage.php">Login</a></p> However ...

phphtml

Expansive dropdown options in the navigation bar

Can someone help me create a menu similar to the one in this screenshot? I am looking for a solution where hovering over a cursor will open a large submenu with two sections. Any examples or suggestions would be greatly appreciated. Thank you all in advan ...

htmlcssnavbar

Uniqid in React fails to generate unique IDs

Currently working on creating my first react project and developing a todo list. I have incorporated the uniqid generator into my todo object, but it seems to be returning an empty id rather than a random one. Oddly enough, if I move the todo state outsi ...

javascripthtmlcssreactjs

Using Selenium and Python to scrape text from a continuously refreshing webpage after each scroll

Currently, I am utilizing Selenium/python to automatically scroll down a social media platform and extract posts. At the moment, I am gathering all the text in one go after scrolling a set number of times (see code below), but my objective is to only gathe ...

javascriptpythoncssseleniumselenium-webdriver

I am encountering a 404 error when attempting to make a GET request for a file located in the same directory

Here is the Javascript code that utilizes the get method. The directory contains both files - the HTML file where the JS code resides, and the text file. Below is an image of the console displaying errors. ...

pythonhtmldjangoajaxget

What is the best way to display all checked checkboxes even when the page is reloaded?

I am facing an issue with my website - it is using JavaScript to search for checked checkboxes. $(function () { var $allELements = $('.input-box'); var $selectedElementsListing = $('#selectedElements'); var $selec ...

javascriptjqueryhtmlarrayscheckbox

Maintain the default material-ui class styles while making customizations to override others

Currently, I am working on customizing the material-ui tooltip and specifically need to adjust the margin for the tooltipPlacementTop class: const useStyles = makeStyles(theme => ({ tooltipPlacementTop: { margin: '4px 0' ...

cssreactjsmaterial-uioverriding

Unable to eliminate the border gaps in the table

I'm having trouble getting the picture and grey area in the example attached to stay together and be the same height. The border-spacing seems to be causing an issue. Any suggestions on how to fix this? Apologies for the messy style sheet. Here' ...

htmlhtml-tablepaddingborder-spacing

Is it possible to personalize the Facebook like box appearance?

Is there a way to modify the number of feeds and enable auto scroll feature in a Facebook likebox? I've been experimenting with the code snippet below but have hit a roadblock. <div id="fb-root"></div><script>(function(d, s, id) {va ...

javascriptjquerycsshtmlfacebook-likebox

XSLT - Dividing table into three columns while maintaining continuity on the same page

I'm looking for a solution where I can display a long two column table in a three-column page layout. The table should seamlessly flow from one column to the next, maintaining its headers throughout. Current attempts show the entire table in just one ...

cssxsltpdf

Tips for changing the state of a toggle button with JavaScript

I need help creating a toggle button. To see the code I'm working on, click here. In my JavaScript code, I am reading the value of a 'checkbox'. If the value is true, I add another div with a close button. When the close button is clicked, ...

javascripthtmljquerycss

What advantages does em have over px in the Zurb Foundation's responsive grid system?

The Zurb Foundation Media Queries are specified in em units: $small-range: (0em, 40em); /* 0, 640px */ $medium-range: (40.063em, 64em); /* 641px, 1024px */ $large-range: (64.063em, 90em); /* 1025px, 1440px */ $xlarge-range: (90.063em, 120em); /* 1441px, 1 ...

cssmedia-querieszurb-foundationbreakpoints

Inconsistency in field generation in WordPress Contact Form 7 causing issues

After utilizing the WordPress plugin Contact Form 7 to put together a straightforward questionnaire, I discovered that two fields, Your Birthday and Your Email, were mistakenly generated on top of one another in the final output. You can take a look at th ...

htmlcsswordpressforms

Opening Tags in Selenium for HTML

Is it possible for Selenium with XPath to properly work with HTML that is not in the form of XML, and contains open tags like <col> and <input>? I'm curious if anyone can confirm this. I ask because our automation testing team has noticed ...

htmlxpathseleniumxhtml

The website functions perfectly on a local server, but once it's uploaded, the images fail

My website is functioning properly on my computer, however, after uploading it to the server, I noticed that some of the links are not appearing. Upon inspecting these links through developer tools, it shows an image size of 'Natural 1 X 1' despi ...

htmlcss

Looking for assistance with aligning UL elements in CSS using absolute positioning for a dropdown effect

I'm currently working on implementing a language switching feature on this website. The concept involves using a SPAN element that reveals a dropdown box (based on UL) containing a list of available languages when hovered over. Below is a preview of t ...

csslisthtmldrop-down-menupositioning

Scrollbar generation causing spacing issues in Internet Explorer

So I've been working on implementing a scrollable div with a specific code overflow: auto; However, for some reason, when viewed in Internet Explorer, the scroll creates an unexpected margin on the right side. It functions properly on both Chrome an ...

htmlcssinternet-explorerscrolloverflow

Dynamically showing a div using JavaScript and AJAX after changing the window location

After successfully fetching data from the server through AJAX, I am redirecting to the same screen/URL. Is it possible to show/display a div after redirecting using jQuery? $.ajax({ type: "POST", url: action, data: form_data, success: func ...

javascriptjqueryhtmlcssajax