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.

A 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 afin de faciliter à vos visiteurs la rédaction des messages ou des articles.

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.

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 1er style CSS à l’intérieur d’un paragraphe
 div.mabalise2 = mon 2e 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 2e classe CSS créant un nouveau paragraphe
 span.mabalise5.lang = ma 1ère langue à l’intérieur d’un paragraphe
 div.mabalise6.lang = ma 2e langue créant un nouveau paragraphe
 unalias = mabalise2

Voici comment le plugin traduit cette syntaxe :

 <mabalise1> par : <span style="mon 1er style CSS à l’intérieur d’un paragraphe">
 <mabalise2> par : <div style="mon 2e 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 2e 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 2e langue créant un nouveau paragraphe">
 <unalias> par : <div style="mon 2e style CSS créant un nouveau paragraphe">

A partir de la version 1.7.8.02 du plugin, 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>.

A 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 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>.

A partir de la version 1.7.8.01 du plugin, les balises automatiques ont été ajoutées. Elles 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 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.

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-...