WYSIWYG et MS Word

Les SGC (ou CMS) et surtout les blogs sont à la mode, et toutes les entreprises en veulent un !
Et puis tant qu’à faire, si Mme Toutlemonde du département de la communication pouvait faire ça « comme si elle faisait un document dans MS Word », ça serait encore mieux.
Alors Mme Toutlemonde aura accès à un éditeur WYSIWYG : elle ne sait pas ce que c’est, n’arrive pas à le prononcer correctement une fois sur deux, mais ce n’est pas grave, l’essentiel c’est que ça fonctionne comme son éditeur texte préféré !

C’est tellement plus Web 2.0 quand n’importe qui dans l’entreprise peut ajouter du contenu sur le site ou sur le blog sans passer par le webmaster… et surtout n’importe comment !
Parce que les vieilles habitudes sont là, et Mme Toutlemonde qui préparait son texte dans MS Word avant de l’envoyer à son webmaster le fait toujours, parce qu’elle aime bien MS Word : elle peut faire des textes en arc-en-ciel. Et cette fois ci, elle copie-colle directement le contenu dans l’éditeur WYSIWYG.
Et là, c’est le drame.

Premier cas :

Vous avez fait un magnifique CMS « maison ». Le directeur de la communication n’est pas content parce que les articles de Mme Toutlemonde sont affichés en couleur arc-en-ciel avec une police qui est 0,42 fois trop grande. Résultat : la présentation n’est plus du tout cohérente avec le reste du site !
Sauf que Mme Toutlemonde ne l’a pas réellement fait exprès. En fait, c’est à cause de MS Word, du copié-collé et de l’éditeur WYSIWYG : l’opération a conservé tous les styles de mise en page d’où cette légère différence de taille, et surtout la couleur arc-en-ciel que Mme Toutlemonde aime tant.

Et bien sûr, comme le copier-coller se comporte différemment d’un système d’exploitation et d’un navigateur à l’autre, et qu’en plus vous n’êtes pas du genre à faire des arcs-en-ciel dans MS Word, ça peut vous prendre du temps avant de trouver d’où vient réellement le problème, et surtout comment le résoudre…

Second cas :

Mme Toutlemonde, à qui vous venez d’installer un blog qui utilise WordPress, vous appelle en catastrophe :
- « le blog est génial !!! j’adooooore ! mais j’ai un problème… »
Aïe.
- « Expliquez-moi ça… »
- « Il y a un bug dans le design : la taille des catégories et des tags change d’un post à l’autre et la taille du menu change d’une page à l’autre »
- « D’accord, on va faire quelques tests alors… »

Ce qu’il faut savoir là, c’est que c’est un blog installé dans un intranet ultra-fermé auquel nous n’avons pas accès. Le débugguage est donc très très simple à faire…
Après avoir fait des tests sur une installation locale dans tous les navigateurs, on ne trouve rien… Vraiment étrange, alors on demande à la personne d’afficher la source d’une page buggué, de l’enregistrer dans un document texte et de nous l’envoyer (opération qui peut déjà être périlleuse selon votre interlocuteur). Et là, vision d’horreur : la page est pourrie de balise <font size="3" face="Arial" color="black">[...]</font> ! On fait donc vite le rapprochement : le coupable est encore MS Word ! Hé oui, parce que Mme Toutlemonde a copié-collé le contenu de son article à partir de MS Word et a décidé de revoir un peu la présentation, par exemple en ajoutant une balise « more » (qui permet de n’afficher qu’une partie de l’article dans la liste sur la page d’accueil ou dans les archives avec un lien « lire la suite »). Et sans le savoir, cette malheureuse a ajouté ce nouvel élément en plein milieu d’un paragraphe stylé par MS Word. On a donc un magnifique bout de code <font size="3" face="Arial" color="black"> qui est affiché, dans la liste des articles, juste avant le lien « lire la suite » et qui ne retrouvera jamais son compagnon </font> dans le reste de la page.
Résultat : la balise stylée n’étant pas fermée, la taille du texte est modifiée jusqu’à la fin de la page.

Solution :

Dans le cas du CMS « maison », si vous avez utilisé TinyMCE, il faudra activer le plugin « paste » qui permet d’avoir un bouton « Paste as Plain Text ».

Dans le cas d’un blog qui fonctionne avec WordPress, il faudra installer le plugin « NDS Paste » (qui modifie automatiquement l’éditeur WYSIWYG pour ajouter le bouton « Paste as Plain Text »).
Et il faut ensuite apprendre aux web-écrivains en herbe à utiliser ce nouveau bouton et uniquement celui-ci lorsqu’il faut importer du texte venant de MS Word (ce qui est loin d’être gagné !). Uniquement ce bouton oui, car si par malheur la personne utilise le raccourci clavier, l’option à partir du menu, l’option à partir du clic-droit, ou encore le glisser-déposer, les styles venant de MS Word seront conservés.

Si vous avez utilisé autre chose, débrouillez-vous ! Mais j’espère que vous aurez accès à une fonction de ce genre :p

Idéalement tout le monde voudrait que, par défaut, il soit possible de ne récupérer que le texte brut (sans mise en forme) lorsqu’on fait un copier-coller : c’est effectivement possible pour le raccourci clavier, mais impossible dans tous les autres cas car ce sont des évènements que l’ont ne peut pas repérer en JavaScript… Donc plutôt que d’avoir la moitié des raccourcis capables de supprimer la mise en forme et l’autre moitié incapable de le faire, il vaut mieux que le comportement soit le même dans tous les cas.
Il va donc falloir s’armer de patience et éduquer les utilisateurs.

4 commentaires »

  1. Et aussi, tu peux utiliser tidy html ;)

    Commentaire par yellowiscool — Jeudi 16 août 2007 @ 10:21

  2. MAIS TOUT EST TELLEMENT VRAI !

    Commentaire par Trem_r — Jeudi 16 août 2007 @ 10:21

  3. Eduquer les utilisateurs ? Mouais, c’est un voeux pieux. Il est aussi facile de les éduquer que d’évangéliser sur la lune. Je pense que les webmasters au bout d’une chaîne de production « grand manitou validateur » ont encore de l’avenir. Enfin, pour les grandes entreprises qui ont les moyens… pour les autres, il reste le téléphone et la phrase magique « je comprends pas pas ça marche pas ». Courage…

    Commentaire par Lecapitan — Jeudi 16 août 2007 @ 11:04

  4. Jamais on s’en sortira de ce word…

    Quant à éduquer les utilisateurs, c’est un vaste projet effectivement :)
    Pour limiter la casse, à part leur fournir des procédures détaillant tout à la lettre je ne sais pas ce qu’il faut faire. Et encore…
    Je crois que juste derrière le « je comprends pas ca marche pas » on retrouve « je comprends pas tout à l’heure ca faisait pas ca » :)

    Commentaire par arkham — Mardi 21 août 2007 @ 01:01

Flux RSS des commentaires de cet article. TrackBack URI

Laisser un commentaire