FuncionesPreciosDocumentaciónBlog
Obtener mote
← Blog
Ingeniería·14 de julio de 2026·4 min de lectura

Cómo renderizar fórmulas rápidamente sin un motor web

Hay muchas aplicaciones que cargan con un motor de navegador entero solo para dibujar una fórmula. En mote ese camino estaba cerrado, así que tuvimos que buscar otro.

m
mote
Fórmulas en el modo de lectura. Las fórmulas en línea integradas en las frases y las fórmulas en bloque centradas debajo salen del mismo motor de composición.
Fórmulas en el modo de lectura. Las fórmulas en línea integradas en las frases y las fórmulas en bloque centradas debajo salen del mismo motor de composición.

En mote hay una regla absoluta. No depender de un motor web.

Lo descubrimos mientras creábamos el prototipo. En este tipo de aplicaciones, el motor de navegador integrado representa la mayor parte del coste. Por eso decidimos excluirlo desde el principio.

El problema eran las fórmulas. Lo habitual es cargar KaTeX o MathJax en el navegador para dibujarlas. Era un método que no podíamos usar en mote.

Las demás alternativas tampoco encajaban. Si usábamos un renderizador de fuentes propio, la forma de las letras sería distinta de la de otras aplicaciones del sistema. Porque habíamos decidido que mote dibujaría todos los caracteres con el motor de texto de la plataforma.

Al final elegimos el camino más difícil.

mote coloca, la plataforma dibuja los caracteres

La sintaxis de las fórmulas sigue un método conocido. Dentro de una frase se encierran entre un par de signos de dólar; cuando se muestran por separado, entre dos pares.

No puede haber espacios después del signo de apertura ni antes del de cierre. Es para evitar que cantidades como $5 y $6 se interpreten por error como fórmulas. En el Markdown escrito directamente por una persona, estas pequeñas distinciones son importantes.

Dividimos en dos partes el trabajo de dibujar las fórmulas.

El núcleo de mote calcula la posición de los caracteres y las líneas. Los caracteres propiamente dichos los dibuja el motor de texto de cada plataforma.

El núcleo contiene una versión simplificada de las reglas de composición tipográfica de TeX. Incluye cuatro niveles de tamaño, una tabla que divide los símbolos en ocho clases para determinar el espaciado entre ellos, la posición de los subíndices, las fracciones y los radicales, y elementos como los paréntesis que crecen para adaptarse al contenido.

Sin embargo, el núcleo no determina el tamaño real de los caracteres. Esto se debe a que incluso un mismo carácter tiene un tamaño diferente según la fuente y la plataforma. Cuando el núcleo pregunta «¿Qué tamaño tendrá este carácter si se dibuja con este tamaño?», la plataforma responde. El núcleo completa la composición a partir de ese valor y la plataforma dibuja los caracteres y las líneas en las posiciones establecidas.

Gracias a ello, aunque aumente el número de plataformas, solo hay que mantener un único sistema de composición.

El texto original también permanece intacto en el editor. Aunque la fórmula se muestre en el modo en vivo, los bytes de origen siguen estando dentro de la línea. En ese lugar solo se reserva un espacio del tamaño de la fórmula.

Así, el cursor se sitúa en la posición exacta y es posible identificar con precisión el carácter en el que se ha hecho clic. De este modo respetamos el principio de decorar la pantalla sin modificar el archivo. El modo de lectura y el PDF también utilizan la misma composición.

Línea con el cursor en el modo en vivo — la fórmula en línea se muestra tal como aparece en el texto original y la fórmula en bloque inferior se presenta como una fracción compuesta
Línea con el cursor en el modo en vivo — la fórmula en línea se muestra tal como aparece en el texto original y la fórmula en bloque inferior se presenta como una fracción compuesta

Las cursivas tampoco se inclinan de manera forzada. Utilizamos caracteres matemáticos Unicode para dibujar los glifos matemáticos reales incluidos en la fuente.

No ocultamos las fórmulas que no conocemos

Cuando una fórmula es incorrecta de manera silenciosa, resulta difícil detectarlo.

Si un comando no compatible se muestra como un espacio en blanco, el usuario no puede saber si se trata de un error tipográfico o de una limitación de la aplicación. Por eso mote muestra en rojo los comandos desconocidos, conservando sus nombres tal cual.

La aplicación tampoco se detiene cuando los paréntesis no coinciden. Conservamos este tipo de entradas como pruebas para evitar que el mismo problema vuelva a repetirse.

También mantuvimos nuestros principios de rendimiento. Almacenamos hasta 512 resultados de cálculo por fórmula y tamaño de texto. Mientras se escribe, no se calcula repetidamente la misma fórmula, y cuando el usuario no está haciendo nada, tampoco se ejecuta ninguna tarea.

Al exportar a HTML utilizamos MathML. Como el navegador dibuja directamente las fórmulas, no hace falta ningún script. Incluso sin conexión a internet, las fórmulas se muestran tal cual.

También hay cosas que todavía no funcionan

mote no es compatible con todo TeX.

Todavía no admite comandos definidos por el usuario, asignación de colores, numeración de fórmulas, subíndices de varias líneas, símbolos encima de caracteres ni texto sobre flechas.

Tampoco hay acentos que se ensanchen para ajustarse al contenido. Un sombrero ancho se ve igual que uno estrecho. Los símbolos grandes de sumatorio e integral se dibujan ampliándolos 1,45 veces, en lugar de utilizar glifos específicos. Los paréntesis, que deberían estirarse solo en vertical, aumentan tanto horizontal como verticalmente.

Las fracciones en línea se muestran pequeñas, como en TeX. Para verlas más grandes, hay que indicarlo con un comando específico.

No diremos que estas funciones ya existen. Las iremos añadiendo una a una cuando surjan solicitudes que las necesiten.

No cambiamos la estructura de costes de toda la aplicación por una sola fórmula. En su lugar, cambiamos la manera de dibujar las fórmulas.

Fue el camino más difícil, pero creemos que es un camino que puede perdurar.

← AnterioresDefinimos las reglas de Enter para que los párrafos se vean igual en otras herramientasMás recientes →"0.9.0-beta.1: lo que incluye nuestra primera beta pública"
Siga las novedades por RSS.
Que solo quede la escritura.
Español
© 2026 mote