L'orientation de page pour l'impression HTML

Code:

J'essaie de faire les suivantes simple page HTML de travail:

<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 premier div du contenu sur la première page, avec une orientation paysage, et la seconde avec le mode portrait. Cependant, tous les navigateurs (Chrome, Opera, Safari, IE10) imprimer le portrait de deux pages. Ai-je raté quelque chose ou de faire aucun des navigateurs prennent en charge ce type de fonctionnalité encore? Dans ce dernier cas, est-il une alternative pour atteindre le résultat?

InformationsquelleAutor tungi52 | 2013-02-15
  1. 7

    Un rapide et sale hack serait pour faire pivoter l'élément div qui est censé être dans le paysage de 90 degrés à l'aide de 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'existe actuellement aucun moyen facile de faire cela de toute autre manière, comme le size directive CSS n'est mise en œuvre par un navigateur (Opera), mais est néanmoins partie des projets actuels ( Est - @Page { size:landscape} obsolète? pour l'autodérision, http://www.w3.org/TR/css3-page/#page-size pour la spec).

    La prochaine moins cher hack est ce que j'ai mentionné ci-dessus: posez votre HTML sur un portrait...et tourner de 90 degrés à l'aide de CSS3.

    • Cela peut être raisonnable, mais si vous avez plus d'une des pages de votre rapport, vous devez ajouter de la marge supérieure en raison de la rotation avec la transformation va être à partir du centre de l'élément, et non pas à partir du coin en haut à droite, ce qui serait sympa 🙂
    • rien ne vous empêche d'utiliser position:absolute de décalage de 40% en plus pour un rot.
    • Viens de vérifier et mettre à jour ma réponse peu de temps avec un violon qui peut le rendre plus facile. Veuillez noter qu'elle a sévère des hypothèses construit en elle, mais... Encore plus facile que la génération de PDF.
    • En fait. Viens de penser à une façon de le faire - raw.github.com/niklasvh/feedback.js/master/feedback.js combiné avec de la Toile combinée avec la Rotation de la hack.
    • OK, votre réponse confirme ce que je pensais. Votre hack est assez intéressant et il fonctionne vraiment, cependant, il sera un portrait de la page lors de l'impression. Je veux dire, l'en-tête et pieds de page placée sur le haut et le bas (ou sur la gauche et sur la droite si voir comme un paysage de document de la page par le navigateur .
    • en effet. Il sera, toutefois, de l'imprimer comme un paysage, - l'orientation de la page lors de l'utilisation de l'aperçu avant impression seront portrait, qui, malheureusement, il n'existe actuellement pas de client-côté de remplacement 🙁

    InformationsquelleAutor Sébastien Renauld
  2. 1

    La size propriété n'est pas utilisée (plus), je ne voudrais pas compter sur cela. La manière la plus pragmatique serait de générer des PDF sur le serveur avant l'impression.

    La rotation de la solution fournie par Seéastien également de travailler, mais uniquement dans les navigateurs qui le supportent.

    • Il n'est jamais sage de s'appuyer sur un plug-in lorsque vous pouvez compter sur un navigateur fonctionnalité. Les Rotations sont pris en charge en mode natif en utilisant le code que j'ai fourni par IE6 à partir de (Grâce à l'utilisation de filter). De Plus, si il est d'utiliser les requêtes des médias, il n'est pas en IE5.5.
    • Générer des fichiers Pdf n'est pas si facile si vous avez une logique complexe dans une page que vous voulez imprimer. Et si vous avez de l'environnement PHP, vous n'avez pas beaucoup de choix là-bas aussi. Aussi, pourquoi générer du PDF si vous n'avez pas besoin de ce fichier, - il vous suffit d'imprimer la page et c'est tout
    InformationsquelleAutor Reinier Kaper