Pour garder un signe de ponctuation précédé d’une espace avec le mot qui le précède sur une page web, remplacez l’espace ordinaire par une espace insécable ou entourez les deux éléments d’un petit élément span CSS sans retour à la ligne. Sur votre Mac, utilisez un test HTML local pour vérifier le résultat à différentes largeurs.

Ce guide s’adresse à toute personne qui modifie le texte ou le code HTML d’une page sur Mac, par exemple le libellé d’une vignette abstraite comme Beta : dans une carte étroite. Il s’agit de préserver l’espace visible tout en empêchant le deux-points de passer seul à la ligne suivante. Les exemples conservent volontairement cet espacement.

Quelle solution choisir ?

Commencez par déterminer si la règle d’espacement doit s’appliquer au texte lui-même ou à la présentation de la page. Unicode définit U+00A0 NO-BREAK SPACE comme l’équivalent insécable d’une espace ordinaire, et U+202F NARROW NO-BREAK SPACE comme sa variante plus étroite. Ces caractères offrent deux options d’espacement visuel différentes. Unicode Standard, Chapter 6

Votre situation de modification Solution à essayer d’abord Élément à vérifier
Vous pouvez modifier le texte et souhaitez un espace de largeur normale Remplacez l’espace ordinaire par U+00A0 Le texte enregistré contient toujours le caractère insécable
Vous souhaitez délibérément un espace plus étroit Utilisez U+202F Le résultat convient à la police réellement utilisée sur la page
Vous souhaitez conserver une espace ordinaire dans le texte Appliquez white-space: nowrap à un span contenant les deux éléments Le span inclut le mot, l’espace et la ponctuation
Vous pouvez uniquement consulter la page Apportez la correction dans son code source modifiable ou demandez à la personne qui la gère Une expérience locale ne modifie pas la page d’origine

Dans le code source HTML, écrivez Beta :. La table des références de caractères du WHATWG associe   à U+00A0. Remplacez l’espace existante ; ne laissez pas d’espace ordinaire avant la référence. HTML Standard: Named character references

Pour appliquer une règle de présentation, placez Beta : dans un élément span en ligne et appliquez white-space: nowrap à ce span. Laissez le paragraphe environnant se renvoyer normalement à la ligne. MDN indique que white-space contrôle à la fois le traitement des espaces et le renvoi à la ligne. MDN: white-space

En pratique, il faut déterminer quelle portion de texte doit rester groupée. Dans cet exemple, protégez uniquement Beta :. Protéger Tile Alpha Beta : Next tile limiterait inutilement le libellé entier. Commencez par le plus petit groupe qui exprime le lien souhaité.

Comment créer un test local avec TextEdit

Créez un fichier de test distinct avant de modifier une page existante. Apple explique comment utiliser TextEdit en mode texte brut pour créer des fichiers HTML, les enregistrer avec l’extension .html et choisir Use .html lorsque l’option est proposée. Work with HTML documents in TextEdit on Mac

  1. Ouvrez TextEdit et choisissez File > New.
  2. Choisissez Format > Make Plain Text.
  3. Collez l’exemple complet ci-dessous.
  4. Choisissez File > Save et nommez le fichier punctuation-test.html.
  5. Si un message apparaît, choisissez Use .html.
  6. Dans Safari, utilisez File > Open File pour ouvrir le fichier enregistré.

Il s’agit d’un document HTML autonome complet. Il ne nécessite ni bibliothèque, ni installation, ni connexion réseau. Les trois cartes utilisent le même texte synthétique, mais chacune traite différemment l’espace avant le deux-points.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Punctuation wrap test</title>
<style>
  body {
    font: 20px/1.5 system-ui, sans-serif;
    margin: 2rem;
  }
  .card {
    width: 14ch;
    max-width: 100%;
    border: 1px solid #888;
    padding: 1rem;
    margin-block: 1rem;
  }
  .pair {
    white-space: nowrap;
  }
</style>
<h1>Punctuation wrap test</h1>
<h2>Ordinary space</h2>
<p class="card">Tile Alpha Beta : Next tile</p>
<h2>Nonbreaking space</h2>
<p class="card">Tile Alpha Beta&nbsp;: Next tile</p>
<h2>Local no-wrap rule</h2>
<p class="card">Tile Alpha <span class="pair">Beta :</span> Next tile</p>
</html>

La conversion de la référence de caractère de l’exemple a été vérifiée avec un analyseur : &nbsp; correspond à U+00A0. Le rendu dans un navigateur n’a pas été exécuté pendant la préparation. Utilisez la comparaison suivante pour vérifier la mise en page dans le navigateur de votre Mac.

Comparez le point de rupture, pas une seule capture d’écran

La largeur illustrative 14ch est une valeur de départ, pas un point de rupture garanti. Remplacez-la par 10ch, enregistrez, rechargez, puis essayez 18ch. Repérez une largeur où, dans la carte avec l’espace ordinaire, le deux-points se sépare de Beta. Dans les deux versions protégées, le résultat attendu est que Beta et le deux-points restent ensemble tandis que les autres mots peuvent passer à la ligne.

Si les trois cartes semblent d’abord identiques, cela ne prouve pas que les traitements de l’espace sont équivalents. Il se peut simplement que le duo ait suffisamment de place. Faites varier la largeur jusqu’à ce que le point de rupture concerné arrive en fin de ligne, puis agrandissez le texte et recommencez.

Pour rouvrir le fichier dans TextEdit, utilisez File > Open, sélectionnez le fichier, choisissez Show Options, puis sélectionnez Ignore rich text commands si nécessaire. Apple documente également le réglage Display HTML files as HTML code instead of formatted text. Ces options permettent de modifier directement le code source. Apple’s TextEdit HTML instructions

Pourquoi une espace insécable peut-elle ne pas suffire ?

Un caractère insécable fonctionne dans le cadre des règles de flux du texte du navigateur. Avant d’ajouter d’autres caractères invisibles, vérifiez si le problème vient du contenu, d’une règle CSS qui le remplace ou d’une limite de mise en page.

La page affiche la référence littéralement

Si la page affiche les caractères &nbsp;, votre saisie a été interprétée comme du texte au lieu d’être analysée comme une référence de caractère HTML. Dans un champ de code source HTML, utilisez Beta&nbsp;:. Dans un champ de texte ordinaire, insérez plutôt le caractère insécable lui-même.

La même distinction s’applique à JavaScript. L’affectation d’une chaîne via textContent crée du texte ; elle n’analyse pas les références HTML. Une chaîne JavaScript peut contenir le caractère sous la forme "Beta\u00A0:". Évitez également d’affecter textContent à tout un paragraphe mis en forme pour corriger un seul espace : cela remplace ses éléments enfants existants. MDN: Node.textContent

Une règle CSS autorise des coupures particulièrement agressives

Vérifiez la valeur line-break: anywhere. MDN indique que cette valeur autorise les coupures autour des unités typographiques tout en ignorant les interdictions associées aux classes de liaison et de liaison de mots. Un caractère insécable ajouté ne peut donc pas être considéré comme une dérogation absolue à ce réglage. MDN: line-break

Examinez également overflow-wrap. Sa valeur anywhere permet de couper une séquence normalement insécable lorsque cela est nécessaire pour éviter un débordement. Ce comportement de secours diffère d’une coupure ordinaire à une espace. MDN: overflow-wrap

Utilisez un span local sans retour à la ligne lorsque la présentation exige que le petit groupe reste intact. Vérifiez la règle effectivement appliquée à ce span, en particulier si la feuille de style de la page contient des sélecteurs plus spécifiques. Limitez la correction à cette zone afin que les autres textes longs conservent leur comportement de renvoi à la ligne.

La ponctuation occupe une boîte de mise en page distincte

Vérifiez si le deux-points est un texte en ligne ordinaire ou s’il se trouve dans un inline-block ou un autre élément en ligne atomique. Le W3C décrit des possibilités de coupure particulières autour des éléments en ligne atomiques, y compris une exception concernant les espaces insécables adjacentes. Une espace insérée à côté d’une telle boîte n’équivaut pas à une espace dans un seul flux de texte continu. CSS Text Module Level 3: Line Breaking Details

Pour ce libellé simple, gardez le mot, l’espace et la ponctuation dans un seul span en ligne ordinaire. Supprimez tout <br> explicite entre ces éléments si vous souhaitez que les retours à la ligne se fassent automatiquement ; nowrap empêche les retours à la ligne souples, mais pas les sauts de ligne forcés. CSS Text Module Level 3: White Space and Wrapping

Comment préserver le façonnage du texte dans le navigateur et gérer les mises en page étroites ?

Gardez chaque mot intact au lieu d’en renvoyer les lettres individuellement à la ligne. Le W3C définit les cas où le façonnage doit se poursuivre au-delà des limites entre éléments en ligne et ceux où des changements, comme l’ajout de marges intérieures, de bordures ou d’un alignement, imposent une interruption. Un span en ligne simple évite d’introduire des limites de mise en forme inutiles. CSS Text Module Level 3: Shaping Across Element Boundaries

Il reste une contrainte physique : le groupe protégé doit disposer d’une largeur suffisante. Si le conteneur est plus étroit que Beta :, conserver les deux éléments ensemble peut provoquer un débordement. Testez volontairement cette situation. Choisissez ensuite une solution de mise en page, par exemple élargir la carte ou raccourcir son libellé, plutôt que de masquer le texte concerné. Le comportement sans retour à la ligne est décrit dans la définition de white-space du W3C.

Avez-vous besoin d’une bibliothèque de coupure des lignes ?

Pour une page web ordinaire, cette tâche n’en nécessite pas. La bibliothèque appelée linebreak calcule les possibilités de coupure définies par Unicode ; sa documentation précise que le choix effectif de l’emplacement revient au logiciel qui connaît la largeur disponible et la taille du texte affiché. Son fichier README indique actuellement une prise en charge de la version 13 d’Unicode. foliojs/linebreak documentation

Cette distinction est importante si un autre outil utilise déjà cette bibliothèque. Une liste de coupures possibles ne permet pas de déterminer où un navigateur renverra à la ligne un texte façonné. Pour cette modification de page, laissez le navigateur gérer le façonnage des polices et la disposition finale des lignes, et exprimez la contrainte souhaitée avec le caractère ou avec du CSS appliqué localement.

Avant d’appliquer la correction, vérifiez trois points : l’espace reste visible, le mot et la ponctuation restent ensemble à l’approche de la fin d’une ligne, et le texte environnant peut toujours passer à la ligne. Utilisez une espace insécable lorsque ce lien doit être porté par le texte, ou un span sans retour à la ligne dont la portée est limitée lorsqu’il relève de la présentation. Vérifiez à nouveau la page réelle à sa largeur utile minimale.

Sources