Wie kann ich eine CSS-Klasse definieren, um die gedruckte Seite im Querformat festzulegen?

Ich habe ein CSS-Stylesheet erstellt, die eine HTML-Seite im Querformat drucken können folgende @media Regel:Wie kann ich eine CSS-Klasse definieren, um die gedruckte Seite im Querformat festzulegen?

@media print{ 
     @page {size: landscape;} 
    }

Ich will nicht alle HTML-Seiten, die dieses Stylesheet in der Landschaft laden drucken Modus. Idealerweise würde ich gerne eine Landschaftsklasse angeben können, die dies tun würde.

Da der HTML-Code generiert wird, könnte ich immer eine separate landscape.css-Datei erstellen und sie bei Bedarf an den Header anhängen, aber ich hatte gehofft, dass es eine sauberere Möglichkeit gibt, dies mit Klassen zu tun.

Als Follow-up habe ich versucht, auch die folgenden ohne Glück:

@page rotated { 
    size: landscape; 
} 
@media print{ 
    .rotate { 
    page: rotated; 
    } 
}

ich wahrscheinlich nur am Kopf gegen eine Wand für eine Lösung zu schlagen, die nur in Webkit-basierten Browsern zu funktionieren scheint. Die Einstellung @page size: landscape scheint nicht in Firefox oder (Überraschung, Überraschung) ie10 zu funktionieren.

Quelle

2013-05-20 Alan Krause

Überprüfen Sie http://stackoverflow.com/questions/138422/landscape-printing-from-html für Ihre Antwort. Kann eine doppelte Frage sein ... – CoderOfHonor

Diese Frage bereits konsultiert, und ich sehe nicht, dass es die Frage beantwortet, wie man @page Regeln auf eine bestimmte CSS-Klasse anwenden, wenn das Medium "drucken" ist. –

Oh, ok. Ich habe die Frage nicht richtig gelesen. – CoderOfHonor

Ich würde denken, dass der beste Weg, dies zu erreichen, wäre die folgende zu tun:

@media print{ 
    .class-name{ 
     @page{ 
      size:landscape; 
     } 
    } 
}

Ich habe nicht getestet, mich so korrigieren, wenn ich falsch bin. Viel Glück!

Quelle

2013-05-20 17:47:35 CoderOfHonor

Versucht, aber nicht gehen. Ich habe auch @ page.class-name ausprobiert (was mir irgendwie intuitiv vorkam), was auch nicht funktioniert. Danke für den Versuch. –

Wie wäre es damit? – CoderOfHonor

(Ich habe meine Antwort bearbeitet) – CoderOfHonor

ich nicht wirklich verstanden, was du getan hast mit:

@page rotated { 
    size: landscape; 
} 
@media print{ 
    .rotate { 
    page: rotated; 
    } 
}

Wie dem auch sei, möchten Sie einige Seiten in landscape Modus drucken, während andere Seiten im Standard (portrait) Modus sein sollte. Also schlage ich vor, diese:

@media print { 
    body.special-page { 
     transform:rotate(180deg); 
     -webkit-transform: rotate(91deg); 
     -moz-transform: rotate(10deg); 
     -ms-transform:rotate(20deg); 
    } 
}

Und wir werden .special-page für body hinzufügen (Through JS vielleicht) wie:.

<body class="special-page"> 
    <p> 
    Lorem ipsum dolor sit amet, his mucius sensibus omittantur 
et, ex cum nemore iuvaret. Voluptua constituam ad nam. Est ei etiam 
labitur, instructior definitiones ad sit. Ut probo assum 
scribentur pro. Dicant epicuri ea pri. 
    </p> 
</body>

Kasse diese jsbin

Was wir bestimmte Arten tun schreibt für print Modus einer Seite durch @media print, und wir drehen ganze Seite 180deg, so dass es als im Querformat arbeiten wird, wenn die bodyenthältKlasse.

Ich konnte keinen anderen Weg mit @page und Klassen finden.

Quelle

2016-05-24 11:37:38

Leider sind wir derzeit nicht in der Lage zu Seite Typselektoren für Medienanfragen über die :left geliefert zu nutzen, :right, :first und :blank Pseudoklassen.

https://www.w3.org/TR/css3-page/#page-selector-and-context

Das W3C erwägt jedoch die Zugabe anderer Seite Pseudo-Klassen für zukünftige Ebene der CSS [@page :nth(4) { ... } oder @page (.class) { ... }]. Ich bin mir nicht sicher, warum benannte Seiten nicht funktionieren konnten, aber ab dem 26. Januar 2016 können Medienabfragen der Ebene 4 (einschließlich der @page at-Regel) Bereiche, Negationen und benutzerdefinierte Medienabfragen mit Skripts enthalten. Außerdem wird die Größeneigenschaft derzeit nur in Chrome unterstützt.

https://www.w3.org/TR/mediaqueries-4/

Dies ist die nächstgelegene ich war in der Lage zu bekommen, mit nur HTML und CSS, die Seiten geradzahlige auf Querformat gilt. Ich weiß, dass dies keine exakte Lösung ist und nur in Chrome funktioniert.

<html> 
    <head> 
     <style> 
      .landscape { 
       page-break-before: always; 
      } 
      @page :left { 
       size: landscape; 
      } 
     </style> 
    </head> 
    <body> 
     <p>This is a normal paragraph.</p> 
     <p class="landscape">This is in landscape form, following a page break.</p> 
    </body> 
</html>

Quelle

2016-05-26 20:26:50

Es sieht so aus, als ob das '@page (.class) {...}' Konstrukt das ist, was ich hoffte, unterstützt zu finden. Vielen Dank für Ihre ausführliche Antwort! –

Ich bin froh, dass ich Ihnen helfen könnte! Und wenn ich sage, dass ich in Chrome unterstützt werde, möchte ich sagen, WebKit-basierte Browser, einschließlich Opera. –

Der Trick ist, in der media Attribut gesetzt, dass auf print wie folgt aus:

<style media="print"></style>

Dann diese CSS innerhalb dieses style Element:

@page { 
    size: landscape; 
}

Hier ist ein funktionierendes Beispiel Damit können Sie in beide Richtungen drucken:
(Getestet und funktioniert auf Chrome, Edge & Firefox.)

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Sorry for using so much Lorem ipsum O:)</title> 
    <style media="print"> 
    /* this prints the page in landscape by default. */ 
    @page { 
     size: landscape; 
    } 
    /* If you would like to rotate the body element: */ 
    /*body { 
     -webkit-transform: rotate(90deg); 
     -moz-transform: rotate(90deg); 
     -o-transform: rotate(90deg); 
     -ms-transform: rotate(90deg); 
     transform: rotate(90deg); 
    }*/ 
    /* If you would like to rotate the body element in the other direction: */ 
    /*body { 
     -webkit-transform: rotate(-90deg); 
     -moz-transform: rotate(-90deg); 
     -o-transform: rotate(-90deg); 
     -ms-transform: rotate(-90deg); 
     transform: rotate(-90deg); 
    }*/ 
    </style> 
</head> 
<body> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br /> 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br /> 
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /> 
</body> 
</html>

Viel Glück und alles Gute.

Quelle

2016-05-27 06:05:13

Hehe, [funktioniert nicht wirklich gut] (http://i.stack.imgur.com/xeeTu.png). Ergebnis ist gedrehter Text immer noch im Hochformat und mit einer riesigen Menge an Leerraum oder wenn manuell in die Landschaft geändert [es ist seitwärts] (http://i.stack.imgur.com/FnQpq.png) ... – misterManSam

@misterManSam dachte ich das OP wollte den * Seiteninhalt * rotieren lassen und ** nicht ** die * Seite im Querformat *, haha danke, dass du mich informiert hast. Ich habe meine Antwort aktualisiert :) –

Ich habe ein leeres MS-Dokument mit Landscape-Einstellung erstellt und dann im Editor geöffnet. Kopiert und die folgenden auf meine HTML-Seite

<style type="text/css" media="print"> 
@page Section1 
{size:11 8.5in; 
margin:.5in 13.6pt 0in 13.6pt; 
mso-header-margin:.5in; 
mso-footer-margin:.5in;

Liste item

mso-paper-source: 4;} div.Section1 {page: Section1;}
put Text/Bilder/Sonstiges

Die Druckvorschau zeigt die Seiten im Querformat an. Dies scheint auf IE und Chrome gut zu funktionieren, Sie können dies auch sehen

Quelle

2016-05-27 08:44:24

Wie kann ich eine CSS-Klasse definieren, um die gedruckte Seite im Querformat festzulegen?

Antwort

Verwandte Themen