Des couleurs dans le texte V2... (et des span)

Une façon souple de coloriser le texte de SPIP ou plus largement de personnaliser des portions de texte, sans modification de code, en ajoutant juste des styles dans une feuille.

Cette contribution est une généralisation à plusieurs titres de celle d’Aurélien Pierard : Des couleurs dans le texte.

La solution proposée ici est plus générale, inutile de modifier le code du filtre si on désire de nouvelles couleurs, les changer ou en ajouter. Les propriétés sont définies grâce à une feuille de style. À partir de là rien n’empêche d’aller plus loin et d’utiliser ce filtre pour obtenir du gris souligné ou du bleu sur fond jaune...

Deux solutions sont proposées, filtre classique ou plugin ainsi qu’un moyen d’assurer la compatibilité ascendante avec le filtre |couleur proposé dans la contrib inspiratrice si vous l’utilisez.

Solution Filtre

Installation

Copier coller le code suivant dans votre fichier mes_fonctions.php (le créer s’il n’existe pas et le placer dans le dossier « squelettes » - lui aussi à créer à la racine s’il n’existe pas -)

/** filtre de colorisation du texte |couleurs_spip **/
function couleurs_spip($letexte) {
	$letexte = preg_replace('<span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+Jmx0O2NzXyguKikmZ3Q7KC4qKSZsdDsvY3NfXDEmZ3Q7PC9jb2RlPg=="></span>iU', '<span class="cs_$1">$2</span>', $letexte);
	return $letexte;
}

Dans les squelettes ce nouveau filtre |couleurs_spip peut être utilisé comme tous les autres filtres de SPIP. Exemple [(#TEXTE|couleurs_spip)] ou [(#CHAPO|couleurs_spip)] (Pas pour #INTRODUCTION puisque c’est une balise calculée).

D’autre part il faut dans une feuille de style appelée sur chaque page (celle de SPIP par exemple) définir des styles de classe dont le nom doit commencer par « cs_ » et s’appliquant à des éléments de type span. Ci-dessous, à titre indicatif, en voici une dizaine basée sur les codes couleur des résistances, elles-même reprenant celles de l’arc en ciel - du moins admises comme telles

/* couleurs_spip */
span.cs_noir {color: black; }
span.cs_marron {color: maroon; }
span.cs_rouge {color: red; }
span.cs_orange {color: orange; }
span.cs_jaune {color: yellow; }
span.cs_vert {color: green; }
span.cs_bleu {color: blue; }
span.cs_violet {color: purple; }
span.cs_gris {color: gray; }
span.cs_blanc {color: white; }

Utilisation

Dans le texte des articles il suffit alors d’entourer le texte à colorier par <cs_rouge>le texte à mettre en rouge</cs_rouge>. C’est tout(respectivement <cs_vert>texte en vert</cs_vert> pour du texte à mettre en vert)

Maintenant on peut aller plus loin, par exemple si le style span.cs_rouge est défini dans la feuille de style :

span.cs_rouge {
	color: red;
	background-color: silver; }

le texte sera en rouge sur fond gris clair. Il est donc possible de définir ainsi des styles pour des parties de texte (gras, italique et souligné par exemple, après tout est une affaire de goût). Si le webmestre veut faire évoluer les styles et varier les couleurs, il lui suffit de modifier la feuille de style. Si on retire le filtre les balises <cs_xxx>...</cs_xxx> seront toujours présentes dans le texte mais non prises en compte et invisibles.

Avantages et inconvénients

La solution filtre permet de maîtriser très précisément les champs où on désire que la colorisation soit prise en compte (#TEXTE, #CHAPO,…). Ceci permet d’éviter un site trop « bariolé ». Les inconvénients sont qu’il faut installer le filtre |couleurs_spip dans les squelettes pour les balises en question, et surtout que l’on ne bénéficie pas dans l’interface privée de l’aperçu « colorisé » des articles. Il faut publier ceux-ci pour que l’effet soit visible dans la partie publique.

Version Plugin

Transformé en plugin deux améliorations sont apportées : il n’y a plus de filtre à mettre dans les squelettes, et surtout l’on dispose d’un aperçu colorisé des articles dans la partie privée.

Le plugin (voir le code du fichier plugin.xml), très simple, se contente d’activer le traitement de la fonction couleurs_spip dans le post-traitement typographique des balises, d’insérer le lien vers la feuille de style contenant les style cs_xxx dans l’entête méta de la partie privée et de la partie publique.

Mise en oeuvre

L’installation se réalise comme tous les autres plugins, cf. http://www.spip.net/fr_article3396.html

Ne pas oublier de rajouter la balise #INSERT_HEAD dans la partie <head> de vos squelettes si elle n’est pas déjà présente, pour permettre l’insertion automatique du lien vers la feuille de style. Une fois activé, la fonctionnalité est immédiatement disponible. Pour rajouter ou modifier des styles, il suffit de le faire dans le fichier couleurs_spip.css se trouvant dans le dossier du plugin du même nom.

La mise en oeuvre côté rédacteur est identique à celle décrite pour le filtre (<cs_rouge>le texte à mettre en rouge</cs_rouge>).

On peut à présent mettre de la couleur et des styles span partout - même les titres - ce qui suivant les sites, les webmestre et les goûts sera jugé soit comme un avantage soit comme un inconvénient...

Notes :

-  Ce dernier point peut être restreint par l’utilisation de sélecteur css. Si on ne désire pas que la colorisation soit opérationnelle dans les titres des articles et seulement dans le texte de ceux-ci par exemple il suffit de définir par exemple le style « p.spip span.cs_rouge color : red ; » pour que celui-ci ne s’applique qu’aux span contenu dans les paragraphes de la classe spip.

-  Il n’est pas possible d’imbriquer les balises les unes dans les autres. <cs_vert>texte en <cs_rouge>texte en vert</cs_rouge>vert</cs_vert> ne sera pas interprété, seul le texte en vert sera affiché. Il convient de fermer une balise avant d’en ouvrir une autre.

Compatilité ascendante

Si vous utilisez déjà la contrib d’Aurélien Pierard et le filtre |couleur, il suffit de remplacer tout le code de la fonction couleur existante dans le fichier mes_fonctions.php par les lignes suivantes :

function couleur($letexte) {
	$letexte = preg_replace('<span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+Jmx0O2NzXyguKikmZ3Q7KC4qKSZsdDsvY3NfXDEmZ3Q7PC9jb2RlPg=="></span>iU', '<span class="cs_$1">$2</span>', $letexte);
	$letexte = preg_replace('<span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+XFsoKC4qKSA/KC4qKSlcXSguKilcWy9cMVxdPC9jb2RlPg=="></span>iU', '<span class="cs_$1">$4</span>', $letexte);
	$letexte = preg_replace('<span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+Jmx0O3NwYW4gY2xhc3M9JnF1b3Q7Y3NfKFswLTlhLXpBLVpfXSopICsoWzAtOWEtekEtWl9dKikmcXVvdDsmZ3Q7PC9jb2RlPg=="></span>iU', '<span class="cs_$1_$2">', $letexte);
	return $letexte;
}

Ne pas oublier de créer une feuille de style (ou d’ajouter dans une feuille de style) tous les styles de type span.cs_xxxx correspondant aux couleurs que vous avez déjà utilisées ou redéfinies (pour les couleurs du type « vert clair » il faut créer le code cs_vert_clair). En fichier joint une feuille de style compatible reprenant tous les styles de l’ancien filtre est proposée.

Si vous désirez remplacer le filtre |couleur par le plugin couleurs_spip, il faut faire la même modification dans le fichier couleurs_spip.php du plugin sans modifier le nom de la fonction couleursspip_definirspan et supprimer de vos squelettes le filtre |couleur.

Dans les deux cas les textes existants n’auront pas besoin d’être modifiés et vous pourrez continuer à utiliser l’un ou l’autre des systèmes de balises proposés (cs_couleur ou [couleur]).

Discussion

8 discussions

  • 2

    Bonjour, j’utilise le plugin sur une version 2.1.10 mais ....
    C’est bizarrement aléatoire, en tout cas ce que je veux faire (description en noir) ne marche pas ...

    URL : http://nh.enter-sect.com
    code html généré :

    Ce blog sans prétention est destiné à vous apporter un peu d’idées et de fraicheur. A la découverte de l’Asie et du Sud-Est asiatique, au travers sa décoration zen naturelle et ethnique façonnée par son histoire et ses habitants.

    qqun aurait une idée de dépannage ?

    Merci

    • arff

      <cs_noir>Ce blog sans prétention est destiné à vous apporter un peu d’idées et de fraicheur. A la découverte de l’Asie et du Sud-Est asiatique, au travers sa décoration zen naturelle et ethnique façonnée par son histoire et ses habitants.</cs>
    • Comme le texte vient de la balise #DESCRIPTIF_SITE_SPIP (ton site est une dist modifiée), je ne sais pas si les filtres typo et propre sont bien affichés.
      solution modifier le css de la div « chapo »
      modifier le squelette (#DESCRIPTIF_SITE_SPIP à voir...

    Répondre à ce message

  • Moi j’aime beaucoup ce plugin qui permet de se passer de l’envahissant « Couteau Suisse ».

    Merci :-)

    Répondre à ce message

  • Pierre Roger

    Merci dwojylac pour tes conseils

    Il n’y avait pas d’erreurs dans le codage mais simplement un cache à rafraichir....

    Répondre à ce message

  • 1
    Pierre Roger

    Je me suis rendu compte que FUSCHIA faisait partie des 16 couleurs de base.

    J’ai donc remplacé le codage haxa décimal par

    span.cs_fuschia
    color : fuschia ;

    Mais je n’ai pas plus de résultat. Même en prenant une couleur complètement différente, je n’ai aucun résultat : le texte reste affiché en noir.

    • Je ne reproduis pas ton problème. Attention à la convention
      « fuchsia » et non pas « fuschia » (problème de la place du s et du c) mais tu peux aussi donner son code chez moi #ff00ff.

      Attention les styles doivent être valides
      span.cs_fuchsia { color: fuchsia; }

      Pour éviter les questions d’orthographe tu peux appeler ton style « mauve » si tu veux. Il n’y a pas de relation entre le nom du style et la couleur et c’est plus facile à écrire..
      span.cs_mauve { color: fuchsia; }

      D’autre part je remarque qu’en 209 l’actualisation ne se fait pas dans la partie privée même en désactivant le cache du navigateur si on vient de modifier la css. Par contre c’est à jour dans la partie publique.

      Vérifier aussi que le code est bien traduit en <span class="fuchsia"> (y compris dans la partie privée)

    Répondre à ce message

  • Pierre Roger

    Bonjour,

    J’utilise le plugin couleurs pour un site en spip 2.0.9.

    Pour rajouter une couleur fuschia, j’ai rajouté au fichier couleurs_spip.css

    span.cs_fuschia {
    	color: 	#FF6699;}

    Ca ne donne rien mais c’est peut-être pas au bon endroit. Merci de votre aide.

    Répondre à ce message

  • 1
    Romy Têtue

    Je viens d’essayer le plugin sur SPIP 2.0.8 [13982] : c’est sans effet... est-t-il fonctionnel sous SPIP 2 ? Ce serait bien de le préciser dans l’article...

    • Oui il fonctionne sans problèmes. je viens de faire le test, avec la même version que toi.

    Répondre à ce message

  • 2

    Bonjour,

    J’aimerais préciser que cette contrib a déjà été étendue et placée en plugin au sein du Couteau Suisse : Le Couteau Suisse.

    L’outil ’Tout en couleur’ permet actuellement d’appliquer facilement des couleurs à tous les textes du site (articles, brèves, titres, forum, …) en utilisant des balises en raccourcis. Les styles css sont créés à la volée.

    Deux exemples identiques pour changer la couleur du texte :

    -  Lorem ipsum [rouge]dolor[/rouge] sit amet
    -  Lorem ipsum [red]dolor[/red] sit amet.

    La page de configuration permet aussi d’autoriser les fonds colorés :

    -  Lorem ipsum [fond rouge]dolor[/fond rouge] sit amet
    -  Lorem ipsum [bg red]dolor[/bg red] sit amet.

    Quelle que soit la couleur, la balise fermante peut aussi être : [/couleur] ou [/color], et [/fond] ou [/bg].
    Un exemple de balises imbriquées : [fond jaune]Lorem ipsum [rouge]dolor[/couleur] sit amet[/fond].

    Suite à une discussion sur la liberté à accorder aux rédacteurs — un site doit respecter une charte graphique que les rédacteurs ne doivent pas saccager avec n’importe quelle couleur—, j’ai décidé de laisser au webmestre du site la possibilité de choisir les balises autorisées ou non, et même de fixer les couleurs au sein de la page de config.

    On peut donc utiliser :
    -  soit les 36 couleurs des styles css (black/noir, red/rouge, maroon/marron, green/vert, olive/vert olive, navy/bleu marine, purple/violet, gray/gris, silver/argent, chartreuse/vert clair, blue/bleu, fuchsia/fuchia, aqua/bleu clair, white/blanc, azure/bleu azur, bisque/beige, brown/brun, blueviolet/bleu violet, chocolate/brun clair, cornsilk/rose clair, darkgreen/vert fonce, darkorange/orange fonce, darkorchid/mauve fonce, deepskyblue/bleu ciel, gold/or, ivory/ivoire, orange/orange, lavender/lavande, pink/rose, plum/prune, salmon/saumon, snow/neige, turquoise/turquoise, wheat/jaune paille, yellow/jaune)
    -  soit des balises personnalisées. Le format de ces balises doit lister des couleurs existantes ou définir des couples « balise=couleur », le tout séparé par des virgules. Exemples : « gris, rouge », « faible=jaune, fort=rouge », « bas=#99CC11, haut=brown » ou encore « gris=#DDDDCC, rouge=#EE3300 ». Pour le premier et le dernier exemple, les balises autorisées sont : [gris] et [rouge] ([fond gris] et [fond rouge] si les fonds sont permis).

    • Si le couteau suisse de tout s’occupe...

      Je pense que toutes ces remarques sur la syntaxe des balises (du couteau suisse) figurent dans sa documentation ou en tout cas avaient plus leur place sur la page de la contrib du couteau suisse. Mais bon...

    • Tu as raison. C’était pour les idées. Je n’en fais pas un monopole. Si tu veux améliorer ton plugin, pourquoi ne pas envisager de le configurer directement avec CFG ?

    Répondre à ce message

  • 2

    Quelques dernières remarque encore... Constructives j’espère.

    -  Ce plugin est vraiment de petite taille, il vaut mieux le penser comme une lame du couteau suisse, amha.
    -  Mais il n’est pas du tout impossible de concevoir un petit plugin automone, bien sûr, mais attention toutefois à la maintenance.
    -  le préfice « cs_ » serait justement réservé à devinez quoi ? ben au Couteau Suisse, encore lui !
    -  le choix cornélien de balises au format [couleur] ou <couleur> est à discuter peut-être. Je suis d’accord avec James, attention à la compatibilité !
    -  Le filtre ’couleurs_spip’ ci-dessus est un peu simplet dans sa version actuelle. Il ne protège pas les balises <html> ou <code>
    -  Le couteau suisse traite les textes directement, sans qu’il y ait besoin d’ajouter un filtre : à voir les avantages et inconvénients d’être tributaire d’un filtre à mettre systématiquement dans les squelettes...
    -  Je suis réservé sur le paragraphe des imbrications. span est imbricable, non ?

    • Cette contrib présentant deux solutions (filtre qui oblige effectivement à modifier les squelettes, ou plugin) peut être vu comme une contrib pédagogique sur la réalisation d’un plugin (ou du moins le passage d’un filtre à un plugin) et dans ce sens son côté « simplet » est complètement assumé. Pour celui-ci je pense que la question de la maintenance ne posera pas trop de problèmes (et les sources sont publiques).

      Je pense qu’il peut y avoir deux approches dans les plugins, ou des couteaux suisses avec beaucoup de lames, mais attention aux risques de coupure quand on en ouvre plusieurs :-), ou des plugins simples qui ne font qu’une chose. Il faut laisser au webmestre et au concepteur le choix.

      Pour les questions de choix de syntaxe [couleur] ou <couleur>, la seconde présente à mon avis l’avantage d’être invisible en cas de retrait du plugin ou du filtre. La seconde interdit aussi des notations du type [vert clair] (avec un espace) qui me semble plus dangereuse (mais bon c’est toujours une question de choix). Enfin le fait que les styles ne soient pas définis à la volée directement depuis l’espace privé est effectivement une limitation, mais d’un autre côté ces styles peuvent porter sur autre chose que la couleur de la police et/ou du fond.

    • Je pense qu’il peut y avoir deux approches dans les plugins, ou des couteaux suisses avec beaucoup de lames, mais attention aux risques de coupure quand on en ouvre plusieurs :-), ou des plugins simples qui ne font qu’une chose. Il faut laisser au webmestre et au concepteur le choix.

      La-dessus, je suis bien d’accord. Et c’est vrai que certaines lames du Couteau Suisse interagissent entre elles, pour le meilleur !

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom