How to Set A5 Paper Size in Chrome's Print Settings Using CSS

I need to print two html pages in a web application. The first page should be printed in A5 size, while the second page should be printed in A4 size. I attempted to set the A5 print settings using:

@media print{
    @page {
        size: a5 landscape;
        margin: 0;
    }
}

and the A4 print settings in the other file with:

@media print {
    @page {
        size: a4;
        margin: 0;
    }
}

The A4 page prints correctly, but when I try to print the A5 page, the paper size does not change (although landscape mode is set).

htmlcssgoogle-chrome

Answer №1

If you're looking to easily define paper size for your project, consider using the paper-css library. Simply load the CSS file like so:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css">

Then, in the <head> section of your document, set the style:

<style>@page { size: A5 }</style>

Next, assign the body class to A5 as shown below:

<body class="A5">

  <section class="sheet padding-10mm">
    <article>This is an A5 document.</article>
  </section>

</body>

For more detailed instructions and information, check out the link: https://github.com/cognitom/paper-css

Answer №2

When utilizing this specific media query, the content will automatically adjust based on the size of A5.

@media print
{
    @page
    {
         size: 8.5in 11in; 
    }
}

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

A dynamic image carousel featuring multiple images can be enhanced with fluid movement upon a flick of

I am trying to enhance this image slider in HTML and CSS to achieve the following objectives: 1. Eliminate the scroll bar 2. Implement swipe functionality with mouse flick (should work on mobile devices as well) 3. Make the images clickable .slider{ ove ...

javascripthtmlcss

What is the best way to create a scrollable panel that spans the entire screen and stops just at the footer in a mobile interface using responsive design?

I am working on optimizing my result pages for mobile devices to ensure they are responsive across all screen sizes. However, I am struggling with making the scrollable panel fill the screen down to the footer consistently on all mobile devices. Setting a ...

csshtmlbootstrap-4

When I open my website in a new tab using iOS and Chrome, the appearance of the absolute element is being altered

I am experiencing an issue with a div that is positioned absolutely at the bottom left of my website. When I open the site in a new tab using <a target="_blank" href="./index.html">, the bottom value is not being applied correctly ...

javascripthtmlcss

Is it possible to alter the background color once the content of an input field has been modified?

I am working with an angular reactive form and I want to dynamically change the background color of all input fields when their value is changed. Some of these input fields are pre-populated and not required. I came across a potential solution on Stack Ove ...

javascripthtmlcsstypescript

Switching between filters using AngularJS toggle buttons

Currently, we are in the process of converting a jQuery application into an Angular application using JavaScript. The existing jQuery app functions, but we aim to transform it into a full-fledged app utilizing the Angular framework. The main concept behin ...

javascriptjqueryhtmlangularjs

Attempting to implement bootstrap pagination using PHP mysqli

Hi there, I'm currently working on implementing a pagination feature using Bootstrap. My goal is to display all results from mySQL data while limiting the data to 10 entries per page. I would appreciate any assistance with this. Here's the code I ...

phphtmlmysqlitwitter-bootstrap-3

Table design variation for desktop and mobile display

I'm new to this location and could really use some assistance. I'm trying to create a page that can be viewed on both desktop and mobile devices, featuring a table. On desktop, the table displays as follows: th1 th2 th3 td1-1 ...

htmlcssmobiletablelayout

When the redirect page includes a parameter, it has the ability to conceal the functionality of the subsequent page

I'm looking to redirect my page to another page while also triggering a hidden function on the next page. When I click on the redirect link, I want the page to redirect and for the function on the next page to be called as well. <script type="text ...

phpjqueryhtmlajax

Searching for "available accommodations" requires guidance on logic

Imagine you have a website where users can search for "hotel rooms to rent". I am not familiar with how the current systems operate, so I am reaching out for guidance. Currently, the form on my website has two fields: Date available from: //for example ...

javaphpmysqlhtmldatabase

modify the css styling of a polymer component

I have implemented the paper-input element with a pattern and an error message. <paper-input label="Horas" name="hours" auto-validate required pattern="([0]:[0-5][0-9])|([1-9]|[1][0-9]|2[0-3])(:[0-5][0-9])?" error-message="Invalid hour format">< ...

csspolymer

Merging ng-if conditions

I would like to find a way for my two ng-if conditions to work together instead of separately. I want to display only the last one if both are true. Currently, this is how my code looks: <div> <img ng-src="{{img(myColor)}}" ng-if="myColor" ...

htmlangularjsuser-interfaceng-showangular-ng-if

Creating personalized widths for bootstrap classes with SASS

I am interested in enhancing the bootstrap source code by creating additional w-XX classes. Specifically, I aim to include both w-40 and w-60. According to the documentation, modifying the $sizes variable is necessary for this customization. In my custom. ...

csssassbootstrap-4

Generating HTML content using JavaScript

Having trouble displaying an iframe on my page using javascript and html. I've made a mistake in the javascript and need assistance with getting the html to show up on the page. The iframe is not appearing and I suspect my function call is incorrect. ...

javascripthtml

What might be causing the jQuery UI Spinner arrow buttons to not appear?

Once I implemented a very basic version of the jQuery UI Spinner Widget, I encountered an issue where the up and down arrow buttons were not displaying. Clicking on the area where the buttons should be triggered the Spinner events and the number incremente ...

htmljquerycssjquery-uibootstrap-4

Learn how to collapse a collapsible section in Jquery Mobile by clicking on a link. Check out the example on JSFiddle

Is there a way to make the data-role collapsible collapse when clicking a tab link? I've tried using an on-click function without success. Any ideas or alternative solutions? Thanks. Check out my JSFiddle, where you can see that the tabs change but t ...

javascriptjqueryhtmljquery-mobile

Weird Chrome behaviors with CSS3 animations

I have been working on a CSS3 animation that involves rotating a div with an image in the background. My goal is to have the same animation play at a different speed when the user hovers over the element. Here is the code snippet I have been using: .roc ...

htmlcsscss-animations

The accuracy of real-time visitor numbers in Google Analytics is often unreliable

My website uses Google Analytics to track the page chat.php. The code snippet is correctly placed on the page according to the documentation. Within this page, there is a Flash object that connects users to an IRC chat room. Currently, there are 50 unique ...

javascriptphphtmlgoogle-analytics

The utilization of media within the meta in Next.js is not allowed

Recently, I came across an interesting article about PWAs on web.dev. The article discusses color schemes and at one point, they talk about it in detail, I'm currently working with Next.js and decided to try implementing the following code snippet: & ...

htmlnext.jsmeta-tags

Switching the background color in a diagonal transition when hovering from the bottom left to the top right

I found a helpful answer on this question regarding a certain technique. However, I am curious if it is feasible to implement a diagonal left-to-right background color transition - specifically from bottom-left to top-right? Here is the CSS and HTML code ...

htmlcssanimationtransitionlinear-gradients

The child block element in Internet Explorer 7 expands independently of the parent's padding, ignoring

I'm having trouble understanding this situation. There seems to be an issue with a block element inside another block element. The child element is expanding its height to 100% and overlapping the bottom padding of the parent, ignoring it completely. ...

htmlcss