Pour distinguer un retour à la ligne automatique d’un saut de ligne enregistré, désactivez le renvoi à la ligne dans un éditeur de texte et examinez le texte d’origine. Ce guide Mac explique comment effectuer cette vérification, comment la mise en page du navigateur peut vous induire en erreur et ce que le code copié peut réellement prouver.

Quelle est la différence entre un retour à la ligne automatique et un saut de ligne ?

Un retour à la ligne automatique se produit lorsqu’un navigateur ou un éditeur déplace du texte sur une autre ligne d’affichage pour l’adapter à la largeur disponible. Un saut de ligne enregistré fait partie du texte lui-même. Le W3C distingue les retours à la ligne automatiques des sauts forcés, qui peuvent résulter de caractères de saut de ligne conservés ou de limites de blocs. Le traitement des espaces blancs en CSS modifie la présentation sans changer les données du document sous-jacent. CSS Text Module Level 3

Cette distinction fait qu’il existe trois possibilités lorsqu’un code apparaît sur plusieurs lignes : une seule ligne logique a été renvoyée automatiquement ; le texte contient plusieurs lignes logiques ; ou la structure de la page impose une coupure visuelle. Une capture d’écran ne permet pas à elle seule de déterminer de façon fiable laquelle s’applique.

Ici, « saut de ligne saisi » désigne un saut de ligne présent dans le texte source examiné. Sa présence ne permet pas de savoir qui l’a inséré : un formateur, un processus d’exportation ou une autre transformation a pu le produire. Il s’agit de déterminer si une séparation appartient au texte ou uniquement à sa présentation actuelle.

Comment vérifier le code dans un éditeur de bureau sur Mac ?

Utilisez Visual Studio Code pour cette procédure. Commencez par le fichier de code d’origine, s’il est disponible. Si vous ne disposez que d’une page publique, copiez le code pertinent dans un document séparé de l’éditeur, mais considérez ce document comme une preuve du texte copié tant que vous ne pouvez pas le comparer à l’original.

Désactivez le renvoi à la ligne sans reformater le texte

  1. Ouvrez le fichier ou l’extrait copié dans VS Code.
  2. L’éditeur étant actif, appuyez sur Option+Z pour exécuter Toggle Word Wrap.
  3. Vérifiez si la suite du texte rejoint la ligne d’affichage précédente et se prolonge horizontalement.
  4. Si le renvoi à la ligne était déjà désactivé, activez-le de nouveau pour comparer les deux états. Ce qui compte, c’est la différence entre les deux vues.

Microsoft indique que Option+Z est le raccourci macOS par défaut de Toggle Word Wrap, dont l’identifiant de commande est editor.action.toggleWordWrap. Si vos raccourcis sont différents, recherchez cette commande dans l’éditeur Keyboard Shortcuts. Référence des raccourcis clavier par défaut

Lorsque editor.wordWrap est réglé sur on, VS Code renvoie le texte à la ligne selon la largeur de la fenêtre d’affichage de l’éditeur. Désactiver le renvoi à la ligne supprime donc ces continuations visuelles. Une séparation qui subsiste dans le même texte inchangé est une limite de ligne logique, et non un retour automatique propre à cet éditeur. Modification de base

Utilisez ce tableau de décision pour comparer les vues :

Observation Ce que cela indique Étape suivante
Une suite rejoint la ligne précédente lorsque le renvoi à la ligne est désactivé Il s’agissait d’un retour à la ligne automatique dans l’éditeur Conservez le texte tel quel
Deux lignes restent séparées lorsque le renvoi à la ligne est désactivé Le texte examiné contient une limite de ligne Comparez avec l’original si vous avez examiné une copie
Une séparation présente sur la page disparaît dans le texte copié La page et la représentation copiée diffèrent Examinez le texte et la structure de la page
Une séparation subsiste dans la copie, mais aucun original n’est disponible Le texte copié contient cette séparation Ne tirez pas de conclusion sur son origine

Essayez avec un exemple fictif

Collez l’exemple d’une seule ligne suivant dans un document séparé. Il s’agit d’un exemple de texte JavaScript ; il n’est pas nécessaire de l’exécuter.

const labels = ["Amber", "Birch", "Cedar", "Dune", "Elm", "Fern", "Grove", "Harbor"];

Réduisez suffisamment la largeur de l’éditeur pour que le texte soit renvoyé à la ligne. Lorsque le renvoi est activé, l’instruction peut occuper plusieurs lignes d’affichage. Désactivez-le : l’instruction devrait revenir sur une seule ligne logique, même si vous devez faire défiler horizontalement pour en lire la fin.

Comparez maintenant avec cette version volontairement répartie sur plusieurs lignes :

const labels = [
  "Amber", "Birch", "Cedar", "Dune",
  "Elm", "Fern", "Grove", "Harbor"
];

Ces quatre lignes logiques restent distinctes lorsque le renvoi à la ligne est désactivé. À faible largeur, chacune d’elles peut aussi être renvoyée automatiquement. C’est la distinction utile : des sauts de ligne enregistrés et des retours automatiques peuvent coexister dans le même extrait de code.

Évitez de formater le document pendant la comparaison. Le but est de modifier l’affichage tout en gardant le texte examiné inchangé. Sinon, une limite de ligne modifiée pourrait être due à une modification du texte plutôt qu’à un paramètre d’affichage.

Pourquoi le redimensionnement du navigateur n’est-il qu’un test préliminaire ?

Imaginez une page publique abstraite avec une colonne de navigation et un panneau de code. En élargissant la fenêtre du navigateur, vous pouvez donner plus d’espace au panneau. Si une séparation se déplace vers un autre mot, cela plaide en faveur d’une explication par le renvoi à la ligne. Toutefois, si le panneau a une largeur fixe, le redimensionnement de la fenêtre extérieure peut ne rien changer.

Une séparation qui ne bouge pas ne permet donc pas de conclure. Le navigateur peut conserver un saut de ligne, rencontrer une coupure structurelle ou effectuer un renvoi à la ligne dans un panneau dont la largeur utile n’a pas changé. Confirmez le résultat en examinant la représentation du texte au lieu de considérer le redimensionnement de la fenêtre comme une preuve.

Le CSS détermine également si les sauts de ligne enregistrés sont visibles. MDN documente les valeurs courantes suivantes : Propriété CSS white-space

Valeur CSS Traitement des sauts de ligne dans le texte source Renvoi automatique
normal Fusionnés avec les autres espaces blancs Autorisé
pre Conservés Désactivé
pre-wrap Conservés Autorisé
pre-line Conservés ; les espaces et les tabulations sont fusionnés Autorisé

Par conséquent, pre-wrap peut afficher ensemble les deux types de séparation, tandis que normal peut masquer les sauts de ligne du texte source. Désactiver le renvoi à la ligne avec nowrap ne suffit pas pour vérifier que le texte source est préservé, car les espaces blancs sont également fusionnés. Pour un simple bloc de texte que vous contrôlez, pre est la valeur à utiliser pour comparer lorsque vous avez besoin de préserver les espaces blancs sans renvoi automatique. Propriété CSS white-space

Le texte copié permet-il de retrouver les sauts de ligne d’origine ?

Le texte copié est utile, mais constitue une représentation distincte. MDN décrit innerText comme le texte affiché qui approche ce que produirait la sélection et la copie d’un élément. Il tient compte de l’apparence affichée, notamment des coupures explicites telles que les éléments br. Un saut de ligne dans un extrait collé ne prouve donc pas, à lui seul, que la chaîne de code d’origine en contenait un. HTMLElement : propriété innerText

Pour un conteneur de code statique simple, textContent répond à une autre question : cette propriété renvoie le texte du nœud et de ses descendants, en concaténant le texte des descendants sans tenir compte de l’apparence affichée. Elle est donc utile pour examiner le texte du DOM, à condition que le conteneur contienne bien le code recherché. Node : propriété textContent

Ces propriétés ne sont pas des outils interchangeables pour retrouver le texte d’origine. Une coupure structurelle n’est pas nécessairement un saut de ligne dans textContent ; inversement, des espaces blancs peuvent exister dans le texte source sans apparaître sous forme de coupure à l’écran. Lorsque le texte de la page et sa mise en page ne concordent pas, décrivez le résultat avec précision : « le texte du DOM contient un saut de ligne », « la mise en page impose une coupure » ou « la version copiée contient un saut de ligne ». Évitez d’affirmer davantage que ce que la représentation examinée permet d’établir.

Qu’est-ce qui change dans un éditeur de code utilisé dans un navigateur ?

Un éditeur de navigateur peut gérer son document indépendamment des éléments qu’il affiche. La documentation officielle du code source de CodeMirror décrit, par exemple, les lignes du document au moyen de son modèle Text : lines compte les lignes logiques, et line(n) récupère une ligne par son numéro. La position to d’une ligne se trouve avant le saut de ligne qui la suit, ou à la fin du document. Documentation de l’API du texte du document CodeMirror

CodeMirror indique également que son affichage dessine dans le DOM uniquement le code visible, ainsi qu’une marge autour de celui-ci. Sa propriété lineWrapping décrit le renvoi à la ligne dans la vue. Il en résulte qu’il ne suffit pas de compter les lignes affichées ou d’extraire le DOM visible de l’éditeur pour établir les lignes du document complet. Documentation de l’API de la vue de l’éditeur CodeMirror

Pour une vérification courante sur ordinateur, utilisez la commande de téléchargement, d’exportation ou de copie documentée par l’application hôte, lorsqu’elle est disponible, puis examinez le résultat avec le renvoi à la ligne désactivé. Si vous gérez une intégration CodeMirror, servez-vous de son modèle de document pour déterminer les lignes logiques. L’existence d’une API de bibliothèque ne prouve pas que toutes les applications proposent une commande équivalente à l’utilisateur.

Un formulaire peut-il ajouter des sauts de ligne qui n’ont jamais été saisis ?

Oui. La norme HTML du WHATWG distingue la valeur actuelle d’une zone de texte de sa représentation lors de l’envoi. Avec wrap="soft", le texte peut être renvoyé visuellement à la ligne sans que des retours supplémentaires soient ajoutés lors de l’envoi. Avec wrap="hard", la représentation envoyée peut recevoir des sauts de ligne ; cet état nécessite que cols soit spécifié. La valeur de l’API normalise les fins de ligne au format LF. Norme HTML : l’élément textarea

Cela compte lorsque vous comparez le texte avant et après un processus utilisant un formulaire. Une séparation qui apparaît uniquement dans un résultat envoyé ou exporté peut provenir de cette étape de traitement. Examinez la représentation pertinente pour votre tâche : le texte actuel de l’éditeur pour identifier les séparations saisies, ou le fichier obtenu pour déterminer ce qui a réellement été exporté.

Comment préserver les limites dues au navigateur et au façonnage du texte ?

Laissez le navigateur ou l’éditeur gérer le renvoi visuel à la ligne. Le W3C précise que overflow-wrap: anywhere garde les graphèmes liés et préserve le façonnage à travers le retour à la ligne ainsi introduit. Reconstruire les lignes en insérant des sauts de ligne après un nombre fixe de caractères ne reproduit pas ces règles de mise en page. CSS Text Module Level 3

Pour réutiliser un extrait de code, commencez par obtenir la meilleure source disponible, comparez le texte avec et sans renvoi à la ligne, et conservez ses limites de ligne enregistrées sauf si vous souhaitez le modifier. Si seule une page rendue est disponible, consignez ce que vous pouvez établir à propos de cette représentation et laissez les séparations incertaines sans conclusion. Vous disposerez ainsi d’une vérification reproductible sans qu’un ajustement de l’affichage modifie accidentellement le texte.

Sources