A Imprensa do Narrador: Um Guia Metodológico para Criar Documentos de TTRPG Estéticos e Modificáveis com o The Homebrewery

Introdução: A Arte do Documento Vivo

O narrador moderno de jogos de RPG de mesa enfrenta um mandato duplo: criar materiais que sejam tanto esteticamente cativantes para a imersão dos jogadores quanto dinamicamente estruturados para modificação fácil e imediata. Esse desafio dá origem ao conceito do “documento vivo” — um conjunto de notas de jogo, blocos de estatísticas de monstros ou cenários de campanha inteiros que são tão funcionais por trás do escudo do mestre quanto belos na tela. Alcançar esse equilíbrio exige um conjunto de ferramentas que una a simplicidade do texto simples com o poder estilístico do design web. O Homebrewery é uma plataforma de destaque projetada exatamente para esse propósito, utilizando a sintaxe Markdown e Folhas de Estilo em Cascata (CSS) para transformar arquivos de texto simples em documentos que rivalizam com a qualidade de produção das publicações oficiais.¹

Este relatório fornece um guia metodológico e exaustivo para dominar o The Homebrewery. Ele vai além de uma simples lista de funcionalidades para estabelecer um fluxo de trabalho prático para criar arquivos .md de nível profissional e altamente modificáveis. A análise começará estabelecendo uma base em Markdown limpo e de fácil manutenção, extraindo princípios da escrita técnica profissional. Em seguida, procederá a uma análise aprofundada do poderoso renderizador V3 do The Homebrewery, que oferece capacidades avançadas de layout por meio de uma sintaxe simplificada, reduzindo a dependência do pesado HTML.³ As seções subsequentes desmistificarão a estilização avançada com CSS, focando em técnicas que promovem flexibilidade e consistência temática, e sintetizarão esses elementos em uma metodologia passo a passo. Por fim, o relatório situará o The Homebrewery em seu ecossistema mais amplo, oferecendo uma análise comparativa com ferramentas semelhantes e direcionando o usuário para recursos comunitários essenciais para aprendizado contínuo e suporte. O foco principal ao longo do texto será o moderno renderizador V3, que representa um salto significativo na criação de documentos mais limpos, semânticos e, em última análise, mais sustentáveis para o narrador dedicado.

Seção 1: A Fundação - Dominando o Markdown para Clareza e Controle

A pedra angular da criação de um documento verdadeiramente modificável no The Homebrewery reside em um princípio articulado na especificação original do Markdown: a legibilidade do texto-fonte é primordial.⁶ Um documento Markdown bem formatado deve ser inteligível como texto simples, sem depender de sua aparência renderizada. Essa filosofia é a base para a manutenibilidade; um arquivo-fonte limpo e lógico é inerentemente mais fácil de atualizar, refatorar e reutilizar. Aderir às melhores práticas estabelecidas para o Markdown não é meramente uma escolha estilística, mas o primeiro e mais crítico passo na construção de uma biblioteca de conteúdo flexível e duradoura.

Melhores Práticas Estruturais

A estrutura de um documento é seu esqueleto. Uma estrutura lógica e consistente no texto-fonte garante tanto uma renderização previsível quanto facilidade de navegação para edições futuras.

Títulos: Um documento deve começar com um único Título de Nível 1 (# Título do Documento), que serve como o título para toda a obra. Seções subsequentes devem usar uma hierarquia lógica e superficial, geralmente não excedendo três níveis (## Seção, ### Subseção). Essa prática evita aninhamentos excessivamente complexos que podem tornar o documento difícil de ler e gerenciar.⁷ Para consistência e facilidade de manutenção, os títulos no estilo ATX (aqueles que começam com #) são fortemente preferidos em relação aos títulos no estilo Setext (que usam sublinhados === ou ---).⁶
Listas: Listas com marcadores (-, *) e numeradas (1.) são ferramentas essenciais para decompor informações complexas em segmentos escaneáveis e de fácil digestão.⁷ Ao aninhar listas, uma indentação consistente de quatro espaços é crucial para a renderização correta e para manter a legibilidade da estrutura do código-fonte.⁸
Parágrafos e Quebras de Linha: Um novo parágrafo é criado deixando uma linha em branco entre blocos de texto. Este é o método preferido para separar pensamentos distintos. Uma quebra de linha forçada, que inicia uma nova linha sem criar um novo parágrafo, pode ser alcançada adicionando dois espaços no final de uma linha ou, menos preferivelmente, usando a tag HTML <br>. O uso excessivo de quebras de linha forçadas deve ser evitado, pois o fluxo natural de parágrafos torna o texto mais fácil de editar e refatorar posteriormente.⁸

Melhores Práticas Semânticas

A marcação semântica envolve o uso da sintaxe para seu significado pretendido, o que torna o texto-fonte mais descritivo e o resultado final mais consistente.

Ênfase: Use asteriscos duplos (**texto**) para grande importância (negrito) e asteriscos únicos (*texto*) para ênfase (itálico). Eles devem ser usados para transmitir significado, não simplesmente para decoração; o uso excessivo diminui seu impacto.⁷ Embora os underscores também possam ser usados, os asteriscos são geralmente recomendados para compatibilidade, já que alguns processadores de Markdown lidam com underscores dentro de palavras de forma ambígua.⁹
Citações em Bloco (Blockquotes): O caractere > cria uma citação em bloco, que é semanticamente destinada a citar texto ou criar um bloco recuado e destacado. No Homebrewery, este elemento é frequentemente estilizado como caixas de nota ou outros elementos visuais distintos, mas seu propósito fundamental deve ser respeitado no texto-fonte.⁹
Blocos de Código: Blocos de código cercados, criados com três crases (), são o padrão para exibir texto pré-formatado, como instruções de linha de comando ou exemplos de código. É uma boa prática sempre declarar a linguagem após as crases de abertura (ex: ` css`) para habilitar o destaque de sintaxe e melhorar a clareza.⁸

Ao adotar esses princípios de guias de estilo profissionais, o narrador muda sua perspectiva: o arquivo-fonte .md não é mais um subproduto temporário do processo de criação de PDF, mas um ativo primário e de longo prazo. Essa abordagem disciplinada à higiene do código-fonte garante que o documento permaneça tão fácil de modificar em sua centésima revisão quanto foi na primeira, formando o núcleo de um fluxo de trabalho criativo verdadeiramente prático e sustentável.

Seção 2: O Motor V3 do The Homebrewery - Layout e Estrutura Avançados

O renderizador V3 do The Homebrewery marca uma evolução significativa em relação à sua contraparte legada, introduzindo uma sintaxe proprietária que permite layouts complexos e estruturação semântica sem recorrer a HTML bruto. Essa mudança é fundamental para a criação de documentos modificáveis. Onde o sistema legado frequentemente dependia de combinações não intuitivas de elementos Markdown para acionar estilos específicos, o V3 fornece uma sintaxe declarativa que torna o código-fonte mais limpo, legível e mais representativo da intenção do conteúdo.⁵ Dominar esses recursos específicos do V3 é essencial para desbloquear todo o potencial da plataforma.

O Poder das Chaves: Blocos e Spans do V3

A pedra angular da sintaxe V3 é o uso de chaves ({{...}}) como um substituto limpo e poderoso para as tags <div> e <span> do HTML.⁴ Isso permite a criação de elementos de nível de bloco e em linha com classes, IDs e propriedades CSS personalizadas diretamente no Markdown.

Elementos de Bloco: Um elemento de bloco é criado colocando as chaves de abertura {{ e fechamento }} em suas próprias linhas, envolvendo o conteúdo. As propriedades são listadas após a chave de abertura, separadas por vírgulas.

{{monster, #TrollBoss, background:lightgrey

## Chefe Troll
*Gigante grande, caótico e mau*
___
- **Classe de Armadura** 15 (armadura natural)
- **Pontos de Vida** 84 (8d10 + 40)

}}

Este código cria um bloco com a classe monster, o ID TrollBoss e um fundo cinza claro. Isso é muito mais semântico e legível do que o método legado de usar uma regra horizontal seguida por uma citação em bloco para criar um bloco de estatísticas de monstro.⁵

Spans em Linha: Um span em linha é criado envolvendo o texto e suas propriedades entre chaves em uma única linha. O conteúdo do span começa após o primeiro espaço que não está entre aspas.

Meu autor favorito é {{pen, #author, color:orange, "font-family:'ScalySans'" Brandon Sanderson.}}

Isso aplica a classe pen, o ID author e dois estilos CSS em linha ao nome do autor. Note o uso de aspas duplas para valores de propriedade que contêm espaços.⁴

Sintaxe de Injeção e Controle de Layout

Para aplicar estilos a elementos Markdown padrão ou controlar o fluxo do documento, o V3 fornece uma sintaxe adicional e simplificada.

Sintaxe de Injeção {...}: Chaves simples podem ser usadas para “injetar” propriedades no elemento Markdown imediatamente anterior. Para elementos de bloco como cabeçalhos, a injeção deve estar na linha diretamente seguinte. Para elementos em linha, deve estar na mesma linha.⁴

#### Um Cabeçalho Roxo
{color:purple, text-align:center}

Este é um _texto em itálico_{color:green} com um estilo injetado.

Layout e Espaçamento: O V3 substitui hacks de layout antigos e menos intuitivos por comandos simples.
- Quebras de Coluna e Página: Use \column para forçar o conteúdo para a próxima coluna e \page para iniciar uma nova página.⁴ Estes são comandos diretos que são mais claros e confiáveis do que usar blocos de código vazios ou outras soluções alternativas.¹¹
- Espaçamento Vertical: Uma linha contendo apenas um ou mais dois-pontos (:) criará um espaço vertical em branco. Este é um método muito mais limpo para ajustar o espaçamento do que inserir múltiplas tags <br>.⁴

Sintaxe Estendida para Tabelas Complexas

O Markdown padrão não suporta tabelas onde as células se estendem por múltiplas linhas ou colunas, uma necessidade para layouts complexos como as tabelas de classes de D&D.¹³ O renderizador V3 incorpora uma sintaxe de tabela estendida para resolver isso.

Expansão de Coluna (||): Para fazer uma célula se estender pela coluna adjacente, remova o espaço entre os caracteres de barra vertical (|) que as separam. A célula se expandirá para cobrir a coluna “removida”.¹³
Expansão de Linha (^): Para fazer uma célula se fundir com a célula diretamente acima dela, adicione um acento circunflexo (^) no final do conteúdo da célula, logo antes da barra vertical de fechamento.⁴

Esta sintaxe estendida permite a criação de tabelas intrincadas, como a tabela completa de características de classe abaixo, diretamente em Markdown:

Nível	Bônus de Proficiência	Características	Truques Conhecidos	Magias Conhecidas	— Espaços de Magia por Nível de Magia —
1º	+2	Conjuração, Recuperação Arcana	3	6	2	—	—	—	—	—	—	—	—
2º	+2	Tradição Arcana	3	8	3	—	—	—	—	—	—	—	—
3º	+2	—	3	11	4	2	—	—	—	—	—	—	—

A sintaxe do renderizador V3 representa uma mudança filosófica. Ao substituir truques de formatação ambíguos por estruturas declarativas e semânticas, ele encoraja o autor a descrever o significado de seu conteúdo, não apenas sua aparência. Isso resulta em um código-fonte que não é apenas mais limpo, mas também um modelo de dados mais preciso e robusto do mundo do jogo, tornando-o fundamentalmente mais fácil de gerenciar e modificar a longo prazo.

Seção 3: A Arte da Apresentação - Um Guia do Narrador para Estilização com CSS

Enquanto um arquivo Markdown bem estruturado fornece a fundação, as Folhas de Estilo em Cascata (CSS) são as ferramentas usadas para alcançar um documento final profissional e esteticamente agradável. O renderizador V3 do The Homebrewery fornece um ambiente dedicado para estilização personalizada que, quando usado estrategicamente, pode produzir resultados belíssimos sem sacrificar a modificabilidade do conteúdo subjacente. A chave para esse equilíbrio é a separação do estilo da estrutura e o uso de recursos modernos de CSS para criar designs flexíveis e temáticos.

O Editor de Estilo e os Seletores V3

A interface do The Homebrewery inclui um Editor de Estilo, acessível pelo ícone de pincel (), que é o local designado para todo o código CSS personalizado. Essa prática é crucial, pois separa as regras estilísticas (a apresentação) do Markdown (o conteúdo), o que é um princípio fundamental do design web de fácil manutenção.⁴

Uma distinção crítica para quem adapta código antigo da comunidade é a mudança no seletor CSS principal entre os renderizadores. No renderizador Legado, a maioria dos estilos era aplicada a elementos dentro de um pai que tinha a classe .phb. No renderizador V3, isso foi alterado para .page. Portanto, para mirar corretamente nos elementos no V3, as regras CSS devem ser prefixadas de acordo.⁵

Seletor Legado	Seletor V3	Descrição
`.phb h1`	`.page h1`	Mira no Título principal de Nível 1 em uma página.
`.phb.note`	`.page.note`	Mira em uma caixa de nota ou destaque padrão.
`.phb.monster-block`	`.page.monster`	Mira em um contêiner de bloco de estatísticas de monstro.
`.phb.classTable`	`.page.classTable`	Mira em uma tabela completa de características de classe.

Variáveis CSS: A Chave para Temas Modificáveis

A técnica mais poderosa para criar um documento flexível e facilmente modificável é o uso de Variáveis CSS. Elas permitem que um autor defina um valor (como uma cor ou tamanho de fonte) em um único lugar e o reutilize em toda a folha de estilo. Isso abstrai as decisões de design de sua implementação, tornando as mudanças visuais abrangentes simples e sem erros.¹⁵

As variáveis são tipicamente definidas dentro da pseudo-classe :root no Editor de Estilo, o que as torna globalmente disponíveis em todo o documento. A sintaxe usa um prefixo de dois traços (--nome-da-variavel).¹⁵

Por exemplo, um narrador pode criar um simples “painel de controle” temático no topo do seu Editor de Estilo:

CSS

/* Editor de Estilo V3 */
:root {
  --header-font: 'Nodesto Caps Condensed';
  --body-font: 'Bookinsanity';
  --theme-color-dark: #58180D;
  --theme-color-light: #FDF4E3;
  --note-background: #E8E5CE;
}

.page h1, .page h2, .page h3 {
  font-family: var(--header-font);
  color: var(--theme-color-dark);
}

.page {
  font-family: var(--body-font);
  background-color: var(--theme-color-light);
}

.page .note {
  background-color: var(--note-background);
}

Com essa estrutura, mudar todo o esquema de cores do documento de um tema “pergaminho” para um tema “modo escuro” requer a edição de apenas cinco definições de variáveis no bloco :root, em vez de procurar cada regra CSS individual. Isso torna o documento não apenas modificável, mas verdadeiramente temático.

Técnicas Avançadas de Imagem e Layout

Para alcançar um layout verdadeiramente profissional, no estilo de revista, o CSS oferece ferramentas poderosas para posicionar e mesclar imagens.

Posicionamento Absoluto: A propriedade position: absolute; remove uma imagem do fluxo normal do documento, permitindo que ela seja colocada em coordenadas precisas na página usando top, bottom, left e right. Esta é a principal técnica para sobrepor texturas de fundo, arte de personagens e elementos decorativos.¹⁶ A propriedade z-index pode ser usada para controlar a ordem de empilhamento desses elementos em camadas, com números mais altos aparecendo sobre os mais baixos.¹⁹
Mesclagem de Imagem: A propriedade mix-blend-mode permite que os pixels de uma imagem se misturem com os pixels dos elementos atrás dela. Definir mix-blend-mode: multiply; ou mix-blend-mode: darken; é uma técnica extremamente eficaz para fazer o fundo branco de uma arte de personagem desaparecer, mesclando-a perfeitamente em um fundo de pergaminho ou texturizado sem a necessidade de software de edição de imagem externo.¹⁶

Depuração com Ferramentas de Desenvolvedor do Navegador

Quando um estilo personalizado não é aplicado como esperado, muitas vezes é devido à especificidade do CSS. Uma regra mais específica na folha de estilo padrão do Homebrewery pode estar sobrepondo a regra personalizada. As Ferramentas de Desenvolvedor embutidas do navegador (acessadas pressionando F12 no Chrome) são um recurso indispensável para depurar esses problemas. Usando a ferramenta “Inspecionar” para selecionar um elemento na página renderizada, pode-se ver todas as regras CSS sendo aplicadas a ele, incluindo aquelas que foram sobrepostas. Isso permite ao autor entender a especificidade existente e construir uma nova regra mais específica em seu Editor de Estilo para alcançar o efeito desejado.³ Aprender este processo básico de depuração capacita o narrador a resolver seus próprios desafios de estilização e a obter controle total sobre a aparência de seu documento.

Seção 4: Uma Metodologia Prática para Criação Eficiente e Modificável

Possuir conhecimento de recursos individuais é diferente de ter um fluxo de trabalho eficaz. Para sintetizar os princípios do Markdown limpo, o poder do motor V3 e a flexibilidade do CSS moderno, é necessária uma abordagem estruturada e em camadas para a criação de documentos. Esta metodologia prioriza a modificabilidade a longo prazo, separando as preocupações centrais de conteúdo, estrutura, estilo e decoração, permitindo que cada uma seja alterada com impacto mínimo sobre as outras.

Passo 1: Conteúdo Primeiro (Estrutura Semântica): O processo de criação deve sempre começar com o próprio conteúdo. Todo o texto do documento — seja a história de um monstro, as características de uma classe ou a descrição de uma aventura — deve ser escrito primeiro em Markdown padrão e limpo. O foco nesta fase é puramente na clareza, organização lógica usando títulos e listas, e correção semântica. Nenhuma estilização complexa ou sintaxe específica do V3 deve ser usada neste ponto. Isso garante que o núcleo do documento seja sólido e legível em sua forma mais bruta.⁷
Passo 2: Utilize Snippets e Modelos: Para elementos comuns e estruturalmente complexos, os Snippets embutidos do The Homebrewery devem ser utilizados. Clicar em um snippet para um bloco de estatísticas de monstro, tabela de classe ou descrição de magia insere um modelo pré-formatado e estruturalmente correto no editor. Isso economiza tempo significativo e evita erros de sintaxe.⁴ Para projetos maiores, procurar modelos de alta qualidade da comunidade (como aqueles que imitam o estilo dos livros de referência oficiais) e usar o recurso “CLONE TO NEW” fornece um ponto de partida robusto.²²
Passo 3: Aplique a Estrutura V3: Com o conteúdo bruto no lugar, a próxima camada é a definição estrutural usando a sintaxe V3. Seções de texto são envolvidas em blocos V3 apropriados (ex: {{note...}}, {{monster...}}) para atribuir classes semânticas. O fluxo do documento é então gerenciado usando \page para quebras de página e \column para quebras de coluna. Este passo traduz o conteúdo bruto em um documento estruturado pronto para estilização.⁴
Passo 4: Construa uma Folha de Estilo Temática com Variáveis: Antes de escrever quaisquer regras de estilo específicas, o tema geral do documento deve ser definido no Editor de Estilo usando Variáveis CSS. Uma seção dedicada no topo da folha de estilo deve ser criada para abrigar todas as decisões de design globais: cores primárias e secundárias, fontes de título e corpo, estilos de borda e efeitos de sombra. Isso estabelece um “painel de controle” centralizado para toda a estética do documento.¹⁵
Passo 5: Estilize com Classes, Não em Linha: Com o tema definido por meio de variáveis, o próximo passo é escrever regras CSS que apliquem essas variáveis às classes definidas no Passo 3. Por exemplo, uma regra como .page .note { background-color: var(--note-background); } conecta um elemento estrutural a uma escolha temática. Estilos em linha (ex: style="...") devem ser evitados sempre que possível, pois são difíceis de gerenciar, sobrepor e atualizar. Centralizar os estilos no Editor de Estilo, mirando nas classes, garante consistência e manutenibilidade.²³
Passo 6: Integre a Arte como Decoração: A camada final é a decoração. Imagens, seja para texturas de fundo ou para fins ilustrativos, devem ser adicionadas por último. Usando position: absolute e mix-blend-mode, a arte pode ser sobreposta no documento para complementar o layout e o tema estabelecidos sem perturbar a estrutura de texto subjacente.¹⁷

Essa metodologia em camadas é a chave para alcançar os objetivos duplos do usuário. Ao separar as preocupações, ela cria um documento modular. O narrador pode editar livremente o conteúdo (Camada 1) sem medo de quebrar o layout. Ele pode mudar todo o tema visual (Camada 4) sem tocar no conteúdo ou na estrutura. Ele pode refatorar o layout (Camada 3) sem alterar o texto dentro dele. Essa modularidade é a expressão máxima de um documento “altamente modificável”, fornecendo um sistema robusto и eficiente para criar e manter materiais de jogo vivos.

Seção 5: O Ecossistema Mais Amplo - Homebrewery, GM Binder e Recursos da Comunidade

Para aproveitar ao máximo o The Homebrewery, é essencial entender sua posição no cenário mais amplo das ferramentas de criação de conteúdo de TTRPG e saber onde procurar por suporte da comunidade e aprendizado avançado. A escolha da plataforma é um investimento significativo de tempo e esforço, e o acesso a uma comunidade vibrante pode acelerar drasticamente o processo de aprendizado.

Análise Comparativa: The Homebrewery vs. GM Binder

O Homebrewery e o GM Binder são as duas plataformas mais proeminentes para criar documentos no estilo D&D usando Markdown. Embora compartilhem um objetivo comum e funcionalidades centrais semelhantes, suas filosofias de desenvolvimento e status atual divergiram significativamente.

Contexto Histórico e Funcionalidades: Ambas as plataformas fornecem um editor com visualização ao vivo que renderiza Markdown em um layout de duas colunas no estilo de livro de D&D.²⁶ Historicamente, o GM Binder era frequentemente percebido como mais amigável para iniciantes, oferecendo uma variedade maior de snippets embutidos e compatibilidade superior entre navegadores; por um tempo, o layout do Homebrewery era conhecido por ter problemas de renderização em navegadores que não fossem o Google Chrome.²⁷ O GM Binder também inclui um recurso “Converter do Homebrewery”, embora o processo nem sempre seja perfeito e possa exigir ajustes manuais, particularmente em relação a quebras de página, blocos de código e elementos posicionados de forma absoluta.²⁹
Estado Atual e Trajetória de Desenvolvimento: O sentimento recente da comunidade indica uma mudança crítica nas trajetórias das plataformas. O GM Binder é um projeto de código fechado, e os usuários relataram que seu desenvolvimento está em grande parte estagnado, com bugs permanecendo sem correção e falta de engajamento dos desenvolvedores.³¹ Por outro lado, o The Homebrewery é um projeto de código aberto com um ciclo de desenvolvimento ativo, evidenciado pelo lançamento do poderoso renderizador V3 e contribuições contínuas da comunidade.³⁰ Essa diferença é crucial para projetos de longo prazo. Escolher o The Homebrewery é uma decisão estratégica em favor de uma plataforma com um modelo de desenvolvimento mais transparente, ativo e à prova de futuro. Sua natureza de código aberto significa que a ferramenta pode ser sustentada pela própria comunidade, oferecendo um nível de longevidade que uma ferramenta proprietária de código fechado não pode garantir.³³

Recursos Essenciais da Comunidade

O The Homebrewery é apoiado por uma comunidade robusta e experiente que fornece suporte, tutoriais e inspiração inestimáveis. Engajar-se com esses recursos é uma parte fundamental para dominar a plataforma.

O Subreddit r/homebrewery: Este é o principal hub da comunidade para a plataforma. É o melhor lugar para pedir ajuda com desafios específicos de formatação, compartilhar criações para feedback e descobrir novas técnicas e guias compartilhados por outros usuários.³ Antes de postar uma nova pergunta, é altamente recomendável pesquisar o histórico do subreddit, pois muitos problemas comuns já foram resolvidos e documentados.
Repositório Oficial no GitHub: Para aqueles interessados no lado técnico da plataforma, o repositório oficial no GitHub é a fonte definitiva para documentação oficial, acompanhamento das últimas atualizações através do changelog e envio formal de relatórios de bugs ou solicitações de funcionalidades.³³
Guias e Exemplos Curados: A comunidade produziu vários guias de alta qualidade que servem como excelentes ferramentas de aprendizado. De nota particular são o Homebrewery Formatting Guide - V3 Renderer Edition pelo usuário AeronDrake, que é frequentemente recomendado para novos usuários se adaptando à sintaxe V3, e a extensa coleção de “brews” públicos pelo usuário Gazook89, que demonstram uma ampla gama de técnicas avançadas de CSS e layout.³ Estudar o código-fonte desses e de outros “brews” compartilhados é uma das maneiras mais eficazes de aprender formatação avançada.

Apêndice: Biblioteca de Códigos de Referência Rápida

Este apêndice fornece uma coleção concisa de trechos de código comuns para o renderizador V3 do The Homebrewery, projetado para referência rápida.

Sintaxe V3

Elemento de Bloco com Classe e ID:

{{minha-classe, #meu-id

Este é o conteúdo do bloco.

}}

Span em Linha com CSS:

Este texto contém um {{color:red, "font-weight:bold" span estilizado}}.

Injeção em um Título:

### Subtítulo Centralizado
{text-align:center}

Controle de Layout

Nova Página:

\page
Quebra de Coluna:

\column
Espaço Vertical (3 linhas):

:
:
:

Tabelas Avançadas

Tabela com Expansão de Coluna e Linha:

Cabeçalho 1	Cabeçalho Expandido
Célula A1	Célula B1	Célula C1
Célula A2 ^	Célula B2	Célula C2

Trechos de CSS (para o Editor de Estilo)

Definição de Variável CSS:

CSS

:root {
  --main-color: #8B4513;
  --main-font: 'Bookinsanity';
}

Usando uma Variável CSS:

CSS

.page h2 {
  color: var(--main-color);
  font-family: var(--main-font);
}

Mirando em um Bloco de Nota V3:

CSS

.page .note {
  background-image: url('url_da_sua_textura.png');
}

Formatação de Imagem

Imagem de Fundo com Posição Absoluta:
Arte de Personagem Mesclada (Canto Inferior Direito):

{
  position:absolute,
  bottom:50px,
  right:50px,
  width:300px,
  mix-blend-mode:multiply
}

DM Yan

Mestre Cronista

Explorador

Homebrewery - Guia para Criar Documentos de TTRPG Estéticos