Is it possible to print one part of a web page in landscape orientation and another in portrait? If so, how can this be achieved?
Here is a scenario: I am creating a web page that includes an image in one div and a table in another div. The image should be printed in landscape orientation while the table should be printed in portrait orientation. Currently, I am using the following code snippet:
<?php
if ($distanceX > $distanceY) {
?>
<div id="plancompletpaysage" class="impression-paysage">
<?php
echo '<img src="plan.php?restaurant=' . $_POST['restaurant'] . '&seance=' . $_POST['seance'] . '&date=' . $_POST['date'] . '&heure=' . $_POST['heure'] . '" usemap="places" />';
?>
</div>
<?php
}
if ($distanceX < $distanceY) {
?>
<div id="plancompletportrait" class="impression-portrait">
<?php
echo '<img src="plan.php?restaurant=' . $_POST['restaurant'] . '&seance=' . $_POST['seance'] . '&date=' . $_POST['date'] . '&heure=' . $_POST['heure'] . '" usemap="places" />';
?>
</div>
<?php
}
?>
I have also tried using CSS for print media, but it did not work as expected:
<style>
@media print {
@page paysage {
size: landscape;
}
.impression-paysage {
page: paysage;
}
}
</style>
Despite these attempts, the content still displays in portrait orientation when printed. Any guidance on this issue would be greatly appreciated.
EDIT: With the help of @Mordecai, I was able to find a solution:
.impression-paysage {
display: block;
margin-top: 120px;
margin-left: -100px;
text-align: center;
width: 140%;
height: 160%;
transform: rotate(-90deg);
zoom: 150%;
}
This solution involves resizing and rotating the div to achieve the desired landscape orientation. Thank you for your assistance.