Des insécables dans le texte avec Write.as

Avec un blog hébergé sur Write.as il est possible d’injecter du JavaScript dans le header de chaque page. Une possibilité que j’ai utilisé pour placer des espaces fines insécables avant ou après certains signes de ponctuation, et obtenir ainsi des réglages de micro-typographie correctes. Quelques explications.

Le JavaScript

Pour procéder j’utilise le script espaceFine de Victor Loux, qui entend contourner l’impossibilité relative d’utiliser directement le caractère Unicode de l’espace fine insécable (U+202F) du fait de son mauvais support par certains navigateurs et par de nombreuses fontes.

Le script insère donc automatiquement, au moment de l’affichage de la page (chargement du DOM), une entité HTML &nbsp; là où cela nécessaire. Pour que cette espace ne soit pas trop importante, elle est incluse dans une balise <span> à laquelle est attribué une chasse réduite, par défaut de .67em (mais cela peut se configurer si nécessaire). C’est une solution flexible qui fonctionne avec IE6+, Gecko et WebKit.

Ce que fait concrètement ce script :

Note — Si ce n’est pas encore très clair, pour une illustration concrète de ce que fait ce script, se reporter à la démo disponible sur la page Web de présentation : c’est visisble à l’œil nu.

Mise en œuvre

La mise en œuvre va donc consister à coller les sources minifiées du script et le code d’activation de celui-ci dans un champs de saisi dédié de l’interface de Write.as

  1. Récupérer les sources du script espaceFine sur le dépôt Github.
  2. Aller sur l’interface d’administration de Write.as (choisir l’onglet « Customize »).
  3. Copier le contenu du fichier dist/espacefine.min.js .
  4. Coller ce code dans le champs « Custom JavaScript ».
  5. Activer le script pour la page avec un document.addEventListener (voir ci-dessous).
  6. Enregistrer.
// Le script espaceFine
function espaceFine(e){var t=new RegExp(/(\u00AB|\u2014)(?:\s+)?|(?:\s+)?([\?!:;\u00BB])/g),o='<span style="font-size: 0.6em">&nbsp;</span>',n="html,head,style,title,link,meta,script,object,iframe,pre,code,textarea,noscript";e||(e=document.body);for(var r,a,c,d,i="object"==typeof e&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(Object.prototype.toString.call(e))&&Object.prototype.hasOwnProperty.call(e,"length")&&(0===e.length||"object"==typeof e[0]&&e[0].nodeType>0),r=i?e:e.childNodes,l=r.length,p=n.split(",");l--;)a=r[l],a!=document.body&&(1===a.nodeType&&-1===p.indexOf(a.nodeName.toLowerCase())&&arguments.callee(a),3===a.nodeType&&t.test(a.data)&&(c=a.parentNode,d=function(){var e=a.data.replace(t,"$1"+o+"$2"),n=document.createElement("div"),r=document.createDocumentFragment();for(n.innerHTML=e;n.firstChild;)r.appendChild(n.firstChild);return r}(),c.insertBefore(d,a),c.removeChild(a)))}

// L'activation dans la page
document.addEventListener("DOMContentLoaded", function(event) { 
    espaceFine();
});

C’est tout !

A noter que la version du script contenue dans l’exemple ci-dessus contient une légère modification par rapport à la configuration par défaut. J’ai en effet réduit la chasse des espaces fine insécables de .67em à .6em. je trouve cela plus lisible et plus élégant.

Quelques remarques

1— Le code est quand même un peu un vilain hack (« expérimental » comme dit Victor Loux), et n’est plus vraiment maintenu, mais cela fonctionne bien et avec un impacte plutôt négligeable sur le chargement des pages.

2— Le script offre aussi un certains nombres de possibilités de personnalisation. Il y a quelques exemples sur la page Web de présentation, et des indications encore un peu plus précises en commentaire du code source non minifié (fichier src/espacefine.js).

3— La fonction d’insertion de JavaScript personnalisé est disponible sur les comptes Pro de Writes.as mais a été récemment enlevé de Write Freely (0.81) pour « raison de sécurité ». Il y a une discussion en cours sur le sujet sur le forum de la communauté. A suivre…


Références :


Publication : 08/02/2019 — Mise à jour : 08/02/2019 Tags : #writeas #wacustom #javascript #espaceFine #typographie