Como renderizar fórmulas rapidamente sem um motor web

O mote tem uma regra absoluta. Não depender de um motor web.

Descobrimos isso enquanto criávamos o protótipo. Em aplicativos desse tipo, o motor de navegador integrado representa a maior parte do custo. Por isso, decidimos deixá-lo de fora desde o início.

O problema eram as fórmulas. Normalmente, elas são renderizadas carregando o KaTeX ou o MathJax em um navegador. No mote, esse método não podia ser usado.

As outras opções também não serviam. Se usássemos um renderizador de fontes próprio, o formato das letras ficaria diferente do que aparece em outros aplicativos do sistema. Isso porque decidimos que o mote desenharia todos os caracteres usando o motor de texto da plataforma.

No fim, escolhemos o caminho mais difícil.

O mote cuida do layout; a plataforma, dos caracteres

A sintaxe das fórmulas segue uma convenção conhecida. Dentro de uma frase, a fórmula é delimitada por um par de cifrões; quando aparece separada, por dois pares.

Não pode haver espaços depois do delimitador de abertura nem antes do delimitador de fechamento. Isso evita que valores monetários como $5 e $6 sejam interpretados por engano como fórmulas. Em um Markdown escrito diretamente por uma pessoa, pequenas distinções como essa são importantes.

Dividimos a renderização das fórmulas em duas partes.

O núcleo do mote calcula as posições dos caracteres e das linhas. Os caracteres em si são desenhados pelo motor de texto de cada plataforma.

O núcleo contém uma versão simplificada das regras de composição tipográfica do TeX. São coisas como quatro níveis de tamanho, uma tabela que determina o espaçamento ao classificar os símbolos em oito categorias, as posições de índices, frações e radicais e os parênteses que aumentam de acordo com o conteúdo.

Mas o tamanho real dos caracteres não é determinado pelo núcleo. Isso porque até o mesmo caractere tem tamanhos diferentes dependendo da fonte e da plataforma. Quando o núcleo pergunta “Qual será o tamanho deste caractere se ele for desenhado neste tamanho?”, a plataforma responde. Com base nesse valor, o núcleo conclui o layout, e a plataforma desenha os caracteres e as linhas nas posições definidas.

Assim, mesmo quando o número de plataformas aumenta, só precisamos manter um único layout.

No editor, o texto original também permanece intacto. Mesmo quando uma fórmula aparece no modo ao vivo, os bytes da fonte continuam na linha. Apenas reservamos naquele ponto um espaço do tamanho da fórmula.

Por isso, o cursor fica exatamente na posição correta, e é possível identificar com precisão o caractere clicado. Assim, mantivemos o princípio de que a tela pode ser decorada, mas o arquivo não deve ser alterado. O modo de leitura e o PDF também usam o mesmo layout.

Também não inclinamos os caracteres à força para criar o itálico. Usamos caracteres matemáticos Unicode para desenhar os glifos matemáticos reais presentes na fonte.

Não escondemos as fórmulas que não conhecemos

Quando uma fórmula está errada sem dar nenhum sinal, é difícil perceber o problema.

Se um comando não compatível fosse exibido como um espaço em branco, o usuário não saberia se cometeu um erro de digitação ou se encontrou uma limitação do aplicativo. Por isso, o mote mostra os comandos desconhecidos em vermelho, preservando seus nomes.

Mesmo quando os parênteses não correspondem, o aplicativo não para. Mantivemos entradas desse tipo como testes para impedir que o mesmo problema volte a acontecer.

Também seguimos nossos princípios de desempenho. Armazenamos até 512 resultados de cálculo para cada combinação de fórmula e tamanho de texto. Enquanto o usuário digita, não calculamos repetidamente a mesma fórmula, e, quando ele não está fazendo nada, nenhuma tarefa é executada.

Ao exportar para HTML, usamos MathML. Como o próprio navegador desenha as fórmulas, nenhum script é necessário. Mesmo sem internet, as fórmulas continuam aparecendo normalmente.

Ainda há coisas que não funcionam

O mote não oferece suporte a todo o TeX.

Comandos definidos pelo usuário, definição de cores, numeração de fórmulas, índices em várias linhas, símbolos sobre caracteres e texto sobre setas ainda não são compatíveis.

Também não há acentos que se estendam para acompanhar a largura. Um acento circunflexo largo aparece igual a um estreito. Símbolos grandes de somatório e integral são desenhados com uma ampliação de 1,45 vez, em vez de usar glifos específicos. Até os parênteses, que deveriam se estender apenas na vertical, aumentam tanto na horizontal quanto na vertical.

As frações inline aparecem pequenas, como no TeX. Para vê-las maiores, é preciso especificar isso com um comando separado.

Não vamos falar dessas funcionalidades como se já existissem. Quando surgirem solicitações necessárias, vamos adicioná-las uma a uma.

Não mudamos toda a estrutura de custos do aplicativo por causa de uma única fórmula. Em vez disso, mudamos a maneira de desenhar fórmulas.

Foi o caminho mais difícil, mas acreditamos que é um caminho que poderá durar por muito tempo.