Perché mostriamo i simboli Markdown solo nella parola su cui si trova il cursore

In modalità live, la posizione del cursore coincide con ciò che appare sullo schermo. I simboli Markdown devono restare normalmente nascosti e comparire soltanto quando serve modificarli.

Ma come si può capire quando è il momento di «modificare»?

All’inizio mote prendeva come riferimento l’intero paragrafo. Quando il cursore entrava in un paragrafo, mostrava tutti i simboli presenti al suo interno.

L’implementazione era semplice, ma lo schermo diventava caotico. Bastava posizionare il cursore per modificare una sola parola in grassetto e persino il link e il codice tre righe più sotto tornavano alla forma originale. Gli occhi guardavano un punto, ma si muoveva l’intero paragrafo.

Guardiamo la sintassi, non il paragrafo

Ora mote mostra soltanto la sintassi toccata dal cursore.

Il testo originale appare solo quando il cursore si trova tra il simbolo di apertura e quello di chiusura. Anche le posizioni immediatamente prima e dopo i simboli sono incluse nell’intervallo. Posizionare il cursore lì è infatti comunque un gesto volto a modificare la sintassi.

Non appena il cursore si sposta anche di un solo carattere fuori dall’intervallo, il testo torna alla forma renderizzata. Per la comparsa e la scomparsa viene usata una transizione di opacità di 120 ms. Poiché è una transizione con un inizio e una fine, una volta terminata non rimane nulla.

Anche se nello stesso paragrafo sono presenti grassetto, link e codice inline, il resto non si muove. Cambia soltanto la sintassi toccata dal cursore e anche il ridisegno è limitato a quella singola riga. L’intero documento non viene reinterpretato.

Lo stesso principio si applica a corsivo, grassetto, barrato, evidenziatore, pedice, apice, codice, formule, link, immagini e riferimenti alle note a piè di pagina.

I simboli a inizio riga funzionano in modo leggermente diverso. Poiché # e > definiscono la natura dell’intera riga, mantengono lo stesso aspetto ovunque si trovi il cursore sulla riga. Al contrario, il - di un elenco appare soltanto quando il cursore si trova sul simbolo. Non appena supera lo spazio e si sposta nel testo, torna subito a essere un punto elenco.

Anche quando si seleziona del testo, soltanto la sintassi che si sovrappone all’area selezionata torna alla forma originale. Se, selezionando tre caratteri, l’intera riga si trasformasse in sorgente, sarebbe ancora più difficile capire che cosa è stato selezionato.

Anche i simboli seguono l’aspetto del testo

I simboli mostrati assumono lo stesso stile della sintassi.

I ** di un testo in grassetto appaiono in grassetto, mentre gli * del corsivo appaiono inclinati. Anche i ~~ del barrato vengono attraversati da una linea.

In passato tutti i simboli venivano visualizzati in grigio. Di conseguenza, non appena si posizionava il cursore su un testo in grassetto, la parola sembrava imprigionata tra parentesi grigie. Anche l’informazione che il testo in modifica fosse in grassetto scompariva temporaneamente.

Applicando ai simboli lo stile del testo, il significato è diventato più chiaro. La parola continua ad apparire in grassetto e gli asterischi restano soltanto come indicatori dei suoi limiti.

Il grigio viene usato solo per i simboli di blocco, come #, > e i punti elenco. Questi simboli descrivono infatti la natura della riga, più che quella del testo.

Il principio è semplice. I simboli legati al testo vengono mostrati come parte del testo, mentre quelli che definiscono la riga vengono mostrati come sfondo.

Solo gli asterischi creano automaticamente una coppia

Quando si inserisce un asterisco, viene creato anche quello di chiusura. Inserendo un altro asterisco, la coppia si espande per formare il grassetto.

Se, dopo aver scritto il contenuto, si inserisce l’asterisco di chiusura, non viene creato un nuovo simbolo: il cursore supera quello già esistente. Questa regola ha risolto anche il problema degli asterischi che comparivano a gruppi di quattro.

Tuttavia, un asterisco inserito subito dopo un carattere o un altro asterisco viene interpretato come il tentativo dell’utente di chiudere manualmente la sintassi. In questo caso non viene creata alcuna coppia.

I trattini bassi e le tilde non creano automaticamente una coppia. Potrebbero infatti interferire con sequenze di uso comune come snake_case, __init__, ~/경로. Funzionano in coppia soltanto quando racchiudono il testo selezionato.

Il cursore deve attirare meno attenzione del testo

All’inizio il cursore era blu, il colore di evidenziazione. Ora usa lo stesso colore d’inchiostro del testo.

Una barra blu si adatta bene a un campo di immissione breve. In un documento, però, il protagonista è il testo. È sufficiente che il cursore indichi fino a dove si è scritto. Il colore di evidenziazione è rimasto soltanto per le aree selezionate e i risultati di ricerca.

La larghezza viene determinata dividendo l’altezza del cursore per l’altezza dell’inchiostro del testo e arrotondando il risultato a un numero intero. Nel corpo del testo si ottiene 1 px e soltanto nei titoli grandi si sale a 2 px. Se si usasse direttamente una larghezza frazionaria, il cursore si distribuirebbe su due colonne di pixel e, invece di apparire sottile, risulterebbe spesso e sfocato.

L’altezza segue quella dei caratteri, non l’interlinea. Il corpo del testo è alto 18 px, h3 24 px, h2 29 px e h1 36 px. Basta guardare il cursore per capire se si trova nel corpo del testo o in un titolo.

Il lampeggiamento è indicato come l’unica eccezione alla regola che vieta di mantenere una sorgente ripetuta durante lo stato di inattività. Quando la finestra perde il focus, il lampeggiamento si interrompe e anche l’area selezionata arretra fino a un’alfa del 45 %.

Abbiamo mantenuto lo spostamento

Quando compaiono i simboli, il testo che segue si sposta leggermente. Abbiamo deciso di non eliminare questo movimento.

Abbiamo provato anche a riservare lo spazio mostrando continuamente i simboli nascosti in grigio chiaro. Tuttavia, sul testo in grassetto rimaneva un alone grigio e il barrato sporgeva oltre la parola. Si creava uno stato innaturale, che non era né la schermata renderizzata né il testo originale.

I simboli a inizio riga che includono un elemento disegnato, come i punti elenco e le caselle delle attività, vengono invece spostati di una distanza pari alla differenza di larghezza tra la forma originale e quella renderizzata, così che il testo non si muova quando il simbolo appare. Per il # dei titoli e il > delle citazioni abbiamo mantenuto lo spostamento del testo. È stata una scelta basata sulla familiarità con gli editor che si comportano in questo modo.

Nei link il cambiamento sullo schermo può essere maggiore, perché l’indirizzo può essere lungo. Per questo normalmente viene mostrato soltanto il testo del link, con una piccola freccia alla fine. Si può capire che si tratta di un link, ma l’indirizzo appare soltanto quando lo si modifica.

Se è necessario controllare con precisione il testo originale, basta usare la modalità sorgente. La modalità live non è il luogo in cui mostrare tutti i simboli, ma quello in cui aprire soltanto la parte che si sta modificando.

mote non cerca di indovinare le intenzioni dell’utente. Se il cursore si trova all’interno della sintassi, mostra i simboli; se si trova all’esterno, li nasconde. Le supposizioni sono comode quando sono corrette, ma quando sono sbagliate è difficile capirne il motivo. Usando un unico criterio, la posizione, il risultato è sempre prevedibile.

Decidere quando mostrare i simboli significa, in definitiva, decidere dove far posare lo sguardo dell’utente.