Documentation menu

Bloco Fórmula

Notação matemática e científica — frações, expoentes, subscritos, letras gregas e fórmulas químicas via \ce{...} — renderizada no servidor como uma imagem com alt text real, já que nenhum cliente de e-mail tipografa matemática de verdade.

Como funciona

O bloco recebe uma pequena string de notação estilo LaTeX (por exemplo, \frac{-b \pm \sqrt{b^2-4ac}}{2a}) e a renderiza no servidor para um PNG através de GET /api/formula. Esse é um endpoint assinado construído sobre as mesmas primitivas de raster/codificação PNG feitas do zero que os blocos de gráfico de análises já usam: não há biblioteca de matemática no lado do cliente envolvida, nunca, e nenhuma dependência npm por trás do renderizador.

O conteúdo de uma fórmula é fixo uma vez autorado, diferente do GIF do cronômetro de contagem regressiva, que precisa ser regenerado a cada visualização para permanecer ao vivo. Então toda a requisição de renderização (notação, modo de exibição, cor) é assinada na própria URL, e o endpoint não precisa de leitura no Firestore — a resposta carrega um cabeçalho de cache imutável de longa duração.

A sintaxe de notação cobre frações, expoentes (^), subscritos (_), raízes quadradas, letras gregas, funções nomeadas (\sin, \lim, \log, entre outras), símbolos de conjunto/lógica (\forall, \in, \cup, \neg, entre outros) e operadores comuns. \left(/\right( são reconhecidos, mas renderizados em tamanho normal em vez de escalados automaticamente ao seu conteúdo, já que este é um pequeno renderizador de bitmap, não um mecanismo TeX completo. \text{...} volta a palavras simples no meio da fórmula para rotular um termo.

Fórmulas químicas têm sua própria macro \ce{...}: um pequeno subconjunto estilo mhchem. Contagens de elementos ganham subscrito automático (H2O é renderizado com um subscrito 2), cargas iônicas finais ganham sobrescrito automático (H3O+, SO4^2-), e -> é renderizado como uma seta de reação. Isso significa que \ce{2H2 + O2 -> 2H2O} não exige que você escreva ^/_ à mão para cada contagem de átomo e carga.

Sintaxe que o parser não reconhece — documentos LaTeX completos, pacotes, matrizes, tabelas — nunca quebra o envio. Ela degrada para renderizar a string de notação bruta como texto literal simples. Essa garantia é reforçada em duas camadas: o próprio parser degrada macros desconhecidas para texto literal, e a chamada mais externa do renderizador nunca lança erro mesmo em um caso extremo de layout.

A imagem é diagramada em uma escala apropriada ao seu modo de exibição: maior para Block, menor para Inline. Ela reduz automaticamente se ultrapassar o orçamento de tamanho seguro para e-mail. A maioria das fórmulas se encaixa na primeira tentativa; só uma expressão incomumente longa precisa de uma escala menor, e uma patológica se fixa na escala mínima em vez de entrar em loop infinito.

O <img> renderizado carrega atributos explícitos width/height dimensionados a partir dessa passagem de layout, para que o Outlook e outros clientes não sofram reflow ao carregar a imagem. Fundamentalmente, ele também carrega um atributo alt definido como a própria string de notação bruta. Uma fórmula nunca fica presa dentro de uma figura sem um equivalente textual para um cliente que bloqueia imagens ou um leitor de tela que não consegue interpretar um bitmap.

Campos configuráveis:

  • Notation (LaTeX-like) — o texto da fórmula, limitado a 300 caracteres (um valor além do limite é silenciosamente truncado antes da renderização, nunca quebra o envio).
  • Display mode — Inline (pequeno, fica dentro de uma linha de texto) ou Block (maior, em sua própria linha).
  • Alignment — Left, Center ou Right (em efeito apenas no modo Block).
  • Color — a cor do traço da notação; um valor inválido ou vazio volta ao padrão quase preto próprio do renderizador em vez de chegar ao endpoint assinado com um valor que ele rejeitaria.
  • Background color, padding, border e border radius no cartão.

Uma notação vazia não renderiza nada, em vez de uma imagem vazia — o bloco simplesmente não emite se não houver texto para tipografar.

Sintaxe suportada

Todo exemplo abaixo é uma imagem assinada real e ao vivo do próprio endpoint /api/formula, não uma simulação, então o que você vê aqui é exatamente o que a caixa de entrada de um destinatário renderiza. Qualquer coisa que não esteja nesta lista (documentos LaTeX completos, pacotes, matrizes, tabelas, acentos como \bar/\hat, reticências como \dots) não é reconhecida. Ela é renderizada literalmente como seu próprio texto digitado em vez de quebrar o envio, então geralmente fica óbvio em uma prévia que uma macro não é suportada.

Fractions

\frac{a+b}{c-d}
\frac{a+b}{c-d}

Exponents and subscripts

a_n = a_1 + (n-1)d
a_n = a_1 + (n-1)d

Square roots, nested with a fraction

\sigma = \sqrt{\frac{1}{n}\sum (x_i - \mu)^2}
\sigma = \sqrt{\frac{1}{n}\sum (x_i - \mu)^2}

The quadratic formula — fractions, ±, and a square root together

x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}
x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}

Greek letters

\Delta = b^2 - 4ac
\Delta = b^2 - 4ac

Named functions and limits (upright, not italicized)

\lim_{x \to 0} \frac{\sin x}{x} = 1
\lim_{x \to 0} \frac{\sin x}{x} = 1

Set and logic symbols

\forall x \in S,\ x^2 \geq 0
\forall x \in S,\ x^2 \geq 0

\left(/\right) delimiters — recognized, but not auto-scaled to their contents

y = \left(x+1\right)^2
y = \left(x+1\right)^2

\text{...} for a label mid-formula

d = 5\text{ mi}
d = 5\text{ mi}

Chemical formulas via \ce{...} — auto-subscripted atom counts, a reaction arrow

\ce{2H2 + O2 -> 2H2O}
\ce{2H2 + O2 -> 2H2O}

\ce{...} — auto-superscripted ionic charges

\ce{SO4^2-}
\ce{SO4^2-}

Exemplos

Subject

This week in study group: the quadratic formula

Um e-mail de recapitulativo de aula de química tipografa uma reação balanceada dentro de uma frase: "Fotossíntese: \ce{6CO2 + 6H2O -> C6H12O6 + 6O2}" logo ao lado de um texto explicativo. Veja Educação para saber como o Fórmula se encaixa ao lado de Tarefa, Quiz e Baralho de flashcards em um resumo de sala de aula. Uma lista de exercícios de física coloca a fórmula quadrática em modo Block como sua própria linha, em tamanho maior e centralizada, antes de um exemplo resolvido. Um boletim de estatística usa uma fórmula inline curta como \mu = \frac{\sum x_i}{n} no meio de uma frase sem quebrar o fluxo do parágrafo ao redor. Note que é \mu, não \bar{x}: macros de acento como \bar/\hat não estão na lista de sintaxe suportada acima, então uma letra grega simples é a alternativa segura para uma média onde uma é necessária.

Como é o fallback estático

<div style="margin:8px 0;text-align:left">
  <img src="https://mailinapp.com/api/formula?d=eyJub3RhdGlvbiI6...&s=abc123..."
       width="184" height="52" alt="E = mc^2"
       style="display:inline-block;max-width:100%;height:auto;vertical-align:middle" />
</div>

Há apenas um nível de renderização — um <img> assinado cujo texto alt sempre carrega a string exata da notação, para que a fórmula ainda comunique mesmo onde a própria imagem não carrega.

Veja também