Prévention des sauts de ligne dans les éléments code

Présentation

Un détail typographique important sur les sites web est la gestion des sauts de ligne, en particulier dans les éléments . Les navigateurs choisissent où insérer les sauts de ligne, mais cela peut parfois entraîner des lectures difficiles, notamment dans les extraits de code.

Mécanisme de prévention

Pour éviter les sauts de ligne indésirables dans les éléments , une solution consiste à ajouter une classe CSS nowrap à ces éléments lorsque leur contenu est court et contient des caractères pouvant provoquer un saut de ligne, comme les tirets ou les espaces.

import re
def add_nowrap(match: re.Match[str]) -> str:
    contents = match.group("contents")
    if "-" in contents or " " in contents:
        return f"<code class="nowrap">{contents}</code>"
    return match.group(0)

Ceci est combiné avec une règle CSS qui utilise la propriété text-wrap pour indiquer aux navigateurs de ne pas faire de saut de ligne : code.nowrap { text-wrap: nowrap; }.

Implémentation et avantages

L’implémentation de cette fonctionnalité se fait en deux étapes : d’abord, un script Python utilise des expressions régulières pour détecter les éléments courts contenant des caractères de saut de ligne, puis ajoute la classe nowrap à ces éléments. Ensuite, la règle CSS s’applique pour empêcher les sauts de ligne.

Avantages et limites

Cette approche améliore la lisibilité des extraits de code sur le site web en évitant les sauts de ligne indésirables. Cependant, elle pourrait nécessiter des ajustements pour les très longs extraits de code, où les sauts de ligne sont préférables pour éviter un espace blanc excessif sur la ligne précédente.