Orientation différente de la page pour l'impression HTML
Code:
j'ai essayer de faire la suite de la simple page HTML:
<html>
<head>
<style type="text/css">
@media print
{
@page port { size: portrait; }
.portrait { page: port; }
@page land { size: landscape; }
.landscape { page: land; }
.break { page-break-before: always; }
}
</style>
</head>
<body>
<div class="landscape">
<p>This is a landscape page.</p>
</div>
<div class="portrait break">
<p>This is a portrait page.</p>
</div>
</body>
</html>
Question:
je veux imprimer le contenu de la première div sur la première page, avec une orientation paysage, et la deuxième avec le mode portrait. Cependant, tous les navigateurs (Chrome, Opera, Safari, IE10) impriment deux pages de portrait. Est-ce que j'ai manqué quelque chose ou est-ce qu'aucun des navigateurs ne supporte ce genre de fonctionnalité? Dans ce dernier cas, Existe-t-il une autre solution pour atteindre cet objectif? résultat?
2 réponses
un hack rapide et sale serait de faire tourner la div qui est censée être dans le paysage de 90 degrés en utilisant CSS3 ou des filtres. La suivante devrait fonctionner:
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
il n'y a actuellement pas de moyen facile de faire cela d'une autre manière, comme le size CSS directive n'est mis en œuvre par un navigateur (Opera), mais est néanmoins partie des projets actuels ( Est-ce que @Page { size:landscape} est obsolète? pour l'autodérision, http://www.w3.org/TR/css3-page/#page-size pour les specs).
le prochain hack le moins cher est ce que j'ai mentionné ci-dessus: déposez votre HTML sur un portrait...et tourner de 90 degrés en utilisant CSS3.
size la propriété n'est plus utilisée (désormais), donc je ne m'en remettrai pas là. La façon la plus pragmatique serait de générer des PDF sur le serveur avant l'impression.
la solution de rotation fournie par Seéastien fonctionnerait aussi, mais seulement dans les navigateurs qui la supportent.