Ziel dieses Dokuments ist es nicht, eine vollständige technische Anleitung zum Ausdrucken Ihres Charakterbogens zu sein, sondern vielmehr eine Zusammenfassung der Dinge, die Sie wissen müssen.
Im Gegensatz zu einem Buch, bei dem der Designer die vollständige Kontrolle über die Datenmenge auf einer einzelnen Seite hat, ist der Grad der Kontrolle beim Umgang mit Webseiten und damit Zeichenblättern viel geringer. Wir könnten beispielsweise einen dynamisch ausgefüllten Abschnitt in einem Blatt mit 4 Elementen haben, während derselbe Abschnitt in einem anderen Blatt 36 Elemente enthält. Oder wir könnten einen anderen Abschnitt haben, in dem der Spieler die Ausrüstung auflistet, die sein Charakter trägt.
Browser stellen Methoden bereit, um anzugeben, wie Inhalte auf mehrere Seiten aufgeteilt werden. Derzeit sind sie jedoch alles andere als perfekt, insbesondere wenn es um die Verwendung neuerer Layouttechniken wie Flexbox und Grid geht.
Medien-Anfragen
Medienabfragen ermöglichen Ihnen die Anwendung von CSS-Stilen abhängig vom allgemeinen Typ eines Geräts oder anderen Merkmalen wie der Bildschirmauflösung oder der Breite des Browser-Ansichtsfensters (1). Wenn Ihr Blatt nicht den Legacy-Modus verwendet, können Sie Medienabfragen verwenden, um Stile bedingt anzugeben, die nur beim Drucken Ihres Zeichenblatts gelten. Hier ist eine Zusammenfassung, wie das funktioniert:
/* Ihre Blatt-CSS-Datei: */
/* Regeln außerhalb jeder Medienabfrage gelten für alle
Gerätetypen*/
.highlight {
Schriftgröße: 1rem;
}
@media print (Ausrichtung: Querformat) {
/* Regeln, die nur wirksam werden, wenn Ihr Blatt
im Querformat gedruckt wird. */
html {
Schriftgröße: 12pt;
}
.highlight {
Farbe: Schwarz;
Schriftstärke: fett;
}
}
@media print (orientation: Landscape) {
/* Regeln, die nur wirksam werden, wenn Ihr Blatt
im Querformat gedruckt wird. */
}
@media print (Ausrichtung: Hochformat) {
/* Regeln, die nur wirksam werden, wenn Ihr Blatt
im Hochformat gedruckt wird. Dies ist der Standardmodus für die meisten Drucker */
}
@media screen {
/* Regeln, die nur wirksam werden, wenn Ihr
Zeichen auf einem Bildschirm (Computer, Mobilgerät) angezeigt wird. */
html {
Schriftgröße: 14px;
}
.highlight {
Farbe: rot;
}
}Die Seitenregel
Die @page-at-Regel ist eine CSS-at-Regel, die zum Ändern verschiedener Aspekte einer gedruckten Seiteneigenschaft verwendet wird. Es zielt auf die Abmessungen, die Seitenausrichtung und die Ränder der Seite ab und ändert diese (2).
/* Ihre Blatt-CSS-Datei: */
@page {
Größe: Buchstabenhochformat; /* gibt an, dass das Blatt im Hochformat im Letter-Format gedruckt wird */
Rand: 0,25 Zoll /* gibt einen Seitenrand von 0,25 Zoll an */
}
Die Seitenregel akzeptiert die folgenden Pseudoselektoren:
@page page :first { /* erste Seite des Dokuments */ }
@page page :last { /* letzte Seite des Dokuments */ }
@page page :left { /* gerade nummerierte Seiten */ }Seitenumbrüche
Am Anfang dieses Artikels haben wir erwähnt, dass Browser uns einige Tools bieten, mit denen wir steuern können, wie Inhalte auf mehreren Seiten angezeigt werden sollen. Hier sind einige Techniken, mit denen Sie den Seitenfluss auf Ihrem Blatt steuern können:
/* Ihre Blatt-HTML-Datei: */
<div class="section__container">
<h2 class="section__title">Abschnitt 1</h2>
<p class="section__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non finibus lacus. Nam ullamcorper felis urna, im Vestibulum enim semper euismod. Phasellus cursus gravida rhoncus…</p>
<figure class="section__thumbnail>
<img src="imgs/section1.jpg" alt="Section 1">
<figcaption>Abb.1 – Nam ullamcorper felis</figcaption>
</figure>
</div>
<div class="section__container">
<h2 class="section__title">Abschnitt 2</h2>
<p class="section__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non finibus lacus. Nam ullamcorper felis urna, im Vestibulum enim sempre euismod. Phasellus cursus gravida rhoncus…</p>
<figure class="section__thumbnail">
<img src="imgs/section2.jpg" alt="Section 2">
<figcaption>Abb.2 - Lorem ipsum dolor sit amet</figcaption>
</figure>
</div>
/* Ihre Blatt-CSS-Datei: */
.section__container {
/* Lässt jeden Abschnitt auf einer neuen Seite beginnen */
break-before: page;
}
.section__thumbnail {
/* gibt an, dass der Browser nach Möglichkeit vermeiden sollte, den Inhalt innerhalb der Abschnittsminiaturansicht auf mehrere Seiten aufzuteilen. Dadurch bleibt die Bildunterschrift nah am jeweiligen Bild. */
Einbruch: vermeiden;
}Denken Sie wie ein Drucker
Wenn Sie bis hierher gekommen sind, sollten Sie die grundlegenden Konzepte beherrschen, die erforderlich sind, um Ihr Charakterblatt druckbar zu machen. Großartig, jetzt kommt der schwierigste Teil: Vergessen Sie die Art und Weise, wie Sie früher über Charakterbögen nachgedacht haben, es ist weder eine Maus noch ein Touchscreen erforderlich, die gesamte Interaktion erfolgt mit einem Bleistift und Origami-Techniken (wenn auch sehr selten). Hier sind ein paar Designtipps, die Ihnen dabei helfen können:
Machen Sie Ihr Charakterblatt responsiv. Dies hilft Ihnen nicht nur beim Bereitstellen Ihres Blatts in verschiedenen Auflösungen und Fenstergrößen, sondern auch beim Drucken auf verschiedenen Papierformaten. Denken Sie daran, dass Menschen auf der ganzen Welt unterschiedliche Papierformate verwenden (Letter, A4…). Vielleicht möchten sie es auch im Querformat drucken oder sogar mehrere Blätter auf einer einzigen Seite anordnen, um beispielsweise eine schnelle Monster-Referenz zu erstellen.
Deaktivieren Sie den Legacy-Modus. Wenn Sie Zugriff auf alle coolen Funktionen haben möchten, müssen Sie Ihr Blatt auf die aktuellen Standards aktualisieren.
Unnötiges Zeug verstecken. Ihr Blatt kann beispielsweise mehrere Roll-Buttons enthalten, auf denen sich keine Informationen befinden. Wenn das der Fall ist, sollten Sie sie verstecken, da niemand sie verwenden kann. Das Gleiche gilt für die Wiederholungsabschnitts-Controller, Makrotasten usw.
Stil entsprechend ändern. Ok, vielleicht haben Sie einen Roll-Button, der einige nützliche Informationen enthält. Wenn dies der Fall ist, gestalten Sie es so, dass es dies widerspiegelt. Anstatt wie ein anklickbares Element auszusehen, sollten Sie darüber nachdenken, was Sinn machen würde, wenn es einmal auf ein Blatt Papier gedruckt wäre.
Lassen Sie Platz für Notizen. Während einer Spielesitzung werden sich die Leute wahrscheinlich Notizen machen. Sie tun gut daran, ein paar Leerzeilen/Leerzeichen in den Ausrüstungsbereich Ihres Blattes einzufügen oder vielleicht dort, wo die Spieler verfolgen, wie viel Schaden ihr Charakter erlitten hat.
Schwarz und Weiß ist dein Freund. Nicht jeder hat einen Farbdrucker. Und einige, die dies tun, würden immer noch den Druck in Schwarzweiß bevorzugen. Auch wenn die meisten Computer in der Lage sind, den Inhalt automatisch in Graustufen umzuwandeln, wäre es besser, wenn Sie eine Schwarz-Weiß-Version Ihres Inhalts anbieten würden. Durch die Angabe von Farben, Rändern und Bildern können Sie sicherstellen, dass Ihr Blatt mit dem richtigen Kontrast gedruckt wird.
Seien Sie vorsichtig mit der Schriftgröße. Um sicherzustellen, dass das Druckdesign einem breiten Publikum zugänglich ist, empfehlen wir die Verwendung einer Schriftgröße von 16 Punkt.
Vermeiden Sie Hintergrundfarben und -bilder. Standardmäßig drucken Browser diese nicht aus. Benutzer können sich manuell dafür entscheiden, aber Sie gehen lieber auf der sicheren Seite. Wenn Sie wirklich CSS-Hintergrundfarben und -bilder verwenden müssen, werfen Sie einen Blick auf die CSS-Eigenschaft print-color-adjust (3). Obwohl es nicht vollständig unterstützt wird, kann es Ihnen helfen, das zu erreichen, was Sie suchen, insbesondere in Chrome. Ein anderer Ansatz, den Sie ausprobieren könnten, besteht darin, absolut positionierte Bilder oder Div mit Bildrändern zu verwenden.
Länge der Ausgleichslinie. Das Lesen einer langen Textzeile führt zu Ermüdung: Der Leser muss am Ende jeder Zeile den Kopf bewegen und nach dem Anfang der nächsten Zeile suchen. Eine zu kurze Zeile unterbricht Wörter oder Phrasen, die im Allgemeinen als Einheit gelesen werden (4). Um dies zu vermeiden, sollten Sie beim Entwerfen für den Druck darauf achten, dass Ihre Zeilen zwischen 45 und 75 Zeichen lang sind (einschließlich Leerzeichen und Satzzeichen). Eine coole Sache, die Sie ausprobieren könnten, ist die dynamische Aufteilung Ihres Inhalts in mehrere Spalten mithilfe der CSS-Eigenschaft „Spaltenanzahl“:
/* Ihre Blatt-HTML-Datei: */
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non finibus lacus. Nam ullamcorper felis urna, im Vestibulum enim sempre euismod. Phasellus cursus gravida rhoncus. Cras et odio in tellus efficitur congue vitae ut eros. Sed non arcu vitae purus sempre sagittis. Nullam ipsum arcu, Rhoncus sed pharetra quis, porttitor quis tortor.</p>/* Ihre Blatt-CSS-Datei: */
p {
columns-count: 2;
}Dadurch wird Ihr Absatzinhalt dynamisch in zwei Spalten aufgeteilt. Es funktioniert auch mit verschachtelten Inhalten wie sich wiederholenden Abschnitten.
Erweitern und reduzieren Sie den Inhalt nach Bedarf. Zu guter Letzt verfügt Ihr Charakterblatt häufig über zusammenklappbare Komponenten, die umgeschaltet werden können, um mehr Informationen über eine bestimmte Eigenschaft eines Charakters anzuzeigen. Beim Drucken möchten Sie möglicherweise ignorieren, wie der Benutzer diese Abschnitte auf dem Bildschirm hinterlassen hat, und sie stattdessen erweitern. Oder vielleicht könnten Sie nur den Titel drucken und einen neuen Abschnitt erstellen, der nur beim Drucken sichtbar ist und bei Bedarf auf einer separaten Seite gedruckt werden kann.
Charakterbogenkonfiguration
Der letzte Schritt, um Ihren Charakterbogen druckfähig zu machen, besteht darin, uns mitzuteilen, dass Ihr Bogen druckfreundlich gestaltet wurde. Dazu müssen Sie eine printable -Eigenschaft zu Ihrer sheet.json-Datei hinzufügen und ihren Wert auf truesetzen, genau so:
{
„html“: „pritablesheet.html“,
„css“: „pritablesheet.css“,
„authors“: „Roll20 Team (@roll20app)“,
„roll20userid“: „1“,
„preview“ : „pritablesheet.png“,
„instructions“: „**Dieses Blatt ist druckfähig**\n\nSie können hier Markdown-formatierte Anweisungen zur Verwendung Ihres Blattes einfügen.“,
„legacy“: false,
„ druckbare": true
}Herzlichen Glückwunsch, Sie haben es geschafft
Wir hoffen, dass dieser kurze Leitfaden Ihnen genügend Denkanstöße liefert, damit Sie mit der Gestaltung und Codierung der gedruckten Version Ihres Charakterbogens beginnen können. Wenn Sie Fragen oder Vorschläge zur Verbesserung dieses Artikels haben, schreiben Sie uns eine E-Mail an eine noch zu definierende Adresse.
Seien Sie vorsichtig und wünschen Sie viel Spaß beim Drucken!
Zusätzliche Ressourcen
- https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
- https://developer.mozilla.org/en-US/docs/Web/CSS/@page
- https://developer.mozilla.org/en-US/docs/Web/CSS/print-color-adjust
- J. Craig und W. Bevington, „Designing with Type: A Basic Course in Typography“, in New York: Watson-Guptill.
- https://developer.mozilla.org/en-US/docs/Web/CSS/column-count
Herunterladbare ZIP-Datei
Wir haben eine ZIP-Datei beigefügt, die verschiedene Dateien und Beispiele aus dem Charakterblatt D&D 5E von Roll20 enthält. Dies sollte dazu beitragen, einen echten Anwendungskontext für die Konfiguration druckbarer Blätter bereitzustellen!