Differences

This shows you the differences between two versions of the page.

--- web-to-print-zines [2026/01/20 08:18] – created horst
+++ web-to-print-zines [2026/01/27 00:15] (current) – horst
@@ Line 2: / Line 2: @@
 Auf der Wertstoffhof Website gibt es einige Seiten die sich auch als Zines ausdrucken lassen. Hier wird einmal das CSS und der HTML Code erklärt den man braucht um das ganz selber zu machen. Das ganze basiert auf der Zine-Machine von Rowan Merewood: https://rowan.fyi/made/zine-machine/
+===== CSS =====
+<code>
+/* based on the Zine-Machine Project by Rowan Merewood: https://rowan.fyi/made/zine-machine/*/
+/* Setzt alle automatisch eingestellten Ränder zurück */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+/* Abschnitt für die Regeln die für die Druckansicht einer Seite gelten */
+@media print {
+    /* Verkleinert die Schriftgröße  */
+    body {
+        font-size: 69%;
+    }
+    /*Hier beginnt das Seiten Layout */
+    @page {
+        size: landscape;
+        margin: 0;
+        bleed: 0;
+    }
+    /* Definiert die für Zines typische Seitenaufteilung */
+    .zine {
+        width: 100vw;
+        height: 100vh;
+        display: grid;
+        grid-template-areas:
+            "page-5 page-4 page-3 page-2"
+            "page-6 page-7 page-8 page-1";
+        grid-template-columns: repeat(4, 25%);
+        grid-template-rows: repeat(2, 50%);
+        gap: 1px;
+        background: lightgrey;
+    }
+    /* Erzeugt Guidelines zwischen den Seiten des Zines */
+    .zine-page {
+        background: white;
+        padding: 0.2rem;
+        overflow: hidden;
+    }
+    /* Dreht die Zine Seiten die auf der oberen Hälfte der A4 Seite sind */
+    .page-5,
+    .page-4,
+    .page-3,
+    .page-2 {
+        transform: rotate(180deg) translateX(-0.1px);
+    }
+    /* Weist jede Seite einem der definierten Bereiche zu */
+    .page-1 {
+        grid-area: page-1;
+    }
+    .page-2 {
+        grid-area: page-2;
+    }
+    .page-3 {
+        grid-area: page-3;
+    }
+    .page-4 {
+        grid-area: page-4;
+    }
+    .page-5 {
+        grid-area: page-5;
+    }
+    .page-6 {
+        grid-area: page-6;
+    }
+    .page-7 {
+        grid-area: page-7;
+    }
+    .page-8 {
+        grid-area: page-8;
+    }
+    .page-5,
+    .page-4,
+    .page-3,
+    .page-2 {
+        transform: rotate(180deg);
+    }
+    /* Jetzt ist das Seiten Layout zuende */
+    /* Füg hier weitere Styles ein um den Look deines Zines zu verfeinern */
+}
+</code>
+===== HTML =====
+<code>
+<!DOCTYPE html>
+<html lang="en">
+  <!-- Sprache des Dokuments -->
+  <head>
+    <meta charset="UTF-8" />
+    <!-- Enthält auch Umlaute -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sample Zine</title>
+    <!-- Tab Name -->
+    <link rel="icon" type="image/x-icon" href="/icon.png" />
+    <!--Favcon (Website Icon)-->
+    <link rel="stylesheet" media="print" href="/css/zine-print-template.css">
+  </head>
+  <main class="zine">
+    <header class="zine-page page-1">
+        Cover Page
+    </header>
+    <section class="zine-page page-2">
+        Content 1
+    </section>
+    <section class="zine-page page-3">
+        Content 2
+    </section>
+    <section class="zine-page page-4">
+        Content 3
+    </section>
+    <section class="zine-page page-5">
+        Content 4
+    </section>
+    <section class="zine-page page-6">
+        Content 5
+    </section>
+    <section class="zine-page page-7">
+        Content 6
+    </section>
+    <footer class="zine-page page-8">
+        Backside
+    </footer>
+  </main>
+</html>
+</code>