Word vers HTML propre

Ce que contient vraiment le presse-papiers

Quand vous copiez dans Word, le presse-papiers reçoit plusieurs versions de votre sélection à la fois. L’une est du texte brut. Une autre est du HTML et c’est celle que prend un éditeur de site web quand vous collez.

Le HTML de Word décrit l’apparence de la page sur votre écran. Un seul paragraphe arrive ainsi :

<p class="MsoNormal" style="margin-bottom:8.0pt;line-height:107%">
  <span style="font-size:11.0pt;font-family:&quot;Calibri&quot;,sans-serif">Hello<o:p></o:p></span>
</p>

Par-dessus viennent une feuille de style de plusieurs centaines de lignes, des commentaires conditionnels et des balises du vocabulaire propre à Office. Google Docs est plus court mais pas plus propre. Tout est enveloppé dans un conteneur portant un identifiant docs-internal-guid et le texte en gras est un span avec font-weight:700. Une fois sur un site web, ces styles en ligne l’emportent sur le design du site, ce qui explique que chaque article collé ait un aspect un peu différent du précédent.

Ce qui est gardé, converti et retiré

Les titres suivent une seule règle. Le résultat n’utilise que les niveaux 2 à 4, parce que sur la plupart des sites le titre de la page occupe déjà le niveau 1. Si votre document contient un Titre 1 ou un Titre, tous les titres descendent d’un cran. Tout ce qui est plus profond que le niveau 4 devient niveau 4.

Une espace insécable ne survit que là où elle a un rôle : avant ; : ! ? % ou un symbole monétaire et entre un chiffre et ce qui le suit. Toutes les autres deviennent des espaces ordinaires.

Lire le résumé

Après un collage, la première ligne nomme la source reconnue par l’outil grâce aux empreintes du code (Word, Google Docs, LibreOffice ou autre chose) et montre la taille du code avant et après. Une baisse de 80 à 95 pour cent est normale pour Word.

En dessous, vous trouvez le nombre de styles en ligne et de classes retirés et de fausses listes reconstruites. Deux lignes vous demandent de faire quelque chose :

• Images retirées. Une image collée depuis Word pointe vers un fichier temporaire sur votre propre ordinateur et une image de Google Docs vers une adresse qui expire. Vos visiteurs ne verraient ni l’une ni l’autre. Téléversez l’image dans l’éditeur de votre site et écrivez-y son texte alternatif.
• Paragraphes entièrement en gras. Un paragraphe court (moins de 90 caractères) en gras du début à la fin est généralement un titre que quelqu’un a tapé en texte gras. L’outil ne devine pas le niveau à votre place. Transformez-le en vrai titre pour que les moteurs de recherche et les lecteurs d’écran voient le plan.

Deux façons de récupérer le résultat

Copier pour l’éditeur

Place le contenu nettoyé dans le presse-papiers en texte enrichi. Collez-le dans l’éditeur de blocs de WordPress et chaque titre, paragraphe, liste et tableau devient son propre bloc. La plupart des éditeurs visuels le traitent de la même façon.

Code HTML

Le code source, indenté et lisible. Utilisez-le dans un bloc HTML personnalisé, dans la vue code d’un service d’infolettre ou dans un gabarit.

Si le presse-papiers ne contient aucun HTML, par exemple pour du texte copié depuis un terminal ou un éditeur de texte brut, les lignes vides deviennent des sauts de paragraphe et les sauts de ligne simples deviennent <br>.

Ce qui est perdu volontairement

Les couleurs, le surlignage, l’alignement, les retraits, les tailles de police et les mises en page en colonnes sont jetés. Les commentaires et les zones de texte aussi. Les liens vers des signets à l’intérieur du fichier Word, comme les renvois de notes de bas de page et les entrées de table des matières, perdent leur lien et gardent leur texte. Les bordures de tableau et les largeurs de colonne partent aussi et c’est votre site qui décide de l’apparence des tableaux. Le réglage de typographie facultatif est prévu pour les textes écrits en français et doit rester désactivé pour les autres langues.