Este documento no tiene como objetivo ser una guía técnica completa sobre cómo hacer que tu hoja de personaje sea imprimible, sino más bien un resumen de las cosas que necesitas saber.
A diferencia de un libro, donde el diseñador tiene un control total sobre la cantidad de datos en una sola página, al tratar con páginas web y, por lo tanto, hojas de personaje, el grado de control es mucho menor. Podríamos, por ejemplo, tener una sección dinámicamente poblada en una hoja con 4 elementos mientras que la misma sección en otra hoja tiene 36 elementos. O podríamos tener otra sección donde el jugador lista el equipo que su personaje lleva consigo.
Los navegadores proporcionan métodos para especificar cómo se distribuye el contenido en múltiples páginas; sin embargo, en el momento actual, están lejos de ser perfectos, especialmente cuando se trata de utilizar técnicas de diseño más modernas como Flexbox y Grid.
Consultas de medios
Las consultas de medios te permiten aplicar estilos CSS dependiendo del tipo general de dispositivo u otras características como la resolución de pantalla o el ancho de la ventana del navegador (1). Si tu hoja no está utilizando el modo heredado, puedes usar consultas de medios para especificar estilos condicionalmente que solo se aplicarán al imprimir tu hoja de personaje. Aquí tienes un resumen de cómo funciona esto:
/* Tu archivo CSS de hoja: */
/* Reglas fuera de cualquier consulta de medios se aplicarán en cualquier
Tipo de dispositivo*/
.resaltar {
tamaño de fuente: 1rem;
}
@media print (orientación: horizontal) {
/* Reglas que solo tendrán efecto al imprimir tu hoja
en orientación horizontal. */
html {
Tamaño de fuente: 12pt;
}
.resaltar {
color: negro;
peso de fuente: negrita;
}
}
@media print (orientación: horizontal) {
/* Reglas que solo tendrán efecto al imprimir tu hoja
en modo horizontal. */
}
@media print (orientación: vertical) {
/* Reglas que solo tendrán efecto al imprimir tu hoja
en modo vertical. Este es el modo predeterminado para la mayoría de las impresoras */
}
@media pantalla {
/* Reglas que solo tendrán efecto al ver tu
personaje en una pantalla (computadora, móvil). */
html {
Tamaño de fuente: 14px;
}
.highlight {
color: rojo;
}
}La regla de página
El @page es una regla de CSS utilizada para modificar diferentes aspectos de una propiedad de página impresa. Se dirige y modifica las dimensiones de la página, la orientación de la página y los márgenes (2).
/* Tu archivo CSS de hoja: */
@page {
tamaño: carta vertical; /* especifica que la hoja se imprimirá en tamaño carta en orientación vertical */
margen: 0.25 pulgadas /* especifica un margen de página de 0.25 pulgadas */
}
La regla de página acepta los siguientes pseudo-selectores:
@page page :first { /* primera página del documento */ }
@page page :last { /* última página del documento */ }
@page page :left { /* páginas de número par */ }Saltos de página
Al comienzo de este artículo mencionamos que los navegadores nos ofrecen algunas herramientas para controlar cómo se debe mostrar el contenido en varias páginas. Aquí hay algunas técnicas que puedes usar para controlar el flujo de la página en tu hoja:
/* Tu archivo HTML de hoja: */
<div class="section__container">
<h2 class="section__title">Sección 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">Sección 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>
/* Tu archivo CSS de hoja: */
.section__container {
/* Hace que cada sección comience en una nueva página */
break-before: page;
}
.section__thumbnail {
/* indica que siempre que sea posible, el navegador debe evitar dividir el contenido dentro de la miniatura de la sección en varias páginas. De esta manera, la leyenda se mantiene cerca de la imagen relevante. */
break-inside: avoid;
}Piensa como una impresora
Si has llegado hasta aquí, deberías tener una idea de los conceptos básicos necesarios para hacer que tu hoja de personaje sea imprimible. Genial, ahora viene la parte más difícil: olvida la forma en que solías pensar en las hojas de personaje, no hay ratón ni pantalla táctil involucrados, toda la interacción se hace con un lápiz y técnicas de origami (aunque muy raramente). Aquí tienes un par de consejos de diseño que pueden ayudarte en el camino:
Haz que tu hoja de personaje sea adaptable. Esto te ayudará no solo a mostrar tu hoja en diferentes resoluciones y tamaños de ventana, sino también cuando necesites imprimirla en diferentes tamaños de papel. Recuerda que en todo el mundo se utilizan diferentes tamaños de papel (Carta, A4…), también pueden querer imprimirlo en horizontal o incluso configurar varias hojas en una sola página para crear una referencia rápida de monstruos, por ejemplo.
Desactiva el modo heredado. Si quieres tener acceso a todas las características geniales, necesitarás actualizar tu hoja a los estándares actuales.
Oculta cosas innecesarias. Tu hoja puede contener algunos botones de tirada sin ninguna información en su interior, por ejemplo. Si ese es el caso, deberías ocultarlos ya que nadie podrá usarlos. Lo mismo podría decirse de los controladores de secciones repetitivas, botones de macros, etc.
Cambia el estilo en consecuencia. Vale, tal vez tienes un botón de tirada que tiene información útil en su interior. Si ese es el caso, dale estilo para reflejar eso. En lugar de parecer un elemento clickeable, piensa en qué tendría sentido una vez impreso en una hoja de papel.
Deja espacio para notas. Es probable que las personas tomen notas durante una sesión de juego. Sería bueno insertar algunas líneas en blanco / espacio en la sección de equipo de tu hoja o tal vez donde los jugadores rastrean cuánto daño ha sufrido su personaje.
El blanco y negro es tu amigo. No todos tienen una impresora a color. Incluso aquellos que tienen una todavía preferirían imprimir en blanco y negro. Aunque la mayoría de las computadoras podrán convertir automáticamente el contenido a escala de grises, sería mejor ofrecer una versión en blanco y negro de tu contenido. Al especificar colores, bordes e imágenes, puedes asegurarte de que tu hoja se imprima con la cantidad correcta de contraste.
Ten cuidado con los tamaños de fuente. Para asegurar que el diseño de impresión sea accesible para un amplio público, recomendamos utilizar un tamaño de fuente de 16 puntos.
Evita los colores de fondo e imágenes. Por defecto, los navegadores no imprimirán esos elementos. Los usuarios pueden optar por hacerlo manualmente, pero es mejor estar del lado seguro. Si realmente necesitas usar colores e imágenes de fondo CSS, echa un vistazo a la propiedad css print-color-adjust (3). Aunque no está completamente soportado, puede ayudarte a lograr lo que estás buscando, especialmente en Chrome. Otro enfoque que podrías intentar es usar imágenes posicionadas absolutamente o div con bordes de imagen.
Longitud de línea de equilibrio. Leer una línea larga de texto causa fatiga: el lector debe mover la cabeza al final de cada línea y buscar el comienzo de la siguiente línea. Una línea demasiado corta rompe palabras o frases que normalmente se leen como una unidad (4). Para evitar esto, debes esforzarte por hacer que tus líneas tengan entre 45 y 75 caracteres (incluyendo espacios y puntuación) cuando diseñes para imprimir. Una cosa genial que podrías intentar es dividir dinámicamente tu contenido en múltiples columnas usando la propiedad css column count:
/* Tu archivo HTML de hoja: */
<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>/* Tu archivo CSS de hoja: */
p {
column-count: 2;
}Esto dividirá tu contenido de párrafo dinámicamente en dos columnas. También funciona con contenido anidado como secciones repetitivas.
Expandir y contraer contenido según sea necesario. Por último, muchas veces tu hoja de personaje tendrá componentes plegables que se pueden alternar para mostrar más información sobre un rasgo específico de un personaje. Cuando se trata de imprimir, es posible que desees ignorar cómo el usuario dejó esas secciones en la pantalla y expandirlas en su lugar. O tal vez podrías imprimir solo el título y crear una nueva sección, visible solo al imprimir, que se pueda imprimir a pedido en una página separada.
Configuración de la Hoja
El último paso para hacer que tu hoja de personaje sea imprimible es hacernos saber que fue diseñada para ser amigable con la impresión. Para ello, debe añadir una propiedad imprimible a su archivo sheet.json y establecer su valor en verdadero, tal y como se muestra a continuación:
{
"html": "pritablesheet.html",
"css": "pritablesheet.css",
"authors": "Equipo de Roll20 (@roll20app)",
"roll20userid": "1",
"preview": "pritablesheet.png",
"instructions": "**Esta hoja es amigable para imprimir**\n\nPuedes poner instrucciones en formato Markdown aquí sobre cómo usar tu hoja.",
"legacy": false,
"printable": true
}¡Felicidades, lo lograste!
Esperamos que esta breve guía te brinde suficiente material para reflexionar y comenzar a diseñar y codificar la versión impresa de tu hoja de personaje. Si tienes alguna pregunta o sugerencia para mejorar este artículo, escríbenos a una dirección a definir.
¡Cuídate y feliz impresión!
Recursos adicionales
- 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 y W. Bevington, "Diseñando con Tipografía: Un Curso Básico de Tipografía" en , Nueva York: Watson-Guptill.
- https://developer.mozilla.org/en-US/docs/Web/CSS/column-count
ZIP descargable
Hemos incluido un archivo ZIP que incluye varios archivos y ejemplos de la hoja de personaje de D&D 5E de Roll20. ¡Esto debería ayudar a proporcionar algún contexto de uso real para configurar hojas imprimibles!