L'article d'Alexis Bingessner,
«Text Rendering Hates You», publié il y a un mois
, est très proche de moi.
En 2017, je développais un éditeur de texte interactif dans un navigateur. Insatisfait des bibliothèques ContentEditable existantes, je me suis dit: «Hé, re-réalisons juste la sélection de texte! C'est dur? " J'étais jeune. Naïf. J'ai pensé que je pourrais le gérer en deux semaines. En fait, une tentative pour résoudre ce problème a pris plusieurs années de ma vie, y compris un an de travail rémunéré du matin au soir pour développer un éditeur de texte pour le nouvel OS.
Au travail, j'ai eu la chance d'apprendre beaucoup de
mentors ayant une vaste expérience dans ce domaine . J'ai entendu beaucoup, beaucoup d'histoires effrayantes. Y compris un ingénieur qui a pris en charge une application Windows avec une implémentation personnalisée d'un champ de texte - et qui voulait passer d'une API de saisie de texte obsolète à une nouvelle version. Voici une
liste des interfaces de saisie
de texte dans cette nouvelle version:
C'est vrai, 128 interfaces pour saisir du texte. Je suis presque sûr qu’il existe huit (8!) Différents types de verrous pour résoudre les problèmes de concurrence, même si je n’ai honnêtement pas lu leur documentation, alors ne me citez pas à ce sujet. Cet ingénieur d'un an et demi (à plein temps!) A modifié son éditeur, mais a finalement échoué et est resté sur l'ancienne API.
La dactylographie est difficile.
Alexis mentionne parfois la sélection de texte, mais son expérience personnelle est plus liée au rendu. En tant que personne, d'autre part, je peux ajouter quelques points sur la contribution.
Mouvement vertical du curseur
J'ai déjà couvert cela dans un
article précédent , mais nous pouvons répéter rapidement ici.
Dans cet exemple, si vous appuyez vers le haut, le curseur se place au début de la ligne, avant le mot
bonjour . Jusqu'à présent, tout est assez raisonnable. Mais si vous appuyez vers le haut puis vers le bas, le curseur sautera d'abord devant
bonjour , puis se tiendra après
certains .
Cela peut ne pas sembler très logique. Vous demandez pourquoi il saute à droite? Eh bien, avec les mouvements verticaux, chaque curseur se souvient de la position
x en pixels, et il ne se met à jour que lorsque vous appuyez sur la gauche ou la droite, et non vers le haut et vers le bas. Le même comportement empêche les curseurs de se déplacer vers la gauche lors d'un déplacement vertical sur de courtes lignes.
Proximité
Bon, maintenant nous savons que lorsque nous sélectionnons du texte, nous avons
deux éléments d'état: le décalage d'octet à l'intérieur de la ligne et la coordonnée
x en pixels, mentionnée ci-dessus. Le problème est-il résolu? Et bien non.
Considérez deux positions de curseur sur une très longue ligne:
Puisque
loooooooooong est un mot, deux positions de curseur ont
exactement le même décalage d'octet dans la chaîne . Il n'y a pas de nouvelle ligne entre eux, car la ligne est doucement enveloppée. Nos curseurs ont besoin d'un bit supplémentaire qui leur indique vers quelle ligne aller. La plupart des systèmes appellent ce bit affinité. Il est également utilisé dans le texte mixte bidirectionnel, dont nous parlerons bientôt.
Modificateurs Emoji
Supposons que j'envoie un message à un ami. Pour exprimer mes sentiments, je veux ajouter un emoji drôle. J'entre dans la zone de texte un pouce vers le haut,
a lettre
a et un modificateur d'emoji pour le teint. Cela ressemble à ceci:
Oh, je ne voulais pas écrire une lettre. Je place le curseur après et clique sur Retour arrière. Que va-t-il se passer? J'ai vu plusieurs options, selon l'éditeur.
- Le mauvais numéro 1 peut sembler correct. Mais c'est ainsi qu'un éditeur de texte fonctionne avec la prise en charge du rendu d'emoji hérité, par exemple, Sublime Text. C'est mauvais car les emoji à doigts légers sont encodés comme un doigt jaune, suivi immédiatement d'un modificateur de teint. Ils ne sont pas combinés en un seul symbole, comme prévu. Même si je copie le doigt léger d'une autre application, il ne s'affichera toujours pas correctement, comme ici.
- Le mauvais # 2 est ce que fait Chrome 77 dans la barre d'adresse. Pas sur les pages Web, mais uniquement dans la barre d'adresse. Ce n'est pas un problème de rendu, car les emoji copier-coller avec le teint fonctionnent. Au lieu de cela, Chrome supprime la lettre, et après avoir remarqué le modificateur suivant la lettre, il le supprime également. Oups
- Le mauvais numéro 3 correspond à la spécification Unicode de la façon dont les emoji doivent être fusionnés. Mais cela est assez incompréhensible pour les utilisateurs, et en passant, vous devez déplacer le curseur pour qu'il ne reste pas coincé à mi-chemin à l'intérieur de l'emoji.
Toutes les options sont mauvaises, vous pouvez donc supposer qu'il existe probablement une quatrième option. Voilà! De nombreux éditeurs, tels que TextEdit, ne vous permettent même pas de placer le curseur après la lettre, car le modificateur de teint est considéré comme une seule unité avec le caractère précédent. Cela a du sens dans le contexte des emoji et fonctionne même bien dans ce cas, mais que faire si le modificateur est indiqué par le premier caractère de la chaîne?
Maintenant, le modificateur change le caractère de nouvelle ligne. TextEdit ne vous permettra pas de placer le curseur au début de la deuxième ligne! Personnellement, je considère cette décision «aussi mauvaise».
Vous avez peut-être également remarqué que le pouce vers le haut est devenu le pouce vers le bas. Je l'ai fait moi-même pour refléter mes sentiments sur la situation dans son ensemble.
Soit dit en passant, TextEdit rend le curseur sur la première ligne
très bogué. Par exemple, devinez ce qui se passe si j'appuie sur
4 ici?
Ouais. Vous pourriez également penser qu'il y a des espaces entre les chiffres. Ils ne sont pas là.
Texte bidirectionnel
Alexis mentionne les sélections fractionnées dans un texte bidirectionnel mixte, comme dans cet exemple de TextEdit:
Cela a vraiment du sens, car la langue arabe dans les lignes est codée de droite à gauche, de sorte que la sélection semble être divisée, mais les octets sont une plage continue.
Par conséquent, il est un peu surprenant que nous puissions obtenir cette sélection:
Oui, il est visuellement continu, mais séparé en octets. Oui, c'est mauvais. Certains éditeurs le font si vous sélectionnez du texte avec les touches fléchées au lieu de la souris. Une alternative consiste à échanger les touches gauche / droite à l'intérieur du texte avec la direction de droite à gauche, ce qui est également mauvais. Il n'y a pas de bonnes options ici.
En prime, essayez de comprendre ce qui se passe ici:
Seigneur ... je ne veux pas faire de commentaire à ce sujet.
La chose sur les méthodes de saisie
Un logiciel qui traduit les frappes en entrée est appelé méthode d'entrée ou éditeur de méthode d'entrée. Pour l'alphabet latin, ce n'est pas un logiciel très intéressant, car chaque frappe est directement associée à l'insertion d'un caractère. Mais dans de nombreux scripts, les personnages ne tiennent pas sur le clavier, vous devez donc être créatif. Par exemple, dans certaines méthodes de saisie pour la langue chinoise, l'utilisateur entre des sons - et obtient une liste de caractères similaires dans le son:
Ce champ est parfois appelé région de composition et apparaît souvent
au-dessus du texte souligné . Parfois, la méthode d'entrée doit le styliser. Par exemple, la méthode de saisie japonaise sur Android utilise la couleur d'arrière-plan pour créer une zone de partage de phrases:
(Merci à Shae pour la capture d'écran!)Toutes ces sélections et zones de composition interagissent-elles avec du texte bidirectionnel? N'y pensons pas.
Les méthodes de saisie devraient fonctionner partout,
même à l'intérieur du terminal :
Rien n'ira à Vim tant qu'un caractère chinois n'aura pas été sélectionné dans la liste. Vous pensez probablement: "Mais comment ça marche en mode de commande Vim?" Pas très bien. C'est pourquoi, sur Internet, la saisie de texte et les frappes sont des événements distincts. Dans la console, ils se mélangent, causant des problèmes.
Ceci n'est qu'un exemple de nombreuses méthodes de saisie de texte différentes. (N'oubliez pas les méthodes de saisie sans clavier telles que la voix et l'écriture manuscrite!) Heureusement, le système d'exploitation vous fournit toutes ces méthodes. Mais, malheureusement, votre zone de texte doit parler du protocole de saisie de texte général utilisé par toutes ces méthodes. Pour Windows, ce sont les 128 interfaces répertoriées au début de l'article. Dans d'autres systèmes d'exploitation, les interfaces sont plus simples, mais elles sont toujours difficiles à implémenter.
Vous pouvez également remarquer que la méthode d'entrée est un processus distinct, de sorte que la méthode d'entrée et l'application peuvent apporter des modifications à l'état du champ de texte. Il s'agit en fait d'un protocole d'édition parallèle. Windows résout le problème avec huit (8!) Types de verrous. Bien que le maintien d'un verrou au-delà des limites du processus puisse sembler douteux, la plupart des autres plates-formes essaient d'utiliser des heuristiques imparfaites pour résoudre les problèmes de concurrence. Ou ils espèrent simplement que la condition de course ne se produira pas. D'après mon expérience, la prière n'est pas une primitive très efficace du parallélisme.
Pourquoi tout est-il si compliqué ??
Jonathan Blow, dans une conférence sur la dégradation des logiciels, mentionne l'
éditeur de texte Ken Thompson , qu'il a écrit en une semaine. La plupart du code de cet article est une complexité introduite au hasard. Windows a-t-il vraiment besoin de 128 interfaces et de 8 types de verrous pour la saisie de texte? Pas question. Les erreurs dans TextEdit sont-elles le résultat d'un modèle d'édition complexe? Oui La dispersion des bogues dans les programmes modernes est-elle une source de préoccupation? Du moins pour moi, ça l'est.
Cependant, l'éditeur de Ken Thompson était également beaucoup, beaucoup plus simple que ce que nous attendons des éditeurs de texte modernes. Unicode prend en charge presque toutes les langues vivantes dans le monde (il y en a environ 7 000) et beaucoup d'autres sont mortes. Il existe différents scripts, directions de texte et méthodes de saisie, chacun imposant des restrictions complexes (et dans certains cas insolubles) à tout éditeur. Mais il doit également prendre en charge les lecteurs d'écran.
Une énorme complexité s'accumule
inévitablement , et dans cet article, nous ne l'avons que légèrement touchée. Il s'agit d'un véritable miracle de programmation que vous pouvez simplement gifler
<textarea> sur une page Web - et fournir instantanément une entrée de texte à chaque internaute du monde entier.