Bloque de fórmula

Notación matemática y científica — fracciones, exponentes, subíndices, letras griegas, y fórmulas químicas mediante \ce{...} — renderizada del lado del servidor como una imagen con texto alternativo real, ya que ningún cliente de correo compone matemáticas reales.

Cómo funciona

El bloque toma una pequeña cadena de notación similar a LaTeX (por ejemplo, \frac{-b \pm \sqrt{b^2-4ac}}{2a}) y la renderiza del lado del servidor a un PNG mediante GET /api/formula. Ese es un endpoint firmado construido sobre las mismas primitivas de rasterización/codificación PNG hechas desde cero que ya usan los bloques de analítica y gráficos: nunca hay una biblioteca matemática del lado del cliente involucrada, y ninguna dependencia de npm detrás del renderizador.

El contenido de una fórmula queda fijo una vez escrito, a diferencia del GIF de cuenta regresiva, que debe regenerarse en cada visualización para mantenerse en vivo. Así que toda la solicitud de renderizado (notación, modo de visualización, color) se firma dentro de la propia URL, y el endpoint no necesita ninguna lectura de Firestore — la respuesta lleva un encabezado de caché inmutable de larga duración.

La sintaxis de notación cubre fracciones, exponentes (^), subíndices (_), raíces cuadradas, letras griegas, funciones con nombre (\sin, \lim, \log, y otras), símbolos de conjuntos/lógica (\forall, \in, \cup, \neg, y otros), y operadores comunes. \left(/\right( se reconocen pero se renderizan a tamaño normal en lugar de escalarse automáticamente a su contenido, ya que este es un pequeño renderizador de mapa de bits, no un motor TeX completo. \text{...} vuelve a palabras simples en medio de una fórmula para etiquetar un término.

Las fórmulas químicas tienen su propia macro \ce{...}: un pequeño subconjunto tipo mhchem. Los conteos de elementos se subindexan automáticamente (H2O se renderiza con un subíndice 2), las cargas iónicas al final se superindexan automáticamente (H3O+, SO4^2-), y -> se renderiza como una flecha de reacción. Eso significa que \ce{2H2 + O2 -> 2H2O} no requiere que escribas a mano ^/_ para cada conteo de átomos y carga.

La sintaxis que el analizador no reconoce — documentos LaTeX completos, paquetes, matrices, tablas — nunca rompe el envío. En su lugar, degrada a renderizar la cadena de notación en bruto como texto literal simple. Esa garantía se aplica en dos capas: el propio analizador degrada las macros desconocidas a texto literal, y la llamada más externa del renderizador nunca lanza un error, incluso ante un caso extremo de diseño.

La imagen se dispone a una escala adecuada para su modo de visualización: más grande para Bloque, más pequeña para En línea. Se reduce automáticamente si excedería el presupuesto de tamaño seguro para correo. La mayoría de las fórmulas encajan al primer intento; solo una expresión inusualmente larga necesita una escala menor, y una patológica se limita a la escala mínima en lugar de quedar en un bucle infinito.

El <img> renderizado lleva atributos width/height explícitos dimensionados a partir de ese paso de diseño, así que Outlook y otros clientes no saltan ni reajustan el diseño mientras la imagen carga. De forma crucial, también lleva un atributo alt fijado a la propia cadena de notación en bruto. Una fórmula nunca queda atrapada dentro de una imagen sin un equivalente de texto para un cliente que bloquea imágenes o un lector de pantalla que no puede interpretar un mapa de bits.

Campos configurables:

Notación (similar a LaTeX) — el texto de la fórmula, limitado a 300 caracteres (un valor demasiado largo se trunca de forma silenciosa antes de renderizar, nunca rompe el envío).
Modo de visualización — En línea (pequeño, dentro de una línea de texto) o Bloque (más grande, en su propia línea).
Alineación — Izquierda, Centro, o Derecha (solo tiene efecto en modo Bloque).
Color — el color de trazo de la notación; un valor inválido o vacío recurre al valor casi negro por defecto propio del renderizador en lugar de llegar al endpoint firmado con un valor que rechazaría.
Color de fondo, relleno, borde y radio de borde en la tarjeta.

Una notación vacía no renderiza absolutamente nada en lugar de una imagen vacía — el bloque simplemente no emite nada si no hay texto que componer.

Sintaxis compatible

Cada ejemplo a continuación es una imagen firmada real y en vivo del propio endpoint /api/formula, no una maqueta, así que lo que ves aquí es exactamente lo que renderiza la bandeja de entrada de un destinatario. Cualquier cosa que no esté en esta lista (documentos LaTeX completos, paquetes, matrices, tablas, acentos como \bar/\hat, elipsis como \dots) no se reconoce. Se renderiza literalmente como su propio texto escrito tal cual en lugar de romper el envío, así que suele ser obvio en una vista previa que una macro no es compatible.

Fracciones

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

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

Exponentes y subíndices

a_n = a_1 + (n-1)d

Raíces cuadradas, anidadas con una fracción

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

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

La fórmula cuadrática — fracciones, ±, y una raíz cuadrada juntos

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

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

Letras griegas

\Delta = b^2 - 4ac

$\Delta = b^2 - 4ac$

Funciones con nombre y límites (en posición vertical, no en cursiva)

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

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

Símbolos de conjuntos y lógica

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

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

Delimitadores \left(/\right) — reconocidos, pero no escalados automáticamente a su contenido

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

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

\text{...} para una etiqueta en medio de una fórmula

d = 5\text{ mi}

$d = 5\text{ mi}$

Fórmulas químicas mediante \ce{...} — conteos de átomos subindexados automáticamente, una flecha de reacción

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

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

\ce{...} — cargas iónicas superindexadas automáticamente

\ce{SO4^2-}

$\ce{SO4^2-}$

Ejemplos

Subject

This week in study group: the quadratic formula

Un correo de resumen de una clase de química tipografía una reacción balanceada en línea dentro de una oración: "Fotosíntesis: \ce{6CO2 + 6H2O -> C6H12O6 + 6O2}" justo junto al texto explicativo. Mira Educación para ver cómo Fórmula encaja junto a Tarea, Cuestionario, y Mazo de tarjetas didácticas en un resumen de clase. Un conjunto de problemas de física coloca la fórmula cuadrática en modo Bloque como su propia línea, con un tamaño más grande y centrada, antes de un ejemplo resuelto. Un boletín de estadística usa una fórmula corta en línea como \mu = \frac{\sum x_i}{n} en medio de una oración sin romper el flujo del párrafo circundante. Ten en cuenta que es \mu, no \bar{x}: las macros de acentos como \bar/\hat no están en la lista de sintaxis compatible anterior, así que una letra griega simple es el sustituto seguro para una media cuando se necesita uno.

Cómo se ve la alternativa estática

<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>

Solo hay un nivel de renderizado — un <img> firmado cuyo texto alt siempre lleva la cadena de notación exacta, así que la fórmula sigue comunicando incluso donde la imagen misma no carga.

Bloque de fórmula

Cómo funciona

Sintaxis compatible

Ejemplos

Cómo se ve la alternativa estática

Relacionado