:left | CSS-Tricks

Sunkanmi Fafowora on Aug 19, 2022

Die :left Pseudoklasse in CSS wird mit der @page Regel verwendet, um alle linken Seiten eines mehrseitigen Druckdokuments auszuwählen. Das ist praktisch, um Ränder für doppelseitige Seiten festzulegen, sodass die Seiten auf der "linken" Seite einen Rand haben und die Seiten auf der rechten Seite einen anderen für ein gutes, buchähnliches Druckerlebnis.

@page :left { 
  margin: 1in 2in;
}

Die :left Pseudoklasse ist in der CSS Paged Media Module Level 3 Spezifikation definiert, die sich derzeit im Editor's Draft Status befindet. Das bedeutet, dass die :left noch in der aktiven Entwicklung ist und sich bis zur vollständigen Implementierung als Candidate Recommendation ändern könnte.

Syntax

@page :left { }

Laut MDN kann :left nur den margin, padding, border und background aller geradzahligen gedruckten Seiten festlegen. Aber nach Tests scheint margin zum Zeitpunkt des Schreibens die einzige Eigenschaft zu sein, die eine sichtbare Wirkung hat.

Gut zu wissen

Nehmen wir an, wir möchten jeder geradzahligen Seite einen 1in Rand hinzufügen. So würden wir das mit der :left Pseudoklasse tun.

@page :left { 
  margin-left: 1in;
}

Großartig! Laut der Druckvorschau von Chrome haben wir die gewünschten Ränder.

Aber es gibt ein paar kleine Anmerkungen, die gut zu wissen sind, was zu erwarten ist, wenn die Seiten an den Drucker gesendet werden.

Ränder und Schreibmodi

Der physische Rand wird immer noch zur linken Seite des Dokuments hinzugefügt, was den Effekt haben könnte, ein Element aus dem druckbaren Bereich zu verdrängen, wenn mit einer anderen Schreibweise gearbeitet wird, z. B. vertical-rl.

body {
  writing-mode: vertical-rl;
}

@page :left {
  margin-left: 1in;
}

Oh je! Die Elemente werden nun aus dem druckbaren Bereich verdrängt, wenn `writing-mode: vertical-rl` auf den Body angewendet wird.

Die Verwendung der logischen Eigenschaft margin-inline-start anstelle von margin-left könnte der bessere Weg sein.

body {
  writing-mode: vertical-rl;
}

@page :left {
  margin-inline-start: 1in;
}

Die zweite Seite hat nun einen Rand entlang der "oberen" Kante des gedruckten Dokuments.

Seitenreihenfolge hängt vom Seitenfluss ab, der von `direction` und `writing-mode` abhängt

Browser unterscheiden zwischen "linken" und "rechten" Seiten, unabhängig davon, ob eine Seite doppelseitig ist oder nicht. Aber ob die erste Seite als links oder rechts gilt, hängt davon ab. Laut der Spezifikation:

Ob die erste Seite eines Dokuments eine linke oder rechte Seite ist, hängt vom Seitenfluss des Dokuments ab. Der Seitenfluss ist die Richtung, in der die gedruckten Seiten eines Dokuments nebeneinander sequenziert werden würden. Zum Beispiel schreitet Englisch und japanisch, das horizontal gesetzt ist, typischerweise von links nach rechts fort, während arabisch und japanisch, das vertikal gesetzt ist, typischerweise von rechts nach links fortschreitet.

Wenn der Text also horizontal gesetzt ist, können wir erwarten, dass die Seiten in der Inline-Richtung fließen. Andernfalls fließt eine vertikale Richtung in der Block-Richtung, was die Seitenreihenfolge beeinflussen könnte und letztendlich, ob :left auf einer bestimmten Seite angewendet wird. Daher können die Eigenschaften direction und writing-mode die Seitenreihenfolge beeinflussen.

Ränder werden nicht angewendet, wenn sich der Inhalt außerhalb der Seitenbox befindet

Wenn der Seiteninhalt mit der Margin-Eigenschaft außerhalb des druckbaren Bereichs der Seitenbox gesetzt wird, setzt sich die Seite auf normal zurück. Dies ist tatsächlich eines der unbekannten Verhaltensweisen, die auftreten, wenn Inhalt weit vom druckbaren Bereich oder der Seitenbox entfernt platziert wird. Zum Beispiel, unter Verwendung unseres obigen Codes, nehmen wir an, wir versuchen, alle Inhalte auf der geradzahligen Seite zu entfernen, indem wir sie über die margin-Eigenschaft verschieben und setzen margin-inline-start auf 10in, was einen Zoll weniger als ein Standard-Papier im Format 8,5″×11″ ist.

@page :left {
  margin-inline-start: 10in;
}

So würde die Seite aussehen.

Beachten Sie, wie der Seiteninhalt knapp davor ist, vollständig über die Seitenbox hinausgeschoben zu werden. Sehen wir uns nun an, was passiert, wenn margin-inline-start auf 11in gesetzt wird.

@page :left {
  margin-inline-start: 11in;
}

Der Browser ignoriert die margin-Eigenschaft vollständig. Die Spezifikation definiert nicht, wie Inhalte außerhalb der Seitenbox positioniert werden, aber so würde der Browser damit umgehen. Dies gilt auch für Seiten im left-to-right-Modus.

Die Druckereinstellungen sind immer noch wichtig

Die :left Pseudoklasse hat keinen Einfluss darauf, *wie* ein Drucker seine Arbeit verrichtet. Zum Beispiel weist :left den Browser nicht an, doppelseitigen Druck auf Seiten zu verwenden. Das muss immer noch auf Druckerebene erfolgen.

Demo

Im folgenden Beispiel haben wir fünf Elemente zur Veranschaulichung erstellt. Wir erzwingen nach jedem Element einen Seitenumbruch, sodass wir beim Senden an den Drucker insgesamt fünf Seiten erhalten.

Es ist schwierig, genau zu visualisieren, was hier passiert, ohne zu versuchen, die Seite an einen Drucker zu senden. Hier ist ein Screenshot der ersten beiden Seiten in der Druckvorschau von Chrome. Beachten Sie, wie die erste Seite als "rechte" Seite betrachtet wird und den Standardrand hat, aber die zweite (geradzahlige) Seite den durch :left angewendeten Stil enthält.