Este documento não tem como objetivo ser um guia técnico completo sobre como tornar sua ficha de personagem imprimível, mas sim um resumo das coisas que você precisa saber.
Ao contrário de um livro, onde o designer tem total controle da quantidade de dados em uma única página, ao lidar com páginas da web e, portanto, fichas de personagem, o grau de controle é muito menor. Poderíamos, por exemplo, ter uma seção dinamicamente preenchida em uma ficha com 4 itens enquanto a mesma seção em outra ficha tem 36 itens. Ou poderíamos ter outra seção onde o jogador lista o equipamento que seu personagem está carregando.
Os navegadores fornecem métodos para especificar como o conteúdo é dividido em várias páginas; no entanto, no momento atual, eles estão longe de serem perfeitos, especialmente quando se trata de usar técnicas de layout mais recentes, como Flexbox e Grid.
Consultas de Mídia
As consultas de mídia permitem que você aplique estilos CSS dependendo do tipo geral do dispositivo ou de outras características, como resolução de tela ou largura da janela do navegador (1). Se sua ficha não estiver usando o modo legado, você pode usar consultas de mídia para especificar estilos condicionalmente que só serão aplicados ao imprimir sua ficha de personagem. Aqui está um resumo de como isso funciona:
/* Seu arquivo CSS de folha: */
/* Regras fora de qualquer consulta de mídia serão aplicadas em qualquer tipo de dispositivo
*/
.destaque {
tamanho da fonte: 1rem;
}
@media print (orientação: paisagem) {
/* Regras que só terão efeito ao imprimir sua folha
na orientação paisagem. */
html {
tamanho da fonte: 12pt;
}
.destaque {
cor: preto;
font-weight: bold;
}
}
@media print (orientação: paisagem) {
/* Regras que só terão efeito ao imprimir sua folha
em modo paisagem. */
}
@media print (orientação: retrato) {
/* Regras que só terão efeito ao imprimir sua folha
em modo retrato. Este é o modo padrão para a maioria das impressoras */
}
@media screen {
/* Regras que só terão efeito ao ver seu
personagem em uma tela (computador, celular). */
html {
Font-size: 14px;
}
.highlight {
color: red;
}
}The Page Rule
A regra @page é uma regra CSS usada para modificar diferentes aspectos de uma propriedade de página impressa. Ele direciona e modifica as dimensões da página, orientação da página e margens (2).
/* Seu arquivo CSS de folha: */
@page {
size: carta retrato; /* especifica que a folha será impressa no tamanho carta em orientação retrato */
margin: 0.25in /* especifica uma margem de página de 0,25 polegadas */
}
A regra de página aceita os seguintes pseudo-seletores:
@page page :first { /* primeira página do documento */ }
@page page :last { /* última página do documento */ }
@page page :left { /* páginas com número par */ }Quebras de Página
No início deste artigo mencionamos que os navegadores nos oferecem algumas ferramentas para controlar como o conteúdo deve ser exibido em várias páginas. Aqui estão algumas técnicas que você pode usar para controlar o fluxo da página em sua folha:
/* Seu arquivo HTML da folha: */
<div class="section__container">
<h2 class="section__title">Seção 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">Seção 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>
/* Seu arquivo CSS da folha: */
.section__container {
/* Faz com que cada seção comece em uma nova página */
break-before: page;
}
.section__thumbnail {
/* indica que, sempre que possível, o navegador deve evitar dividir o conteúdo dentro da miniatura da seção em várias páginas. Dessa forma, a legenda fica próxima à imagem relevante. */
break-inside: avoid;
}Pense como uma impressora
Se você chegou até aqui, deve ter uma compreensão dos conceitos básicos necessários para tornar sua folha de personagem imprimível. Ótimo, agora vem a parte mais difícil: esqueça a forma como você costumava pensar em fichas de personagem, não há mouse ou tela sensível ao toque envolvidos, toda a interação é feita com um lápis e técnicas de origami (embora muito raramente). Aqui estão algumas dicas de design que podem ajudá-lo no caminho:
Faça sua ficha de personagem responsiva. Isso irá ajudá-lo não apenas a servir sua ficha em diferentes resoluções e tamanhos de janela, mas também quando se trata de imprimi-la em diferentes tamanhos de papel. Lembre-se de que as pessoas ao redor do mundo usam diferentes tamanhos de papel (Carta, A4…), elas também podem querer imprimi-lo em modo paisagem ou até mesmo configurar várias fichas em uma única página para criar uma referência rápida de monstros, por exemplo.
Desative o modo legado. Se você deseja ter acesso a todos os recursos legais, precisará atualizar sua ficha para os padrões atuais.
Oculte coisas desnecessárias. Sua ficha pode conter alguns botões de rolagem sem nenhuma informação dentro deles, por exemplo. Se esse for o caso, você deve ocultá-los, pois ninguém poderá usá-los. O mesmo poderia ser dito para os controladores de seção repetitiva, botões de macro, etc.
Altere o estilo de acordo. Ok, talvez você tenha um botão de rolagem que tenha algumas informações úteis dentro dele. Se esse for o caso, estilize-o para refletir isso. Em vez de parecer um elemento clicável, pense no que faria sentido uma vez impresso em um pedaço de papel.
Deixe espaço para anotações. As pessoas provavelmente estarão fazendo anotações durante uma sessão de jogo. Você faria bem em inserir algumas linhas em branco/espaço na seção de equipamentos da sua ficha ou talvez onde os jogadores acompanham quanto dano o personagem deles sofreu.
Preto e branco é seu amigo. Nem todos têm uma impressora colorida. E alguns que têm ainda prefeririam imprimir em preto e branco. Embora a maioria dos computadores seja capaz de converter automaticamente o conteúdo em escala de cinza, você faria melhor oferecendo uma versão em preto e branco do seu conteúdo. Ao especificar cores, bordas e imagens, você pode garantir que sua ficha seja impressa com a quantidade certa de contraste.
Tenha cuidado com os tamanhos de fonte. Para garantir que o design de impressão seja acessível a um amplo público, recomendamos utilizar um tamanho de fonte de 16 pontos.
Evite cores de fundo e imagens. Por padrão, os navegadores não imprimirão esses elementos. Os usuários podem optar por fazer isso manualmente, mas você prefere estar seguro. Se você realmente precisa usar cores de fundo e imagens CSS, dê uma olhada na propriedade CSS de ajuste de cor de impressão (3). Embora não seja totalmente suportado, pode ajudar a alcançar o que você está procurando, especialmente no Chrome. Outra abordagem que você poderia tentar é usar imagens posicionadas absolutamente ou div com bordas de imagens.
Comprimento da linha de equilíbrio. Ler uma linha longa de texto causa fadiga: o leitor deve mover a cabeça no final de cada linha e procurar o início da próxima linha. Uma linha muito curta divide palavras ou frases que geralmente são lidas como uma unidade (4). Para evitar isso, você deve se esforçar para tornar suas linhas entre 45 e 75 caracteres (incluindo espaços e pontuação) ao projetar para impressão. Uma coisa legal que você poderia tentar é dividir dinamicamente seu conteúdo em várias colunas usando a propriedade de contagem de colunas CSS:
/* Seu arquivo HTML de folha: */
<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>/* Seu arquivo CSS de folha: */
p {
column-count: 2;
}Isso dividirá dinamicamente o conteúdo do seu parágrafo em duas colunas. Também funciona com conteúdo aninhado, como seções repetidas.
Expandir e recolher o conteúdo conforme necessário. Por último, mas não menos importante, muitas vezes sua ficha de personagem terá componentes recolhíveis que podem ser alternados para mostrar mais informações sobre um traço específico de um personagem. Quando se trata de impressão, você pode querer ignorar como o usuário deixou essas seções na tela e expandi-las em vez disso. Ou talvez você possa imprimir apenas o título e criar uma nova seção, visível apenas durante a impressão, que pode ser impressa sob demanda em uma página separada.
Configuração de Ficha
A última etapa para tornar sua ficha de personagem impressa é nos informar que sua ficha foi projetada para ser amigável à impressão. Para o fazer, tem de adicionar uma propriedade printable ao seu ficheiro sheet.json e definir o seu valor para true, da seguinte forma:
{
"html": "pritablesheet.html",
"css": "pritablesheet.css",
"authors": "Equipa Roll20 (@roll20app)",
"roll20userid": "1",
"preview": "pritablesheet.png",
"instruções": "**Esta folha é para impressão**\n\nPode colocar aqui instruções formatadas em Markdown sobre como utilizar a sua folha.",
"legacy": false,
"printable": true
}Parabéns, você conseguiu
Esperamos que estas breves orientações lhe dêem o que pensar para começar a conceber e a codificar a versão impressa da sua ficha de personagem. Se tiver alguma dúvida ou sugestão para melhorar este artigo, envie-nos uma mensagem para um endereço a definir.
Cuide-se e boa impressão!
Recursos adicionais
- 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" em , Nova York: Watson-Guptill.
- https://developer.mozilla.org/en-US/docs/Web/CSS/column-count
ZIP para download
Incluímos um arquivo ZIP que contém vários arquivos e exemplos da ficha de personagem D&D 5E do Roll20. Isso deve ajudar a fornecer algum contexto de uso real para configurar folhas imprimíveis!