Utilizing CSS for Page Orientation

For my current project, I was tasked with designing a print view using HTML & CSS. This view is then converted into a PDF on the server and sent to an A5 printer for physical output.

One of the specific requirements of this assignment is that the first page needs to be in Landscape orientation while all other pages should be Portrait.

I have successfully created the initial layout and set up a servlet which uses Flying Saucer to parse the HTML & CSS and generate the PDF. However, I am encountering difficulties when it comes to controlling the page orientation. In order to achieve the desired result, I have utilized the following CSS:

@page :first {size: A5 landscape}
@page{ size: A5 }

Although I have managed to get the first page displayed correctly in Landscape mode, all subsequent pages are being rendered as if they were in A3 landscape format but printed on A4 paper. Any insights on where I might be going wrong here would be greatly appreciated.

htmlcssprintingflying-saucer

Answer №1

Although the orientation was correct, the A5 size width did not account for margins, causing the text to exceed the expected page width. To resolve this issue, I created a new CSS class called "portrait" with specific dimensions:

.portrait{
    padding:5px;
    margin:15px 0px;
    width:5.5in ;
    font: 11px verdana, sans-serif;
}

For those facing similar problems, I hope this solution proves helpful. If anyone has insights on why size:A5 behaves unexpectedly, I would love to hear your analysis.

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

Error: AsyncPipe received an invalid argument of type '[object Object]'. This has caused an error due to an invalid pipe argument

I'm currently working on developing a contact management system that includes CRUD operations using Angular 8 and Spring Boot. Every feature is functioning correctly except for the search functionality. My goal is to search for data based on a specifi ...

htmljsonangularspring-bootpipe

The sticky positioning in <table> element fails to function properly in Firefox as well as Chrome version 58

Visit the website Scroll down until you see the "The First 40 Elements" table. Continue scrolling to reach the end of the page. In Chrome version 57, the table header stays sticky, but in Chrome 58 it does not. Interestingly, the table header also does n ...

htmlcssgoogle-chromefirefox

Creating a Cross Fade Animation effect with the combination of CSS and JavaScript

I've been attempting to create a similar animation using html and css. Below gif shows the desired outcome I am aiming for: https://i.sstatic.net/YsNGy.gif Although I have tried the following code, I have not been able to achieve the desired result ...

javascripthtmlcss

Issue encountered while determining the specificity of a CSS selector involving pseudo-classes

As I delved into a tutorial on MDN, an intriguing code snippet caught my attention: /* weight: 0015 */ div div li:nth-child(2) a:hover { border: 10px solid black; } An unanswered question lingers in my mind: Why does this rule's specificity displa ...

htmlcsspseudo-classcss-specificity

Include a carrot icon on a navigation element that is currently active, ensuring it does not disrupt the position of the navigation icon within the container

I am working on a react navigation bar where I want to emphasize each navigation item with a carat when the user is on a specific URL or route. I have been trying to use the :after pseudo-class in Sass to add the carat, but it's not working as expecte ...

htmlcssreactjssassnavigation

Clicking the button will remove any previously applied CSS style using jQuery

Is there a way to remove the background color that was applied to a previously clicked button when clicking on another button? The current code successfully changes the background color of the clicked button upon hover, but it doesn't reset or remove ...

javascripthtmljquerycss

Tips for identifying emails from protected platforms such as ProtonMail or Hushmail

A question for the community: So, I have a website that's totally above board and legitimate. Lately, I've noticed some shady characters trying to register from email domains like Proton and Hush - yikes! Before I dive into PhoneText validation, ...

javascripthtmlemailsecurity

Add HTML content dynamically to a layout that is connected to a controller

While I may not have the proper heading for this question, I need to add this piece of HTML dynamically to my layout and attach its click events with a controller. <div id="subscriber1" class="participant-video-list"> <div class="participant- ...

htmlangularjscontrollerbind

When resizing, the image problem does not transition to the next column

Just started learning how to code and I've been stuck on this issue for a while now. Whenever I resize the browser window, the image doesn't move down to the next line after the .text class like I want it to. Instead, it overflows off the page to ...

htmlcss

What is the process for incorporating a new task into my HTML/CSS/JavaScript to-do list application when the Enter key is pressed?

Currently, I am working on developing a to-do list application using HTML, CSS, and JavaScript. The application includes a text input field for users to enter their tasks, along with an "Add Task" button. However, I want to enhance the user experience by a ...

javascripthtmlcssdeploymenttodo

How to centrally position an image within a div using Bootstrap

I am a fan of using bootstrap and I recently encountered an issue with applying max-width to an image. It seems that when I do this, the image does not center properly despite using text-center. The solution I found was simply removing the max-width to ...

htmlcssimagetwitter-bootstrapdisplay

Vertical alignment in material-ui's Grid component is not functioning as expected

I have been working on this code snippet to center a button both vertically and horizontally. However, it seems like the button is not positioned correctly along the vertical axis. Any advice or guidance would be greatly appreciated! Could someone assist ...

javascriptcssreactjsmaterial-ui

Can someone guide me on replicating this design with Bootstrap?

How do I achieve this layout using Bootstrap? I have checked my code but can't seem to find the mistake. Can someone please help me out? <div class="row"> <div class="img-5"> <div class="col-md-4"> <di ...

htmlcsstwitter-bootstrap

What advantages does the use of $(e).attr(name,value) offer compared to using e.setAttribute(name,value)?

Scenario: The variable "e" represents an element of type "HtmlElement" and not a "css selector" I am referring to any attribute, not just the standard allowed ones like "atom-type" or "data-atom-type". Regardless of the attribute name, will it function wi ...

javascriptjqueryhtmlcss

Include a parent class within the style tags in your CSS code

Currently, I am facing an issue with a web application that I am developing. On the left side of the page, there is an editable area, and on the right side, there is a live preview. The live preview area contains an HTML file with specific fields that can ...

javascriptjqueryhtmlcssless

The dropdown menu is not appearing in the correct position when clicked

https://i.stack.imgur.com/fMyZQ.jpg Hello there, this link appears normal before clicking on it. But once clicked, it moves to the top of the page like so: https://i.stack.imgur.com/yZ0R0.jpg You can clearly see the difference. I have also provided the c ...

javascripthtmlcss

core.js:15723 ERROR TypeError: Unable to access the 'OBJECT' property because it is undefined

Whenever I attempt to run this function, I encounter an issue. My goal is to retrieve the latitude and longitude of an address from Google's API. This error message pops up: core.js:15723 ERROR TypeError: Cannot read property 'geometry' of ...

htmljsonangulartypescript

Browsing a website to gather multiple pieces of information from it

About a month ago, I posted a question seeking guidance on how to extract a single value from a webpage. The solution was successful, but then I realized there are numerous stocks out there. After some consideration, I decided to attempt creating a loop fo ...

htmlvbaexcel

Creating a Vue component that renders within an iframe, even without specifying a src attribute

<iframe id="frame" width="100%" height="100%"> </ifrme> Is there a way to render a component within this iframe by creating an HTML element or using another method? new Vue({ el:'#frame', store:store, router:router, ren ...

htmliframevue.js

Error: The function $.simpleTicker is not defined

Every time I try to call a jQuery function, an error shows up: Uncaught TypeError: $.simpleTicker is not a function I attempted changing $ to jQuery but it didn't resolve the issue. This represents my jQuery code: (function ($) { 'use ...

javascriptjqueryhtml