werkstoffwiki

Trace:

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
web-to-print-zines [2026/01/20 08:18] – horstweb-to-print-zines [2026/01/27 00:15] (current) – horst
Line 5: Line 5:
 ===== CSS ===== ===== 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 ===== ===== 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>