FunzioniPrezziDocumentazioneBlog
Ottieni mote
← Blog
Sviluppo·14 luglio 2026·4 min di lettura

Come renderizzare rapidamente le formule senza un motore web

Molte app si portano dietro un intero motore del browser solo per disegnare una formula. Per mote quella strada era preclusa, quindi abbiamo dovuto trovarne un’altra.

m
mote
Formule nella modalità di lettura. La formula in linea inserita nella frase e la formula a blocco centrata sotto sono prodotte dallo stesso motore di layout.
Formule nella modalità di lettura. La formula in linea inserita nella frase e la formula a blocco centrata sotto sono prodotte dallo stesso motore di layout.

mote ha una regola assoluta. Non dipendere da un motore web.

L’abbiamo scoperto realizzando il prototipo. In app di questo tipo, il motore del browser incorporato rappresenta la maggior parte del costo. Perciò abbiamo deciso di escluderlo fin dall’inizio.

Il problema erano le formule. Di solito si caricano KaTeX o MathJax nel browser per disegnarle. In mote era un metodo inutilizzabile.

Neanche le altre soluzioni erano adatte. Usando un renderer di font proprietario, la forma dei caratteri sarebbe diversa da quella delle altre app del sistema. Questo perché avevamo deciso che mote avrebbe disegnato tutti i caratteri con il motore di testo della piattaforma.

Alla fine abbiamo scelto la strada più difficile.

Il layout a mote, i caratteri alla piattaforma

Per la sintassi delle formule abbiamo seguito un metodo familiare. All’interno di una frase si racchiudono con una coppia di simboli del dollaro, mentre per separarle dal testo se ne usano due coppie.

Non è possibile inserire spazi dopo il simbolo di apertura o prima di quello di chiusura. Serve a evitare che importi come $5 e $6 vengano scambiati per formule. Nel Markdown scritto direttamente dalle persone, piccole distinzioni come questa sono importanti.

Abbiamo diviso in due il lavoro necessario per disegnare le formule.

Il core di mote calcola la posizione dei caratteri e delle linee. I caratteri veri e propri vengono disegnati dal motore di testo di ciascuna piattaforma.

Nel core abbiamo inserito una versione semplificata delle regole di composizione tipografica di TeX. Comprende quattro livelli di dimensione, una tabella che suddivide i simboli in otto categorie per determinarne la spaziatura, il posizionamento di pedici, frazioni e radicali, e parentesi che si ingrandiscono in base al contenuto.

Il core, però, non stabilisce le dimensioni effettive dei caratteri. Questo perché lo stesso carattere può avere dimensioni diverse a seconda del font e della piattaforma. Quando il core chiede: «Quanto è grande questo carattere se viene disegnato con queste dimensioni?», la piattaforma risponde. Il core completa il layout in base a quel valore e la piattaforma disegna caratteri e linee nelle posizioni stabilite.

In questo modo, anche aumentando il numero di piattaforme, basta gestire un solo layout.

Anche nell’editor il testo originale rimane intatto. Quando una formula è visibile in modalità live, i byte del sorgente sono ancora presenti nella riga. In quel punto viene riservato soltanto lo spazio corrispondente alle dimensioni della formula.

Così il cursore si trova nella posizione esatta ed è possibile individuare con precisione il carattere su cui si è fatto clic. Abbiamo rispettato il principio secondo cui si può decorare lo schermo senza modificare il file. Anche la modalità di lettura e il PDF utilizzano lo stesso layout.

Una riga con il cursore in modalità live — la formula in linea appare come nel testo originale, mentre la formula a blocco sottostante viene mostrata come una frazione composta tipograficamente
Una riga con il cursore in modalità live — la formula in linea appare come nel testo originale, mentre la formula a blocco sottostante viene mostrata come una frazione composta tipograficamente

Non incliniamo artificialmente neppure il corsivo. Utilizziamo i caratteri matematici Unicode per disegnare i glifi matematici effettivamente presenti nel font.

Non nascondiamo le formule sconosciute

Quando una formula è sbagliata senza darlo a vedere, è difficile accorgersene.

Se un comando non supportato viene visualizzato come uno spazio vuoto, l’utente non può sapere se si tratta di un errore di battitura o di un limite dell’app. Per questo mote mostra in rosso i comandi sconosciuti, mantenendone il nome originale.

L’app non si blocca nemmeno quando le parentesi non corrispondono. Abbiamo conservato questi input come test, affinché lo stesso problema non si ripeta.

Abbiamo rispettato anche i principi relativi alle prestazioni. Memorizziamo fino a 512 risultati di calcolo per ogni combinazione di formula e dimensione del testo. Durante la digitazione non ricalcoliamo ripetutamente la stessa formula e, quando l’utente non fa nulla, non viene eseguita alcuna operazione.

Per l’esportazione in HTML utilizziamo MathML. Poiché è il browser a disegnare direttamente le formule, non servono script. Le formule rimangono visibili anche senza connessione a Internet.

Ci sono ancora cose che non funzionano

mote non supporta TeX nella sua interezza.

I comandi definiti dall’utente, la specificazione dei colori, la numerazione delle formule, i pedici su più righe, i simboli sopra i caratteri e il testo sopra le frecce non sono ancora supportati.

Non sono disponibili neppure gli accenti che si estendono per adattarsi alla larghezza. Anche un cappello largo appare come uno stretto. I grandi simboli di sommatoria e di integrale vengono disegnati ingrandendoli di 1,45 volte, invece di utilizzare glifi dedicati. Anche le parentesi che dovrebbero allungarsi soltanto in verticale si ingrandiscono sia orizzontalmente sia verticalmente.

Le frazioni in linea vengono mostrate in piccolo, come in TeX. Per visualizzarle più grandi è necessario specificarlo con un comando apposito.

Non diremo che queste funzionalità esistono già. Le aggiungeremo una alla volta quando arriveranno richieste che le rendano necessarie.

Non abbiamo cambiato l’intera struttura dei costi dell’app per una sola formula. Abbiamo cambiato invece il modo di disegnare le formule.

È stata la strada più difficile, ma crediamo che sia quella che può durare nel tempo.

← Meno recentiAbbiamo definito le regole del tasto Invio affinché i paragrafi appaiano uguali anche in altri strumentiPiù recenti →"0.9.0-beta.1: cosa include la prima beta pubblica"
Segui gli aggiornamenti via RSS.
Lascia solo la scrittura.
Italiano
© 2026 mote