Décorer ou colorer vos textes

Présentation

Les outils décrits ici sont des fonctionnalités du plugin Le Couteau Suisse que vous pouvez trouver ici : Le Couteau Suisse. Pour avoir accès aux nouveaux raccourcis de décoration ou de couleur, il vous faut donc avoir préalablement installé ce plugin.

Ensuite, une fois ces outils activés sur la page d’administration du plugin en espace privé (catégorie « Raccourcis typographiques »), vous avez donc la possibilité d’insérer de nouveaux raccourcis personnalisables dans le corps des textes, aussi bien pour les articles, que pour les rubriques, les brèves, etc. Bref, tous les textes de SPIP.

Afin de faciliter à vos visiteurs la rédaction des messages ou des articles et à partir de la version 1.7.8.20 du plugin, les deux outils dont parle cet article insèrent des boutons dans la Barre Typo V2. Hors, ce plugin n’est plus maintenu pour les versions 2.0 et suivantes de SPIP . La version 1.8.11.00 du plugin introduit donc ces boutons dans la nouvelle barre typographique du plugin : Porte plume.

Techniquement parlant, le plugin utilise ici le pipeline « pre_typo » pour effectuer les traductions, après avoir protégé les conteneurs HTML suivants : <html/>, <code/>, <cadre/>, <frame/> et <script/>.

Toutes les balises rendues disponibles par les différents outils du Couteau Suisse aux rédacteurs du site apparaissent sur la page de configuration du plugin dans un cadre à gauche intitulé « Raccourcis typographiques actifs du Couteau Suisse ». Vos changements éventuels dans la configuration des outils sont visibles à chaque validation de la page complète.

En bref, les deux outils décris ici vous offrent la possibilité de créer de nouvelles balises, permettant ensuite à vos rédacteurs de jouer avec l’aspect visuel de leurs textes, tout en restant dans un cadre déterminé par le webmaster.

A vous donc, les styles CSS !!

L’outil « Tout en couleurs »

Merci à Aurélien PIERARD dont l’idée première a permis d’élaborer cette nouvelle lame du Couteau Suisse.

L’outil « Tout en couleurs » permet actuellement d’appliquer très facilement des couleurs à tous les textes du site (articles, brèves, titres, forum, …) en utilisant des balises en raccourci. Ces balises doivent être ouvertes (par exemple : [rouge]), puis obligatoirement fermées grâce à un anti-slash (par exemple : [/red]) à l’intérieur du même paragraphe. Les styles css sont créés à la volée au moment de la mise en cache de la page par SPIP.

Un point important : les nouvelles balises documentées ici ne doivent être utilisées que sur de petits morceaux de texte, en aucun cas des paragraphes : le plugin traduit ces balises en <span>. Cet élément du langage HTML est supporté par tous les navigateurs courants.

Par défaut, le plugin autorise l’utilisation des 36 couleurs des styles css, en anglais ou en français. le style « rouge » sera donc équivalent à « red » et la balise [rouge] (ou [red]) sera remplacée par : <span style="color:red;">.

Deux exemples (qui produisent le même effet) pour changer la couleur du texte :

-  Lorem ipsum [rouge]dolor[/rouge] sit amet.
-  Lorem ipsum [red]dolor[/red] sit amet.
-  Résultat final : Lorem ipsum dolor sit amet.

La page de configuration permet aussi d’autoriser les fonds colorés et introduit donc les balises [fond qqchose] (ou [bg qqchose]). La balise [fond rouge] (ou [bg red]) sera remplacée par : <span style="background-color:red;">.

Deux exemples (qui produisent le même effet) pour changer la couleur du fond du texte :

-  Lorem ipsum [fond rouge]dolor[/fond rouge] sit amet.
-  Lorem ipsum [bg red]dolor[/bg red] sit amet.
-  Résultat final : Lorem ipsum dolor sit amet.

Quelle que soit la couleur, la balise fermante peut aussi être : [/couleur] ou [/color], et [/fond] ou [/bg]. Ceci est très souple, mais attention de bien vérifier où vous en êtes ! Une balise ouverte doit toujours être fermée.

Un exemple de balises imbriquées :

-  Lorem [fond jaune]ipsum [rouge]dolor[/couleur] sit[/fond] amet.
-  Résultat final : Lorem ipsum dolor sit amet.

Des balises personnalisées :

Suite à une discussion collective 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 —, le plugin laisse au webmestre du site la possibilité de choisir les balises autorisées ou non, et même d’en fixer les couleurs. Il lui suffit de se rendre sur la page de config du Couteau Suisse et de choisir entre :

-  soit, par défaut, 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.

Quelques exemples de balises personnalisées :

-  « gris, rouge » : n’introduit que les balises [gris] et [rouge] en utilisant les couleurs CSS "gray« et »red". Si les fonds sont permis alors les balises [fond gris] et [fond rouge] seront également disponibles.
-  « faible=jaune, fort=rouge » : introduit les uniques balises [faible] et [fort] utilisant les couleurs CSS "yellow« et »red". Si les fonds sont permis alors les balises [fond faible] et [fond fort] seront également disponibles.
-  « bas=#99CC11, haut=brown » : n’introduit que les balises [bas] et [haut] en utilisant les couleurs CSS "#99CC11« et »brown". Si les fonds sont permis alors les balises [fond bas] et [fond haut] seront également disponibles.
-  « gris=#DDDDCC, rouge=#EE3300 » : n’introduit que les balises [gris] et [rouge] en utilisant les couleurs CSS "#DDDDCC« et »#EE3300". Si les fonds sont permis alors les balises [fond gris] et [fond rouge] seront également disponibles.

Cas des liens

Il vous est malheureusement impossible de coloriser des liens SPIP ( raccourcis du type [mon lien->mon_url.html] avec des balises à crochets, car SPIP le refuse catégoriquement lorsqu’il interprète ses raccourcis. Pour info (et pour les connaisseurs !), voici l’expression utilisée : /\[([^][]*?([[]\w*[]][^][]*)*)->(>?)([^]]*)\]/msS. Sans appel, c’est-ce pas ?

Pour coloriser vos liens, il vous faut donc utiliser l’outil « Décoration » décrit ci-dessous. Par exemple, pour écrire [mon lien<rouge>rouge</rouge> préféré->mon_url.html] dans un article, il vous faut définir la balise rouge comme ceci : span.rouge = color:red;

Boutons en barre typographique

La version 1.8.11.00 du Couteau Suisse place vos raccourcis sous forme de boutons dans la nouvelle barre typographique du plugin : Porte plume (SPIP 2.0 et suivantes). Exemple :

Une configuration est possible dans l’outil pour choisir les barres où ajouter les boutons. Par défaut, le plugin Porte Plume propose deux barres : Edtition des contenus (pour la rédaction des articles par exemple) et Messages de Forum (barre plus light en général).

L’outil « Décoration »

Merci à IZO dont l’idée première a permis d’élaborer cette nouvelle lame du Couteau Suisse.

Cet outil vous offre la possibilité de définir très simplement vos propres balises de style. A la différence du paragraphe précédent, ces balises utilisent les chevrons dans leur syntaxe (« < » et « > ») et non pas les crochets (« [ » et « ] »). Elles doivent être ouvertes (par exemple : <souligne>), puis obligatoirement fermées grâce à un anti-slash (par exemple : </souligne>).

Vous pouvez créer des raccourcis de type <span> ("Inline") ou de type <div> ("Block").

Vous pouvez directement :
-  inscrire un style spécifique (par exemple : style="font-variant:small-caps;")
-  ou choisir une classe présente dans vos fichiers CSS ou manipulée par vos scripts JS (par exemple : class="capitales").

Les styles CSS sont créés à la volée au moment de la mise en cache de la page par SPIP.

Syntaxe :

Sur la page de configuration, vous devez définir les styles de vos nouvelles balises (une définition par ligne) en respectant les syntaxes suivantes :

-  span.mabalise1 = mon 1^er style CSS à l’intérieur d’un paragraphe
-  div.mabalise2 = mon 2^e style CSS créant un nouveau paragraphe
-  span.mabalise3.class = ma 1^re classe CSS à l’intérieur d’un paragraphe
-  div.mabalise4.class = ma 2^e classe CSS créant un nouveau paragraphe
-  span.mabalise5.lang = ma 1^re langue à l’intérieur d’un paragraphe
-  div.mabalise6.lang = ma 2^e langue créant un nouveau paragraphe
-  unalias = mabalise2

Voici comment le plugin traduit cette syntaxe :

-  <mabalise1> par : <span style=« mon 1^er style CSS à l’intérieur d’un paragraphe »>
-  <mabalise2> par : <div style=« mon 2^e style CSS créant un nouveau paragraphe »>
-  <mabalise3> par : <span class=« ma 1^re classe CSS à l’intérieur d’un paragraphe »>
-  <mabalise4> par : <div class=« ma 2^e classe CSS créant un nouveau paragraphe »>
-  <mabalise5> par : <span lang=« ma 1^re langue à l’intérieur d’un paragraphe »>
-  <mabalise6> par : <div lang=« ma 2^e langue créant un nouveau paragraphe »>
-  <unalias> par : <div style=« mon 2^e style CSS créant un nouveau paragraphe »>

Les balises automatiques repèrent au cas par cas les contenus « Inline » et les contenus « Block » et choisissent alors (entre <span> et <div>) le meilleur remplacement. Syntaxe :

-  auto.mabalise1 = mon style CSS, intra ou inter-paragraphe
-  auto.mabalise2.class = ma classe CSS, intra ou inter-paragraphe
-  auto.mabalise3.lang = ma langue (ex : fr), intra ou inter-paragraphe
-  unalias = mabalise2

Les balises sans contenu (du type <mabalise/>) sont aussi reconnues. Par exemple, afin de clarifier un texte contenant divers blocs ou images, vous pouvez utiliser la balise <clear/> définie comme ceci : div.clear = clear:both; et remplacée par : <div style="clear:both;"></div>.

Les deux outils que décrit cet article insèrent des boutons dans la Barre Typo V2 afin de faciliter à vos visiteurs la rédaction des messages ou des articles.

Rappel : toute balise <mabalise> ouverte doit être fermée par </mabalise> et le raccourci <mabalise/> est un conteneur vide qui correspond à <mabalise></mabalise>.

Les balises par défaut :

Afin d’assurer la compatibilité avec la version initiale de l’outil « Décoration », 7 balises et un alias vous sont proposés à la toute première activation. Ceci est aussi pour vous un très bon échantillon d’étude :

span.sc = font-variant:small-caps;
span.souligne = text-decoration:underline;
span.barre = text-decoration:line-through;
span.dessus = text-decoration:overline;
span.clignote = text-decoration:blink;
span.surfluo = background-color:#ffff00; padding:0px 2px;
span.surgris = background-color:#EAEAEC; padding:0px 2px;
fluo = surfluo

Ces définitions introduisent donc les 7 styles suivants : capitales, souligné, barré, dessus, clignote, fluo et grisé. Les voici en exemple au sein de vos textes :

-  Lorem <sc>ipsum dolor sit amet</sc>
-  Lorem <souligne>ipsum dolor sit amet</souligne>
-  Lorem <barre>ipsum dolor sit amet</barre>
-  Lorem <dessus>ipsum dolor sit amet</dessus>
-  Lorem <clignote>ipsum dolor sit amet</clignote>
-  Lorem <fluo>ipsum dolor sit amet</fluo>
-  Lorem <surfluo>ipsum dolor sit amet</surfluo>
-  Lorem <surgris>ipsum dolor sit amet</surgris>

Dans tous les cas, évitez les accents ; les différents jeux de caractères pourraient vous jouer des tours. Pour le résultat visuel des styles définis ci-dessus, les voici :

-  capitales (Exemple) : <span style="font-variant: small-caps;">
-  souligné (Exemple) : <span style="text-decoration: underline;">
-  barré (Exemple) : <span style="text-decoration: line-through;">
-  dessus (Exemple) : <span style="text-decoration: overline;">
-  clignote (Exemple) : <span style="text-decoration: blink;">
-  fluo (Exemple) : <span style="padding: 0px 2px; background-color: rgb(255, 255, 0);">
-  grisé (Exemple) : <span style="padding: 0px 2px; background-color: rgb(234, 234, 236);">

A noter : Internet Explorer n’interprète pas toujours le clignotement.

Un exemple <div> : le post-it

Afin d’afficher un texte bleu dans une petite boite jaune au sein même de votre article, tout à droite, un peu comme une note ou un post-it, vous pouvez définir le raccourci suivant :
div.N = background-color:yellow; border:3px solid yellow; color:blue; float:right; font-size:85%; padding:5px; width:20%;

Attention : les balises que vous définissez sont sensibles à la casse... Dans l’exemple ci-dessus, <N> sera bien interprétée, mais pas <n>.

A vous de travailler : pourquoi ne pas envisager de placer des lettrines à la tête de vos articles ?
Une piste : <L>V</L>oici mon premier paragraphe.

Boutons en barre typographique

La version 1.8.11.00 du Couteau Suisse place vos raccourcis sous forme de boutons dans la nouvelle barre typographique du plugin : Porte plume (SPIP 2.0 et suivantes). N’hésitez pas à créer vos propres icônes .png que vous placerez dans le dossier icones_barre/ de votre squelette, et que vous nommerez decoration_monRaccourci.png. Six icônes sont fournies par le plugin : decoration_barre.png, decoration_dessus.png, decoration_sc.png, decoration_souligne.png, decoration_surfluo.png et decoration_surgris.png. Exemple :

Une configuration est possible dans l’outil pour choisir les barres où ajouter les boutons. Par défaut, le plugin Porte Plume propose deux barres : Edtition des contenus (pour la rédaction des articles par exemple) et Messages de Forum (barre plus light en général).

Rappel de définition : <div> et <span>

Ces deux balises font partie du langage HTML.

-  Les balises <div></div> permettent de créer des ensembles (type « Block ») regroupant divers éléments d’une page.
-  Les balises <span></span> permettent d’isoler de petits éléments (type « Inline ») placés à l’intérieur des blocs.
-  A titre d’information, les balises <p></p> définissent un paragraphe de texte (type « Block »), mais SPIP repère les paragraphes grâce au double saut de ligne : ce raccourci est bien plus pratique que l’utilisation de la balise !

Important : On peut placer un <span> à l’intérieur d’un paragraphe ou d’un bloc, mais pas l’inverse : les éléments « Inline » ne peuvent jamais contenir d’élément « Block ». Attention donc à ne pas vous emméler les pinceaux lorsque vous utilisez vos raccourcis !

A ce sujet,vous pouvez consulter :
-  http://www.ultra-fluide.com/ressour...
-  http://css.alsacreations.com/Bases-...