Typographie française dans WordPress

Typographie française dans WordPress

Typographie, ponctuation

En typographie française, le point-virgule ;, les deux-points :, le point d’interrogation ?, le point d’exclamation ! et les chevrons « ou » doivent être précédés et suivis d’un espace. Nous avons également l’habitude de mettre un espace devant le signe %. Les signes énoncés ci-devant risquent de revenir à la ligne car ils sont enveloppés dans les balises <code> et <strong>.

En typographie anglaise, les deux-points, le point-virgule, le signe %, les points d’exclamation et d’interrogation sont collés au mot qui les précède.

Lorsque l’on tape un article dans WordPress, il est courant, en français de respecter les règles de typographie française concernant les espaces de ponctuation. Néanmoins, dans le rendu de l’article à l’écran, si un signe tel qu’un deux-points, un point virgule ou autre n’a pas la place de se trouver en fin de ligne, il sera placé au début de la ligne suivante, ce qui n’est pas vraiment esthétique.

D’autre part, un auteur va souvent oublier, et de plus ce n’est pas pratique, de placer des espaces insécables pour éviter les retours à la ligne non désirés.

Code JavaScript

Afin de remédier à cela, on peut écrire un code javascript qui permettra de remplacer les espaces devant ou après les signes de ponctuation par des espaces insécables. Il suffira de charger le fichier javascript contenant ce code dans le frontend du site.

post-content est la classe de la section que nous voulons modifier. Attention, sur certains thèmes, la classe de la section du texte principal peut s’appeler différemment, par exemple entry-content. Si l’on veut ajouter d’autres sections avec une autre classse, il suffit de la rajouter dans l’argument de getElementByClassName() séparé par une virgule. Par exemple, si l’on veut intégrer une classe post-excerpt :

Dans le code, les signes de ponctuation sont indiqués entre les crochets de l’expression régulière, \s représente un caractère d’espace et &nbsp; est un caractère insécable en HTML non-break space. Dans la fonction replace, le premier argument est le motif de recherche d’expressions régulières, les slashes / entrant et fermant sont les limites du motif, g indique que l’on recherche l’expression de façon globale (et pas seulement la première trouvée), les parenthèses indiquent la mise en mémoire que l’on retrouve avec $1 dans l’expression de remplacement du deuxième argument, les caractères entre crochets du motif sont tous les caractères recherchés. En cas d’oubli, on peut donc en rajouter. Attention à la simple double quote "; qui pourrait perturber le fonctionnement des attributs des balises HTML.

Et hop, un moyen simple et efficace pour rendre plus esthétique un texte en français, en respectant les règles de typographie.

1 commentaire

  1. Comme la double quote ", il y a aussi la simple quote ' á laquelle il ne vaut mieux pas toucher. Néanmoins, excellent script.

    Répondre

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.