Ce document ne vise pas à être un guide technique complet sur la façon de rendre votre fiche de personnage imprimable, mais plutôt un résumé des choses que vous devez savoir.
Contrairement à un livre, où le concepteur a un contrôle total sur la quantité de données dans une seule page, lorsqu'il s'agit de pages Web et donc de fiches de personnage, le degré de contrôle est beaucoup plus faible. Nous pourrions, par exemple, avoir une section dynamiquement peuplée dans une fiche avec 4 objets tandis que la même section dans une autre fiche aurait 36 objets. Ou nous pourrions avoir une autre section où le joueur liste l'équipement que son personnage transporte.
Les navigateurs offrent des méthodes permettant de spécifier comment le contenu est réparti sur plusieurs pages ; cependant, pour le moment, elles sont loin d'être parfaites, notamment lorsqu'il s'agit d'utiliser de nouvelles techniques de mise en page comme Flexbox et Grid.
Requêtes média
Les requêtes média vous permettent d'appliquer des styles CSS en fonction du type général de l'appareil ou d'autres caractéristiques telles que la résolution de l'écran ou la largeur de la fenêtre du navigateur (1). Si votre fiche n'utilise pas le mode legacy, vous pouvez utiliser des requêtes média pour spécifier de manière conditionnelle des styles qui ne s'appliqueront qu'à l'impression de votre fiche de personnage. Voici un résumé de son fonctionnement :
/* Votre feuille de style CSS : */
/* Les règles en dehors de toute requête média s'appliqueront à tout type d'appareil
*/
.highlight {
taille de police : 1rem;
}
@media print (orientation: paysage) {
/* Les règles qui ne s'appliqueront qu'à l'impression de votre feuille
en mode paysage. */
html {
Taille de police : 12pt;
}
.highlight {
couleur : noir;
graisse de police : bold;
}
}
@media print (orientation: paysage) {
/* Les règles qui ne s'appliqueront qu'à l'impression de votre feuille
en mode paysage. */
}
@media print (orientation: portrait) {
/* Les règles qui ne s'appliqueront qu'à l'impression de votre feuille
en mode portrait. C'est le mode par défaut pour la plupart des imprimantes */
}
@media screen {
/* Les règles qui ne s'appliqueront qu'à l'affichage de votre
personnage à l'écran (Ordinateur, Mobile). */
html {
Font-size: 14px;
}
.highlight {
color: red;
}
}La règle de la page
La règle @page est une pseudo-classe CSS utilisée pour modifier différentes propriétés d'une page imprimée. Elle cible et modifie les dimensions de la page, l'orientation de la page et les marges (2).
/* Votre fichier CSS de feuille : */
@page {
size: lettre portrait; /* spécifie que la feuille sera imprimée au format lettre en mode portrait */
margin: 0.25de; /* spécifie une marge de page de 0,25 pouce */
}
La règle de la page accepte les pseudo-sélecteurs suivants :
@page page :first { /* première page du document */ }
@page page :last { /* dernière page du document */ }
@page page :left { /* pages de nombre impair */ }Sauts de page
Au début de cet article, nous avons mentionné que les navigateurs nous offraient des outils pour contrôler la manière dont le contenu devrait être affiché sur plusieurs pages. Voici quelques techniques que vous pouvez utiliser pour contrôler le flux de la page sur votre feuille :
/* Votre fichier HTML de la feuille : */
<div class="section__container">
<h2 class="section__title">Section 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">Section 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>
/* Votre fichier CSS de fiche : */
.section__container {
/* Rend chaque section commence sur une nouvelle page */
break-before: page;
}
.section__thumbnail {
/* indique que chaque fois que possible, le navigateur devrait éviter de diviser le contenu à l'intérieur de la miniature de section sur plusieurs pages. De cette façon, la légende reste proche de l'image pertinente. */
break-inside: avoid;
}Pensez comme une imprimante
Si vous êtes arrivé jusque-là, vous devriez avoir une compréhension des concepts de base nécessaires pour rendre votre fiche de personnage imprimable. Super, maintenant vient la partie la plus difficile : oubliez la façon dont vous aviez l'habitude de penser aux fiches de personnage, il n'y a pas de souris ou d'écran tactile impliqués, toute l'interaction se fait avec un crayon et des techniques d'origami (bien que très rarement). Voici quelques conseils de conception qui pourraient vous aider en cours de route :
Rendez votre feuille de personnage réactive. Cela vous aidera non seulement à servir votre feuille sur différentes résolutions et tailles de fenêtre, mais aussi lorsque vous voudrez l'imprimer sur différentes tailles de papier. Rappelez-vous que les gens du monde entier utilisent différentes tailles de papier (Lettre, A4…), ils peuvent également vouloir l'imprimer en mode paysage ou même en configurant plusieurs feuilles sur une seule page pour créer une référence rapide aux monstres, par exemple.
Désactivez le mode hérité. Si vous souhaitez avoir accès à toutes les fonctionnalités intéressantes, vous devrez mettre à jour votre feuille aux normes actuelles.
Masquez les éléments inutiles. Votre feuille peut contenir quelques boutons de lancer de dés sans aucune information à l'intérieur, par exemple. Dans ce cas, vous devriez les masquer car personne ne pourra les utiliser. La même chose pourrait être dite pour les contrôleurs de section de répétition, les boutons de macro, etc.
Changez de style en conséquence. Bon, peut-être que vous avez un bouton de lancer de dés qui a des informations utiles à l'intérieur. Si c'est le cas, ajoutez du style pour le refléter. Au lieu de ressembler à un élément cliquable, réfléchissez à ce qui aurait du sens une fois imprimé sur une feuille de papier.
Laissez de l'espace pour les notes. Les gens prendront probablement des notes pendant une session de jeu. Tu ferais bien d'insérer quelques lignes vides dans la section équipement de ta feuille ou peut-être là où les joueurs suivent les dégâts subis par leur personnage.
Le noir et blanc est ton ami. Tout le monde n'a pas d'imprimante couleur. Et certains qui en ont préféreraient quand même imprimer en noir et blanc. Même si la plupart des ordinateurs seront capables de convertir automatiquement le contenu en niveaux de gris, tu ferais mieux d'offrir une version en noir et blanc de ton contenu. En spécifiant les couleurs, les bordures et les images, tu peux t'assurer que ta feuille sera imprimée avec le bon contraste.
Fait attention aux tailles de police. Pour garantir que le design imprimé soit accessible à un large public, nous recommandons d'utiliser une taille de police de 16 points.
Évite les couleurs de fond et les images. Les navigateurs ne les imprimeront pas par défaut. Les utilisateurs peuvent choisir de le faire manuellement, mais tu préférerais jouer la sécurité. Si vraiment vous avez besoin d'utiliser des couleurs et des images d'arrière-plan CSS, jetez un coup d'œil à la propriété CSS print-color-adjust (3). Bien que cela ne soit pas pleinement pris en charge, cela peut vous aider à obtenir ce que vous recherchez, en particulier dans Chrome. Une autre approche que vous pourriez essayer est d'utiliser des images positionnées absolument ou des div avec des bordures d'image.
Équilibrez la longueur de la ligne. Lire une longue ligne de texte fatigue : le lecteur doit bouger la tête à la fin de chaque ligne et chercher le début de la ligne suivante. Une ligne trop courte divise les mots ou les expressions qui sont généralement lus comme une unité (4). Pour éviter cela, vous devriez vous efforcer de rendre vos lignes entre 45 et 75 caractères (espaces et ponctuation compris) lors de la création pour l'impression. Une astuce sympa que vous pourriez essayer est de diviser dynamiquement votre contenu en plusieurs colonnes en utilisant la propriété CSS column count :
/*/ Votre fichier HTML de feuille : */
<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;
}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.
Sheet Configuration
The last step to make your character sheet printable is let us know that your sheet was designed to be print friendly. Pour ce faire, vous devez ajouter une propriété printable à votre fichier sheet.json et définir sa valeur à true, comme suit :
{
"html": "pritablesheet.html",
"css": "pritablesheet.css",
"authors": "Roll20 Team (@roll20app)",
"roll20userid": "1",
"preview": "pritablesheet.png",
"instructions": "**This sheet is print fiendlyt**\n\nYou can put Markdown-formatted instructions here for how to use your sheet.",
"legacy": false,
"printable": true
}Félicitations, tu l'as fait
Nous espérons que cette brève ligne directrice vous fournira suffisamment de matière à réflexion pour vous lancer dans la conception et la programmation de la version imprimée de votre feuille de personnage. Si vous avez des questions ou des suggestions pour améliorer cet article, envoyez-nous un message à une adresse à définir.
Prenez soin de vous et bonne impression !
Ressources complémentaires
- 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 et W. Bevington, "Designing with Type : A Basic Course in Typography" dans , New York:Watson-Guptill.
- https://developer.mozilla.org/en-US/docs/Web/CSS/column-count
ZIP téléchargeable
Nous avons inclus un fichier ZIP qui comprend divers fichiers et exemples de la feuille de personnage D&D 5E by Roll20. Cela devrait permettre de fournir un contexte d'utilisation réel pour la configuration des feuilles imprimables !