Comment le texte doit-il être placé dans un bloc de code?
Je travaille sur une application où le code sera affiché sur un appareil mobile. Cela nous donne une largeur limitée car le défilement horizontal n'est pas un choix souhaité pour le code avec de longues lignes. Nous devons donc forcer le texte à encapsuler dans le bloc de code. Nous avons deux options:
Break Word - où seuls les mots entiers se cassent. Cela a l'avantage de voir facilement des mots entiers, mais a des situations (comme illustré ici) où il est visuellement moins qu'idéal.
Break all - où il se casse en tout point, que ce soit au milieu d'un mot ou non. Cela a tendance à mieux paraître (subjectif), mais cela pourrait être problématique avec des mots plus longs (comme indiqué ici)
Quelle option est la meilleure pour programmeurs, et pourquoi?
En tant que programmeur, je préfère que le saut de ligne se produise aux limites des mots (en supposant que votre évaluation que le saut de ligne est nécessaire est correcte).
Cependant, je changerais la façon dont vous vous cassez. Au lieu de continuer à la colonne 0, je pense que vous devriez continuer dans la même colonne que la ligne que vous cassez, et vous devriez indiquer d'une manière ou d'une autre qu'il ne s'agit pas d'une vraie ligne en soi, mais d'une continuation d'une ligne précédente très clairement. Je pense que les numéros de ligne ne suffisent pas. Quelque chose comme:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Un problème restant est qu'un symbole comme un espace sera très difficile à repérer lors d'un saut de ligne. Je pense que cela mérite réflexion, car un tel symbole peut être très pertinent dans le code. Peut-être que si un espace était utilisé comme position de rupture, il devrait également avoir un symbole spécial afin qu'il reste visible à la fin ou au début de la ligne.
La rupture des mots/noms est une mauvaise idée pour la simple raison qu'il est difficile de dire où le nom de la fonction commence et où il se termine. Les noms peuvent être abstraits, ce qui rend encore plus difficile pour le cerveau de recoudre.
Le premier semble plus naturel et bien que toujours difficile à lire, vous pouvez rapidement comprendre que le texte est enveloppant et commencer à déchiffrer. Le second est presque impossible à déchiffrer. Je voudrais copier et coller le code ailleurs juste pour vérifier le nom complet de la fonction.
Une option consiste à définir une largeur minimale sur le conteneur de code et laisser l'utilisateur défiler horizontalement . Le code qui s'enroule de manière inattendue est au mieux source de confusion, et dans des langages comme Python il apparaîtra complètement cassé. (Ce serait overflow-x: auto ou scroll sur le parent de l'élément de code en CSS.) 80 caractères à espacement fixe est souvent la longueur de ligne par défaut.
Je n'ai jamais entendu parler d'un algorithme d'habillage qui briserait les mots sur autre chose que des syllabes (ou des tirets doux). Il n'est donc pas conseillé de briser un mot à un caractère quelconque.
Pour les programmeurs, les mots dans le code sont des identifiants ou des opérateurs, etc. Ils n'ont de sens que dans leur ensemble. Donc, dans ce contexte, même la rupture des syllabes est mal avisée.
Faites une bascule: saut de ligne [oui] ou [non].
Selon le langage de programmation affiché, les sauts de ligne insérés modifieront l'exécution du code. Une fois que vous avez divisé le code sur une nouvelle ligne, indiquez-le en ajoutant le caractère de saut de ligne à la fin de la ligne.
Avec une bascule, vous pourrez donner à l'utilisateur de votre application la possibilité de faire ou non le retour à la ligne.
En outre, affichez les numéros de ligne. Lorsqu'une ligne est encapsulée, la 2e ligne ne doit pas être une nouvelle ligne dans l'affichage du numéro de ligne, ce qui garantit également que le lecteur sait qu'elle est censée être sur une seule ligne.
Je connais le bon moyen d'envelopper pour humains, y compris développeurs. La première façon. Vous ne cassez pas les mots. Si vous brisez des mots, ils ne sont plus lisibles. Lorsque vous atteignez le point d'habillage, vous pouvez rendre plus clair que la ligne continue, en mettant à droite un symbole comme une flèche ⤶. De bons éditeurs de texte le font.
C'est un rocher et un endroit dur. Gardez certainement les mots intacts. Aucun programmeur n'aimera cela (comme cela est déjà clair), trop d'informations sont supprimées par l'indentation qui est encrassée. Briser les mots ne résout pas cela et ajoute d'autres problèmes.
Pour tirer le meilleur parti d'une mauvaise situation, vous devez clairement délimiter les lignes . Vos exemples utilisent des rayures zébrées pour délimiter les lignes mais pour une raison quelconque, je pense que je préfère les lignes simples 1px au bas de chaque ligne - Je ne peux pas expliquer pourquoi je.
Et cela ressemble à Python code dans votre exemple. Vous vous rendez compte que dans Python en changeant l'indentation, vous changez la signification du code? La plupart des langues n'utilisent pas l'indentation comme élément syntaxique mais Python est l'une des langues qui le font. Dans la plupart des langues, le retrait de l'indentation est un inconvénient majeur (mais la précision la signification n'est pas changée) mais en Python c'est destructeur (la signification est changée, ou plus probablement le code pourrait être rendu invalide). Donc, si cet affichage de code doit supporter Python Je pense que vous voudrez peut-être repenser le chemin qui a conduit à ces restrictions (comme pas de défilement horizontal, etc.), je pense qu'il serait vraiment désastreux d'afficher Python code avec son l'indentation foiré.
S'il y a des endroits dans le code où les espaces blancs seraient sémantiquement insignifiants, on devrait limiter comme des pauses à de tels endroits quand c'est pratique. S'il n'y a pas de tels endroits, ou si la distance entre eux est souvent supérieure à environ 1/3 de la longueur d'une ligne, je suggérerais d'utiliser une police à espacement fixe avec des lignes de longueur fixe et d'utiliser des moyens pour montrer sur quelles lignes écran sont des continuations de lignes précédentes (par exemple précéder chaque ligne "réelle" d'un numéro de ligne dans une police plus petite; l'absence d'un numéro de ligne indiquera qu'une ligne n'est qu'une continuation de la précédente).
L'habillage de ligne basé sur les caractères à la manière de nombreux systèmes BASIC de micro-ordinateur est souvent moche, mais les petits écrans n'offrent pas toujours de très bonnes alternatives. Une bonne chose à propos de ces systèmes est que si l'on a une longueur de ligne fixe, par ex. 24 caractères, on peut l'utiliser pour juger de la longueur d'une chaîne qui devrait être par exemple exactement 80 caractères: ce doit être trois lignes plus huit caractères. Les systèmes qui utilisent des polices proportionnelles ou un habillage basé sur Word sont souvent utiles, mais peuvent rendre ces tâches de comptage de caractères beaucoup plus difficiles que celles qui affichent un nombre fixe de caractères à largeur fixe par ligne.
Je suis programmeur et j'ai donc le droit d'avoir un avis: utilisez la deuxième voie (habillage "tout casser").
Pourquoi? Eh bien, il y a plusieurs raisons. Tout d'abord, la première option ne sera pas toujours accessible. Quelqu'un trouvera another_veeeeery_long_function_name, Qui ne rentrera pas sur la ligne même s'il n'y a rien d'autre sur cette ligne.
Deuxièmement, dans les langages de programmation (en particulier Python), l'espace blanc est important. En particulier, dans Python chaque nouvelle ligne démarre une nouvelle commande, donc l'insertion de nouvelles lignes libère vraiment vraiment la lisibilité. Dans le premier exemple, j'aurais deviné que def en lui-même n'a pas de sens, donc un retour à la ligne a probablement eu lieu. Mais il existe des exemples où l'expression encapsulée peut être mal interprétée comme deux commandes distinctes: par exemple, considérez x = 1, very_long_function_name() (dans ce cas, x = 1, serait parfaitement valide). Bien sûr, les numéros de ligne et les rayures ajoutent des repères quant aux limites de ligne, mais l'apparence visuelle d'une ligne allant dans la limite de la fenêtre est un repère beaucoup plus fort.
Maintenant, il y a bien sûr le souci que les identifiants cassés à des points arbitraires soient illisibles. Pour améliorer l'abordabilité, je suggérerais les trois changements suivants: (1) réduire la distance interligne dans la ligne interrompue par mot (de sorte que la distance entre les lignes "logiques" soit plus grande que la distance interligne entre les lignes "visibles"). (2) ajouter des marques de césure (ou toute autre marque) indiquant que l'identifiant a été brisé - cela ne devrait pas être ambigu car dans la plupart des langues, les identificateurs ne peuvent pas contenir de tirets, et leur couleur les différenciera des signes moins. (3) les lignes enveloppées doivent continuer au même niveau d'indentation, afin que les limites des blocs puissent être facilement suivies.
