I have a requirement to Print a document in A4 sheet, in such a way that first part need to be printed in first half( i.e A5 sheet measurement) and that too with 90degree rotation and second part in next A5 sheet in normal way. I could do that by randomly fine tuning the margins.( This is having problem with different devices, Android phones and tab, where something working fine , is not working in other phone) I am sure there will be a right way to do that. here is my html code.Appreciate your help on this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 210mm X 296 mm */
.A5 {
height: 148mm;
border: 2px red solid;
}
.rotate {
transform: rotate(90deg);
border: 2px magenta solid;
margin-left: 50mm;
margin-top: -75mm;
min-height: 296mm;
max-width: 148mm;
}
</style>
</head>
<div class="A5">
<div class="rotate">
***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores.
Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur
reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad
voluptates deleniti. Odio!***END**
</div>
</div>
<div class="A5">
***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt,
dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis
quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates
deleniti. Odio!***END**
</div>
</html>
This is the solution I could use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
:root {
--page-width: 210mm;
--page-height: 296mm;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.A5 {
margin: 0px;
border: 2px black solid;
/* Note: height and width interchanged because of rotation */
width: var(--page-height);
height: var(--page-width);
display: flex;
justify-content: center;
align-items: center;
}
.rotate {
transform: rotate(90deg);
height: var(--page-height);
width: var(--page-width);
border: 2px magenta solid;
}
.al {
align-items: flex-start;
}
</style>
</head>
<div class="A5">
<div class="rotate">***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates deleniti. Odio!***END**</div>
</div>
<div class="A5 al">***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates deleniti. Odio!***END**</div>
</html>