Dieses Dokument hat nicht zum Ziel, ein vollständiger technischer Leitfaden dafür zu sein, wie man seinen Charakterbogen druckbar macht. Es soll vielmehr eine Zusammenfassung der Dinge sein, 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 bei Webseiten und somit auch bei Charakterbögen viel geringer. Wir könnten zum Beispiel einen dynamisch gefüllten Abschnitt auf einem Bogen mit 4 Gegenständen haben, während derselbe Abschnitt auf einem anderen Bogen 36 Gegenstände enthält. Oder wir könnten einen anderen Abschnitt haben, in dem der Spieler die Ausrüstung auflistet, die sein Charakter trägt.
Browser bieten zwar Möglichkeiten, festzulegen, wie Inhalte auf mehrere Seiten aufgeteilt werden, aber im Moment sind sie noch lange nicht perfekt, insbesondere wenn es um den Einsatz neuerer Layouttechniken wie Flexbox und Grid geht.
Medienabfragen
Medienabfragen ermöglichen es Ihnen, CSS-Stile abhängig von der allgemeinen Art des Geräts oder anderen Merkmalen wie Bildschirmauflösung oder Browseransichtsbreite anzuwenden (1). Wenn Ihr Bogen nicht im Legacy-Modus läuft, können Sie Medienabfragen verwenden, um bedingte Styles festzulegen, die nur beim Drucken Ihres Charakterbogens angewendet werden. Hier ist eine Zusammenfassung, wie das funktioniert:
/* Deine Blatt CSS Datei: */
/* Regeln außerhalb von Medienabfragen gelten für alle
Gerätetypen*/
.hervorheben {
Schriftgröße: 1rem;
}
@media print (orientation: landscape) {
/* Regelungen die nur wirksam werden, wenn Sie Ihr Blatt
im Querformat ausdrucken. */
html {
Schriftgröße: 12pt;
}
.hervorheben {
Farbe: schwarz;
Schriftgewicht: fett;
}
}
@media print (orientation: landscape) {
/* Regelungen die nur wirksam werden, wenn Sie Ihr Blatt
im Querformat ausdrucken. */
}
@media print (orientation: portrait) {
/* Regelungen die nur wirksam werden, wenn Sie Ihr Blatt
im Hochformat ausdrucken. Dies ist der Standardmodus für die meisten Drucker */
}
@media screen {
/* Regelungen die nur wirksam werden, wenn Sie Ihren
Charakter auf einem Bildschirm (Computer, Handy) sehen. */
html {
Font-size: 14px;
}
.highlight {
color: red;
}
}The Page Rule
Die @page-Regel ist eine CSS-Regel, die verwendet wird, um verschiedene Aspekte einer gedruckten Seiteneigenschaft zu ändern. Es zielt darauf ab, die Abmessungen, die Seitenorientierung und die Ränder der Seite zu ändern (2).
/* Ihre CSS-Datei: */
@page {
size: letter portrait; /* gibt an, dass die Seite im Querformat auf Briefgröße gedruckt wird */
margin: 0.25in /* gibt einen Seitenrand von 0.25 Zoll an */
}
Die Seitenregel akzeptiert die folgenden Pseudo-Selektoren:
@page page :first { /* erste Seite des Dokuments */ }
@page page :last { /* letzte Seite des Dokuments */ }
@page page :left { /* gerade Seiten */ }Seitenumbrüche
Am Anfang dieses Artikels haben wir erwähnt, dass Browser uns einige Tools bieten, um zu steuern, wie der Inhalt auf mehreren Seiten angezeigt werden soll. Hier sind einige Techniken, die du verwenden kannst, um den Seitenfluss auf deinem Blatt zu kontrollieren:
/* Deine HTML-Datei für das Blatt: */
<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, in 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, in vestibulum enim semper 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>
/* Deine Blatt-CSS-Datei: */
.section__container {
/* Sorgt dafür, dass jede Sektion auf einer neuen Seite beginnt */
break-before: page;
}
.section__thumbnail {
/* gibt an, dass der Browser die Inhalte innerhalb der Abschnittsvorschau möglichst nicht über mehrere Seiten aufteilen soll. Auf diese Weise bleibt die Bildunterschrift nahe am relevanten Bild. */
break-inside: avoid;
}Wie ein Drucker denken
Wenn du es bis hierhin geschafft hast, solltest du die grundlegenden Konzepte verstanden haben, um deinen Charakterbogen druckbar zu machen. Großartig, jetzt kommt der schwierigste Teil: Vergiss die Art und Weise, wie du über Charakterbögen gedacht hast. Hier gibt es keine Maus oder Touchscreen, alle Interaktionen erfolgen mit einem Stift und Origami-Techniken (wenn überhaupt). Hier sind ein paar Design-Tipps, die dir auf deinem Weg helfen können:
Mache deinen Charakterbogen responsiv. Dadurch kannst du ihn nicht nur auf verschiedenen Bildschirmauflösungen und Fenstergrößen anzeigen, sondern auch beim Drucken auf verschiedene Papierformate. Denken Sie daran, dass in der ganzen Welt unterschiedliche Papierformate verwendet werden (Letter, A4…), sie möchten ihn möglicherweise auch im Querformat drucken oder sogar mehrere Bögen auf einer Seite einrichten, um eine schnelle Monsterreferenz zu erstellen, zum Beispiel.
Deaktiviere den Legacy-Modus. Wenn du Zugriff auf alle coolen Funktionen haben möchtest, musst du deinen Bogen auf den aktuellen Stand bringen.
Verstecke unnötige Elemente. Dein Bogen kann einige Rollenbuttons enthalten, die keine Informationen enthalten, zum Beispiel. In diesem Fall sollten Sie sie ausblenden, da niemand sie verwenden kann. Das Gleiche gilt für die wiederkehrenden Abschnittscontroller, Makro-Buttons usw.
Passe den Stil entsprechend an. Okay, vielleicht hast du einen Rollenbutton, der nützliche Informationen enthält. Wenn das der Fall ist, gestalte es entsprechend. Denken Sie darüber nach, wie es Sinn macht, wenn es auf einem Stück Papier gedruckt wird, anstatt wie ein anklickbares Element auszusehen.
Platz für Notizen freilassen. Während einer Spielsitzung werden die Leute wahrscheinlich Notizen machen. Es wäre gut, einige leere Zeilen/Platz im Ausrüstungsabschnitt deines Blatts einzufügen oder vielleicht an der Stelle, wo die Spieler verfolgen, wie viel Schaden ihr Charakter erlitten hat.
Schwarz-Weiß ist dein Freund. Nicht jeder hat einen Farbdrucker. Und manche würden trotzdem bevorzugen, in Schwarz-Weiß zu drucken. Obwohl die meisten Computer den Inhalt automatisch in Graustufen umwandeln können, würdest du besser eine Schwarz-Weiß-Version deines Inhalts anbieten. Durch die Festlegung von Farben, Rahmen und Bildern kannst du sicherstellen, dass dein Blatt mit dem richtigen Kontrast gedruckt wird.
Achte auf die Schriftgröße. Um sicherzustellen, dass das Druckdesign von einer breiten Zielgruppe genutzt werden kann, empfehlen wir eine Schriftgröße von 16 Punkten.
Vermeide Hintergrundfarben und Bilder. Standardmäßig werden diese im Browser nicht gedruckt. Benutzer können dies zwar manuell auswählen, aber es wäre sicherer, auf der sicheren Seite zu sein. Wenn Sie wirklich CSS-Hintergrundfarben und -Bilder verwenden müssen, schauen Sie sich die Eigenschaft print-color-adjust CSS (3) an. Obwohl es nicht vollständig unterstützt wird, kann es Ihnen helfen, das zu erreichen, wonach Sie suchen, insbesondere in Chrome. Ein anderer Ansatz, den Sie ausprobieren könnten, besteht darin, absolute positionierte Bilder oder eine Balance von Zeilenlänge. Das Lesen einer langen Textzeile verursacht Ermüdung: Der Leser muss den Kopf am Ende jeder Zeile bewegen und den Anfang der nächsten Zeile suchen. Eine zu kurze Zeile zerreißt Wörter oder Phrasen, die im Allgemeinen als Einheit gelesen werden (4). Um dies zu vermeiden, sollten Sie Ihre Zeilenlänge beim Entwurf für den Druck auf 45 bis 75 Zeichen (einschließlich Leerzeichen und Satzzeichen) festlegen. Eine coole Sache, die Sie ausprobieren könnten, ist das dynamische Teilen Ihres Inhalts in mehrere Spalten mit der CSS-Eigenschaft column count: This will split your paragraph content dynamically into two columns. It also works with nested content like repeating sections. Expand and collapse content as needed. Last but not least, a lot of the time your character sheet will have collapsible components that can be toggled to show more information about a specific trait of a character. When it comes to print, you may want to ignore how the user left those sections on the screen and expand them instead. Or perhaps you could print just the title and create a new section, visible only when printing, that can be printed on demand on a separate page. The last step to make your character sheet printable is let us know that your sheet was designed to be print friendly. Um das zu tun, musst du deiner sheet.json-Datei eine druckbare -Eigenschaft hinzufügen und ihren Wert auf truesetzen, genau so: Wir hoffen, dass diese kurze Richtlinie dir genügend Denkanstöße gibt, um mit dem Entwurf und der Programmierung der gedruckten Version deines Charakterbogens zu beginnen. Wenn du Fragen oder Vorschläge zur Verbesserung dieses Artikels hast, schreib uns an eine noch festzulegende Adresse. Kümmere dich und viel Spaß beim Drucken! Wir haben eine ZIP-Datei beigefügt, die verschiedene Dateien und Beispiele von dem D&D 5E by Roll20 Charakterbogens enthält. Dies sollte beim Konfigurieren von druckbaren Bögen helfen, indem einige reale Anwendungskontexte bereitgestellt werden!/* Ihre HTML-Datei: */
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non finibus lacus. Nam ullamcorper felis urna, in vestibulum enim semper euismod. Phasellus cursus gravida rhoncus. Cras et odio in tellus efficitur congue vitae ut eros. Sed non arcu vitae purus semper sagittis. Nullam ipsum arcu, rhoncus sed pharetra quis, porttitor quis tortor.</p>/* Your sheet CSS file: */
p {
column-count: 2;
}Sheet Configuration
{
"html": "pritablesheet.html",
"css": "pritablesheet.css",
"authors": "Roll20 Team (@roll20app)",
"roll20userid": "1",
"preview": "pritablesheet.png",
"instructions": "**Dieser Bogen eignet sich zum Ausdrucken**\n\nHier können Sie Markdown-formatierte Anweisungen einfügen, wie Sie den Bogen verwenden können.",
"legacy": false,
"printable": true
}Herzlichen Glückwunsch, du hast es geschafft
Zusätzliche Ressourcen
Herunterladbare ZIP-Datei