Questo documento non ha lo scopo di essere una guida tecnica completa su come rendere la tua scheda personaggio stampabile, ma piuttosto un riassunto delle cose che devi sapere.
A differenza di un libro, dove il designer ha il controllo totale sulla quantità di dati in una singola pagina, quando si tratta di pagine web e quindi di schede personaggio, il grado di controllo è molto più piccolo. Potremmo, ad esempio, avere una sezione con 4 elementi dinamicamente popolata in una scheda, mentre la stessa sezione in un'altra scheda ne ha 36. Oppure potremmo avere un'altra sezione in cui il giocatore elenca l'equipaggiamento che il suo personaggio sta trasportando.
I browser forniscono metodi per specificare come il contenuto viene suddiviso su più pagine; tuttavia, al momento attuale, sono lontani dalla perfezione, specialmente quando si tratta di utilizzare tecniche di layout più recenti come Flexbox e Grid.
Media Queries
Le media query ti consentono di applicare stili CSS in base al tipo generale di dispositivo o ad altre caratteristiche come la risoluzione dello schermo o la larghezza della finestra di visualizzazione del browser (1). Se la tua scheda non utilizza la modalità legacy, puoi utilizzare le media query per specificare condizionalmente gli stili che si applicheranno solo durante la stampa della tua scheda personaggio. Ecco un riassunto di come funziona:
/* Il tuo file CSS per il foglio: */
/* Regole al di fuori di qualsiasi media query si applicheranno a qualsiasi
Tipo di dispositivo */
.highlight {
font-size: 1rem;
}
@media print (orientation: landscape) {
/* Regole che avranno effetto solo durante la stampa del tuo foglio
in orientamento orizzontale. */
html {
Font-size: 12pt;
}
.highlight {
color: black;
font-weight: bold;
}
}
@media print (orientation: landscape) {
/* Regole che avranno effetto solo durante la stampa del tuo foglio
in modalità orizzontale. */
}
@media print (orientation: portrait) {
/* Regole che avranno effetto solo durante la stampa del tuo foglio
in modalità verticale. Questa è la modalità predefinita per la maggior parte delle stampanti */
}
@media screen {
/* Regole che avranno effetto solo quando si visualizza il tuo
personaggio su uno schermo (Computer, Mobile). */
html {
Font-size: 14px;
}
.highlight {
color: red;
}
}La regola di pagina
L'at-rule @page è un at-rule CSS utilizzato per modificare diversi aspetti di una proprietà di pagina stampata. Essa mira e modifica le dimensioni della pagina, l'orientamento della pagina e i margini (2).
/* Il tuo file CSS del foglio di stile: */
@page {
size: letter portrait; /* specifica che il foglio sarà stampato su formato lettera in orientamento verticale */
margin: 0.25in /* specifica un margine di pagina di 0,25 pollici */
}
La regola di pagina accetta i seguenti pseudo-selettori:
@page page :first { /* prima pagina del documento */ }
@page page :last { /* ultima pagina del documento */ }
@page page :left { /* pagine con numero pari */ }Interruzioni di pagina
All'inizio di questo articolo abbiamo menzionato che i browser ci offrono alcuni strumenti per controllare come il contenuto dovrebbe essere visualizzato su più pagine. Ecco alcune tecniche che puoi utilizzare per controllare il flusso di pagina sul tuo foglio:
/* Il tuo file HTML del foglio: */
<div class="section__container">
<h2 class="section__title">Sezione 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>Fig.1 - Nam ullamcorper felis</figcaption>
</figure>
</div>
<div class="section__container">
<h2 class="section__title">Sezione 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>Fig.2 - Lorem ipsum dolor sit amet</figcaption>
</figure>
</div>
/* Il tuo file CSS del foglio: */
.section__container {
/* Rende ogni sezione inizia su una nuova pagina */
break-before: page;
}
.section__thumbnail {
/* indica che, quando possibile, il browser dovrebbe evitare di dividere il contenuto all'interno della miniatura di sezione su più pagine. In questo modo la didascalia rimane vicina all'immagine pertinente. */
break-inside: avoid;
}Pensa come una stampante
Se sei arrivato fin qui dovresti avere una comprensione dei concetti di base necessari per rendere stampabile il tuo foglio del personaggio. Ottimo, ora arriva la parte più difficile: dimentica il modo in cui eri abituato a pensare ai fogli dei personaggi, non c'è un mouse o uno schermo touch coinvolto, tutte le interazioni vengono fatte con una matita e tecniche di origami (sebbene molto raramente). Ecco un paio di consigli di design che potrebbero esserti utili lungo il cammino:
Rendi il tuo foglio del personaggio responsivo. Questo ti aiuterà non solo a visualizzare il tuo foglio su diverse risoluzioni e dimensioni della finestra, ma anche quando devi stamparlo su diverse dimensioni di carta. Ricorda che le persone in tutto il mondo utilizzano diverse dimensioni di carta (Lettera, A4…), potrebbero anche volerlo stampare in orizzontale o addirittura impostare più fogli su una singola pagina per creare un riferimento rapido ai mostri, ad esempio.
Disattiva la modalità legacy. Se vuoi avere accesso a tutte le fantastiche funzionalità, dovrai aggiornare il tuo foglio agli standard attuali.
Nascondi le cose superflue. Il tuo foglio potrebbe contenere alcuni pulsanti di lancio senza alcuna informazione al loro interno, ad esempio. In tal caso, dovresti nasconderli poiché nessuno sarà in grado di utilizzarli. Lo stesso potrebbe essere detto per i controller delle sezioni ripetitive, i pulsanti delle macro, ecc.
Cambia lo stile di conseguenza. Ok, forse hai un pulsante di lancio che ha alcune informazioni utili al suo interno. In tal caso, stilizzalo in modo che rispecchi ciò. Invece di sembrare un elemento cliccabile, pensa a cosa avrebbe senso una volta stampato su un foglio di carta.
Lascia spazio per le note. Probabilmente le persone prenderanno appunti durante una sessione di gioco. Faresti bene ad inserire alcune righe vuote/spazio nella sezione dell'equipaggiamento del tuo foglio o forse dove i giocatori tengono traccia di quanta danneggiamento ha subito il loro personaggio.
Il bianco e nero è tuo amico. Non tutti hanno una stampante a colori. E alcuni che lo hanno preferiscono comunque stampare in bianco e nero. Anche se la maggior parte dei computer sarà in grado di convertire automaticamente il contenuto in scala di grigi, faresti meglio ad offrire una versione in bianco e nero del tuo contenuto. Specificando colori, bordi e immagini puoi assicurarti che il tuo foglio venga stampato con la giusta quantità di contrasto.
Fai attenzione alle dimensioni del carattere. Per garantire che il design di stampa sia accessibile a un vasto pubblico, ti consigliamo di utilizzare un carattere di dimensione 16.
Evita colori di sfondo e immagini. Per impostazione predefinita, i browser non le stamperanno. Gli utenti potrebbero optare manualmente per farlo ma tu preferiresti stare dalla parte sicura. Se hai davvero bisogno di utilizzare i colori e le immagini di sfondo CSS, dai un'occhiata alla proprietà CSS print-color-adjust (3). Anche se non completamente supportato, potrebbe aiutarti a ottenere ciò che stai cercando, specialmente in Chrome. Un altro approccio che potresti provare è quello di utilizzare immagini posizionate in modo assoluto o div con bordi di immagini.
Lunghezza equilibrata della linea. La lettura di una lunga linea di testo causa affaticamento: il lettore deve muovere la testa alla fine di ogni linea e cercare l'inizio della linea successiva. Una linea troppo corta spezza parole o frasi che vengono generalmente lette come un'unità (4). Per evitare ciò, dovresti cercare di rendere le tue linee tra i 45 e i 75 caratteri (inclusi spazi e punteggiatura) quando progetti per la stampa. Una cosa interessante che potresti provare è dividere dinamicamente il tuo contenuto in colonne multiple utilizzando la proprietà CSS column count:
/* Il tuo file HTML del foglio di stile: */
<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>/* Il tuo file CSS per il tuo foglio: */
p {
column-count: 2;
}Questo dividerà dinamicamente il contenuto del tuo paragrafo in due colonne. Funziona anche con contenuti nidificati come sezioni ripetute.
Espandi e comprimi il contenuto come necessario. Infine, molto spesso il tuo foglio personaggio avrà componenti pieghevoli che possono essere attivati per mostrare ulteriori informazioni su un tratto specifico di un personaggio. Quando si tratta di stampa, potresti voler ignorare come l'utente ha lasciato quelle sezioni sullo schermo e invece espanderle. Oppure potresti stampare solo il titolo e creare una nuova sezione, visibile solo durante la stampa, che può essere stampata su richiesta su una pagina separata.
Configurazione del foglio
L'ultimo passo per rendere il tuo foglio personaggio stampabile è farci sapere che il tuo foglio è stato progettato per essere stampabile. Per farlo, deve aggiungere una proprietà stampabile al suo file sheet.json e impostare il suo valore su true, come in questo caso:
{
"html": "pritablesheet.html",
"css": "pritablesheet.css",
"authors": "Roll20 Team (@roll20app)",
"roll20userid": "1",
"anteprima": "pritablesheet.png",
"istruzioni": "**Questo foglio è stampabile**\n\nPuò inserire qui le istruzioni formattate in Markdown per l'utilizzo del suo foglio.",
"legacy": false,
"printable": true
}Congratulazioni, ci sei riuscito
Ci auguriamo che questa breve linea guida le fornisca sufficienti spunti di riflessione per iniziare a progettare e codificare la versione stampata della sua scheda personaggio. Se ha domande o suggerimenti per migliorare questo articolo, ci scriva a un indirizzo da definire.
Prenditi cura e buona stampa!
Risorse aggiuntive
- 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 e 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
Downloadable ZIP
Abbiamo incluso un file ZIP che contiene vari file ed esempi dal foglio del personaggio D&D 5E di Roll20. Questo dovrebbe aiutare a fornire un contesto di utilizzo reale per la configurazione dei fogli stampabili!