Table des matières
Définition
En typographie, l’espace insécable est un caractère qui permet d’éviter la séparation de mots ou de groupes de mots lors d’un retour à la ligne automatique.
A quoi ça sert ?
Dans le domaine du web, l’utilisation d’espaces insécables dans les pages HTML est essentielle pour garantir une lecture claire et une mise en page esthétique.
On l’appelle aussi espace fine insécable ou espace fine (car oui, en typo, le nom « espace » est féminin).
On l’utilise en typographie surtout pour éviter qu’un signe de ponctuation se retrouve tout seul en début de ligne, coupé de la phrase qu’il ponctue après un retour à la ligne imposé par la mise en page, comme dans ces exemples :
- Quelle heure est-il
? - Il fait super beau
! - Il est vrai que je l’aime bien
; mais pas assez pour l’inviter.
Le problème se pose avec tous les signes qui, en français, ont obligatoirement un espace avant le signe de ponctuation :
- le point-virgule
- les deux-points
- le point d’exclamation
- le point d’interrogation
Dans cet article, nous explorerons les différentes méthodes pour créer un espace insécable en HTML, ainsi que les types d’espaces insécables disponibles et comment les générer à l’aide de code.
L’espace insécable en HTML se note
Utilisé pour améliorer l’apparence des espacements liés aux signes typographiques, l’espace insécable se note de plusieurs manières, en HTML, et en Unicode.
Le problème de la mise en page, des espacements et des retours à la ligne
Sur une page web, à cause du responsive design et de la variabilité de la taille des écrans, la largeur d’un bloc de texte n’est pas connue à l’avance puisqu’elle dépend entre autres de la taille de l’écran, de la disponibilité de la police de caractères ou de son remplacement par une police standard.
Ce qui fait que les signes de ponctuation peuvent facilement changer de place et se retrouver en début de ligne.
Par défaut, beaucoup de CMS n’ont pas été conçus pour afficher du français ni respecter ses règles typographiques, et leur usage mène donc tout droit à des problèmes d’espacement en masse.
Sur WordPress, il existe un plugin pour remplacer automatiquement les espaces d’avant les signes de ponctuation par un espace insécable.
A défaut d’extension pour automatiser cette tâche, il faut donc rajouter chaque espace insécable à la main en éditant le code html du texte.
Utiliser l’entité HTML non-breakable space
Le code html d’une espace insécable correspond à une entité html ( = code qui permet d’insérer un caractère spécial, et qui commence toujours par le caractère &, qu’on nomme « esperluette ») qui s’écrit (enlevez l’espace après le &)
& nbsp;
La partie « nbsp » de ce code est l’abréviation du nom anglais d’une espace insécable : non-breakable space.
Il existe aussi l’entité html suivante, qui permet de générer un espace fin, moins large que l’espace normal :
& thinsp;
Attention, ces codes ne fonctionnent qu’en mode html, sinon ils vont s’afficher comme étant du texte, sans se transformer en espaces insécables.
Utiliser le code Unicode
Une autre méthode consiste à utiliser le code Unicode U+00A0 pour insérer un espace insécable. Vous pouvez le faire en utilisant l’entité HTML   ou  .
Par exemple :
<p>Il était une fois un chat.</p>L’espace insécable en CSS
On peut ajouter des espaces insécables sur une classe CSS.
Pour insérer une espace insécable en CSS, il faut utiliser le code \0000A0, comme ceci :
.classecss:before{ content : "\0000A0"; }Types d’espaces insécables et comment les créer
Il y a 2 types d’espace insécable : fine ou moyenne.
Espace insécable fine
L’espace insécable fine (thin space) est plus étroite que l’espace insécable standard.
Pour l’insérer en HTML, utilisez l’entité   ou le code Unicode U+2009   ou  .
Par exemple :
<p>Il était une fois un chat.</p>Espace insécable moyenne
L’espace insécable moyenne (medium space) est légèrement plus large que l’espace insécable standard.
Pour l’insérer en HTML, utilisez le code Unicode U+205F   ou  .
Par exemple :
<p>Il était une fois un chat.</p>Bonnes pratiques et astuces pour l’utilisation des espaces insécables
L’espace insécable s’applique avec pertinence :
- aux nombres et aux unités (monnaies, poids, longueur…)
- aux titres et aux noms propres
- aux abréviations et acronymes
Utiliser les espaces insécables pour les nombres et les unités
L’un des cas les plus courants d’utilisation des espaces insécables est pour les nombres et leurs unités (par exemple, les unités de mesure ou les devises). Cela permet de maintenir le nombre et l’unité ensemble et d’améliorer la lisibilité.
Par exemple :
<p>Le prix est de 250 €.</p>Utiliser les espaces insécables pour les titres et les noms
Les espaces insécables sont également utiles pour conserver les titres et les noms sur la même ligne, améliorant ainsi l’esthétique et la lisibilité.
Par exemple :
<p>Le Dr Dupont est un spécialiste en cardiologie.</p>
Utiliser les espaces insécables pour les abréviations et les acronymes
Les abréviations et les acronymes peuvent également bénéficier de l’utilisation d’espaces insécables pour éviter des ruptures inappropriées.
Par exemple :
<p>La société XYZ SA est cotée en bourse.</p>Conclusion
En résumé, l’espace insécable est un outil typographique précieux pour les développeurs web, permettant de préserver la lisibilité et l’esthétique des pages HTML.
En maîtrisant les différentes méthodes de création d’espaces insécables et en suivant les bonnes pratiques, vous pourrez optimiser la mise en page de vos projets web tout en garantissant une expérience utilisateur de qualité.
