:right | CSS-Tricks

Sunkanmi Fafowora on Aug 19, 2022

Die CSS-Pseudo-Klasse :right wird mit der @page-Regel verwendet, um alle rechten Seiten eines mehrseitigen Druckdokuments auszuwählen. Das ist praktisch, um Ränder für zweiseitige Seiten festzulegen, sodass die „rechten“ Seiten einen bestimmten Rand und die linken Seiten einen anderen haben, für ein gutes, buchähnliches Druckerlebnis.

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

Die Pseudo-Klasse :right ist in der CSS Paged Media Module Level 3-Spezifikation definiert, die sich derzeit im Entwurfsstadium befindet. Das bedeutet, dass :right noch in der aktiven Entwicklung ist und sich ändern könnte, bis sie vollständig als Candidate Recommendation implementiert ist.

Syntax

@page :right { }

Laut MDN kann :right nur den margin, padding, border und background aller ungeradzahligen gedruckten Seiten festlegen. Nach Tests scheint jedoch nur margin zum Zeitpunkt der Erstellung dieses Dokuments eine sichtbare Wirkung zu haben.

Gut zu wissen

Nehmen wir an, wir möchten jeder ungeradzahligen Seite einen Rand von 1in nach links hinzufügen. So würden wir das mit der Pseudo-Klasse :right tun.

@page :right { 
  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 man im Hinterkopf behalten sollte, 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 dazu führen könnte, dass ein Element aus dem druckbaren Bereich herausgeschoben wird, wenn wir mit einem vertikalen Schreibmodus arbeiten. Hier ist ein Beispiel, das einen negativen physischen Rand auf der rechten Seite des Dokuments verwendet.

body {
  writing-mode: vertical-rl;
}

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

Ruh roh! Die Elemente werden nun aus dem druckbaren Bereich herausgeschoben, wenn `writing-mode: vertical-rl` auf den Body angewendet wird.

Die Verwendung der logischen Eigenschaft margin-inline-end anstelle von margin-right ist möglicherweise der bessere Weg.

body {
  writing-mode: vertical-lr;
}

@page :right {
  margin-inline-end: -1in;
}

Die erste Seite hat nun einen Rand entlang der „unteren“ Kante des gedruckten Dokuments.

Die Seitenreihenfolge hängt von der Seitenprogression ab, die von `direction` und `writing-mode` abhängt

Browser unterscheiden zwischen „linken“ und „rechten“ Seiten, unabhängig davon, ob eine Seite zweiseitig 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 von der Seitenprogression des Dokuments ab. Die Seitenprogression ist die Richtung, in der die gedruckten Seiten eines Dokuments nebeneinander sequenziert würden. Zum Beispiel schreiten Englisch und japanisch, die horizontal gesetzt sind, typischerweise von links nach rechts fort, während arabische und japanische Seiten, die vertikal gesetzt sind, typischerweise von rechts nach links fortschreiten.

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 :right auf einer bestimmten Seite angewendet wird. Daher können die Eigenschaften direction und writing-mode die Seitenreihenfolge beeinflussen.

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

Wenn der Seiteninhalt mit der Rand-Eigenschaft außerhalb des druckbaren Bereichs der Seitenbox gesetzt wird, wird die Seite zurückgesetzt. Dies ist tatsächlich eines der unbekannten Verhaltensweisen, die auftreten, wenn Inhalt weit vom druckbaren Bereich oder der Seitenbox entfernt platziert wird. Wenn wir zum Beispiel unseren obigen Code verwenden und versuchen, alle Inhalte auf den ungeradzahligen Seiten zu entfernen, indem wir sie über die margin-Eigenschaft verschieben, und margin-inline-start auf 10in setzen, was einen Zoll von einem Standardpapier von 8,5″×11″ entfernt ist.

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

So würde die Seite aussehen.

Beachten Sie, wie der Seiteninhalt gerade noch nicht vollständig über die Seitenbox hinausgeschoben wird. Schauen Sie nun, was passiert, wenn margin-inline-start auf 11in gesetzt wird.

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

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

Die Druckereinstellungen sind immer noch wichtig

Die Pseudo-Klasse :right hat keinen Einfluss darauf, wie ein Drucker seine Arbeit erledigt. Zum Beispiel weist :right den Browser nicht an, zweiseitigen Druck auf Seiten zu verwenden. Das muss immer noch auf Druckerebene erfolgen.

Demo

In der folgenden Demo haben wir fünf Elemente erstellt. Wir erzwingen einen Seitenumbruch nach jedem Element, sodass wir beim Drucken 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 von :right angewendeten Stil hat, aber die zweite (geradzahlige) Seite den Standardrand enthält.