Emacs / N Λ N O

Le design des éditeurs de texte

Nicolas Rougier

Nicolas Rougier est chercheur en neurosciences cognitives computationnelles à l'Inria, au sein de l'Institut des maladies neurodégénératives de Bordeaux. Ses principaux intérêts en dehors des neurosciences sont : la philosophie, le libre accès aux publications scientifiques, la reproductibilité de la recherche, la visualisation de données, la médiation à destination du grand public ; mais aussi (et c'est ce qui va nous intéresser aujourd'hui) la typographie, le graphisme à l'écran et les interfaces humain-machine.

Les éditeurs de code aujourd'hui

Nicolas a pré-publié un article intitulé « On the design of text editors » sur arXiv en 2020. Il y présente un thème qu'il a créé pour l'éditeur Emacs, et s'appuie sur cette expérimentation pour interroger les implicites de conception des éditeurs de texte et suggérer des pistes issues notamment du paradigme du livre.

Emacs est l'un des éditeurs historiques encore très utilisés aujourd'hui. Il est très extensible et personnalisable, sous réserve de savoir programmer en Lisp. C'est l'éditeur de prédilection de Nicolas, sur lequel il s'appuie pour son écriture mais également son agenda, ses mails, ses flux RSS…

Pour présenter Emacs et parler de son thème, Nicolas prend d'abord un exemple d'éditeur de texte moderne dont la conception est à l'opposé de ce que fait Emacs : Nova. Reprenant une capture d'écran des fonctionnalités de cet éditeur, il la transforme en un catalogue des défauts modernes des éditeurs de texte :

  • l'étroitesse de la zone dédiée à la saisie (35% de la fenêtre seulement) ;
  • la redondance des informations affichées ;
  • l'effet « sapin de Noël » d'une coloration syntaxique trop variée et trop utilisée ;
  • un long listing linéaire dans lequel on manque de repères ;
  • etc.

Au-delà de cet exemple, Nicolas rappelle que la majorité des éditeurs de code modernes (Atom, Sublime Text, VS Code, etc.) partagent ces défauts. Tous ont la même interface ou presque, dont beaucoup d'éléments – arborescence de fichiers, barres d'états, panneaux avec outils de développement – empiètent sur la zone de saisie. Lire et écrire du code reste la principale action qu'on cherche à effectuer dans un éditeur de code. C'est en ce sens que Nicolas a fabriqué son thème pour Emacs.

La nano-élégance

Nicolas a apporté plusieurs modifications importantes à Emacs à travers son thème. Les plus fondamentales s'inspirent du paradigme livresque :

  • le format de la fenêtre obéit à un ratio 1√2, qui gouverne les formats de papiers normés ISO 216 (comme le format A4) ;
  • le contenu est encadré par des marges confortables ;
  • l'interligne est augmenté pour améliorer la lisibilité.
La page d'accueil de Emacs / N Λ N O

Ensuite, seulement six couleurs sont présentes au niveau du texte. Nicolas puise ici dans la psychologie et les neurosciences (son principal domaine d'activité) pour revoir complètement l'usage de la couleur : au lieu de faire ressortir la syntaxe sur la base de critères flous, il cible les éléments en fonction de leur saillance, distinguant des zones critiques et d'autres beaucoup plus secondaires.

L'usage des polices est également modifié, avec un usage de graisses non conventionnelles (léger, moyen) par rapport aux éditeurs classiques (qui restreignent souvent le choix à normal et gras). Nicolas pioche aussi dans une plus large palette de pratiques typographiques, avec des tailles différentes pour les titres et des colonnes, et il n'hésite pas à varier le rendu en fonction de ce qui est affiché par l'éditeur (une liste de tâches, un fragment de code, un flux RSS, un article).

Un article en cours d'édition dans Emacs / N Λ N O

Après avoir prototypé ces changements dans un thème appelé Elegant Emacs, Nicolas a publié son thème sous le nom de Nano – « Emacs made simple ».

Représenter le code à l'écran

Concernant le thème général de la représentation du code à l'écran, Nicolas mentionne plusieurs directions qu'il n'a pas explorées lui-même mais qui font l'objet de recherches chez d'autres personnes.

Au-delà de la représentation linéaire, qui reste dominante, plusieurs alternatives existent. On citera notamment la programmation lettrée (literate programming), dans laquelle code et prose sont entremêlés. On peut aussi jouer sur la disposition spatiale (layout), en affichant par exemple les commentaires en marge du code (sans occuper plus de place) et offrir ainsi une lisibilité très différente.

Une autre piste d'expérimentation concerne les polices. Elles peuvent être utilisées pour modifier le rendu du code « source » : on peut afficher un petit F à côté d'une variable de type float, ou bien appliquer des ligatures qui transforment deux signes <= en un seul ≤. Les polices variables ouvrent de nouvelles possibilités de variations typographiques fines au sein d'un même fichier. Des polices à chasse fixe peuvent inclure des caractères aux proportions différentes. L'apparition des lettres et le déplacement du curseur peuvent être animés de manière à fluidifier l'expérience d'écriture. Et bien d'autres possibilités existent sûrement.

Discussion

Pour Nicolas, bien peu de choses semblent avoir changé dans le design des éditeurs de code depuis l'invention d'Emacs, d'où l'envie de réinventer, dynamiser (voire dynamiter) leur interface. La dimension esthétique est importante dans cette démarche : si Nicolas se réfère au paradigme du livre, ce n'est pas uniquement sur la base de critères rationnels mais aussi par affection et par sensibilité.

Toutefois ce n'est pas forcément simple, car Emacs est difficile à modifier, et c'est un constat qu'on peut étendre à d'autres éditeurs. Certains éléments sont particulièrement ardus : autant la coloration syntaxique est relativement simple à implémenter, autant les alternatives sémantiques peuvent devenir complexes voire irréalisables.

Par ailleurs, hors du monde du code pur et dur, des progrès ont été fait. Les éditeurs de texte destinés à un plus large public, et notamment les éditeurs Markdown, se démarquent par des efforts notables sur l'esthétique (par exemple iA Writer, cité plus bas parmi les liens). Julien Taquet rappelle que les éditeurs de code sont écrits par des gens qui sont imprégnés de l'environnement Web dans lequel une page unique défile à l'infini. C'est donc peut-être en adoptant une démarche hybride entre différents milieux que peut émerger une nouvelle conception des environnements d'écriture et d'édition.

Synthèse des liens partagés sur le chat

Typographie

  • (David Benqué) Kitty et la possibilité de choisir les ligatures.
  • (Nicolas Rougier) Nerdfonts pour ajouter des glyphes à des polices.
  • (Nicolas Rougier) Une synthèse didactique sur le rendu des polices à l'écran.
  • (Nicolas Taffin) Un générateur ASCII pour créer des titres géants, à utiliser par exemple pour hacker la minimap d'un éditeur de code.
  • (Arthur Perret) Les recherches typographiques de Information Architects (iA) pour leur éditeur Writer : ici et ici.

Couleurs

  • (Damien Cassou) Modus themes, pensé pour assurer un niveau de contraste et avec des options pour certains handicaps visuels.
  • (Nicolas Rougier) Nord, principale inspiration pour les couleurs de Emacs / N Λ N O.

Outils d'écriture

Coko

Coko organise l'Open Publishing Fest qui a donné l'impulsion à ce qui est devenu Inachevé d'imprimé. Coko fournit l'infrastructure de visio qui propulse nos rencontres. Quelques liens pour découvrir la fondation et son travail :

Compte-rendu rédigé et mis en page
par Arthur Perret, composé en
Roboto Mono Light
et Medium.

Retour à l’index