Samedi 9 juillet 2005 — Dernier ajout mercredi 5 mars 2014

Raccourcis Typographiques de SPIP, mode d’emploi

Un préalable important : la mise en page d’un texte est au service du sens de celui-ci, pas du goût personnel de celui qui se trouve devant l’écran ! Or, les raccourcis typographiques de SPIP portent en eux-mêmes du sens. Il est important d’avoir une correspondance entre le sens typographique et le sens du texte. Par exemple, un titre du point de vue du texte doit aussi l’être du point de vue typographique.

N’oubliez pas non plus que votre site sera lu par des visiteurs pouvant être dans des résolutions d’écran différentes de la vôtre et qu’une « belle » mise en page chez vous pourrait être complètement différente pour le visiteur.

Avant d’aller plus loin, vous pouvez lire avec profit : Les raccourcis typographiques indispensables de SPIP.

Retour Sommaire

Le texte préexiste à la mise en page

C’est peut-être une évidence, mais pour mettre en page un texte, il faut que le texte existe.

Dans le cas de SPIP, ça veut dire qu’il vaut mieux (au moins dans un premier temps) :

  • disposer de tout le texte sans aucun raccourci typographique,
  • sauter une ligne à chaque changement d’idée (ce qui donne un changement de paragraphe, voire un titre),
  • faire un retour à la ligne avant chaque élément d’une énumération.

Ce n’est qu’ensuite que les raccourcis typographiques de SPIP pourront être appliqués avec discernement.

Retour Sommaire

Distinction entre paragraphes et caractères

Certains attributs typographiques ne peuvent s’appliquer qu’à des paragraphes entiers, d’autres doivent être appliqués à des caractères dans le même paragraphe.

Barre typographique enrichie de SPIP
Barre typographique enrichie de SPIP
Voir l’image en taille normale

Dans la Barre Typographique de SPIP, les attributs de caractères forment le premier groupe sur la gauche, les attributs typographiques de paragraphes le deuxième.

Retour Sommaire

Paragraphes

Un paragraphe dans SPIP est précédé d’une ligne vide et suivi d’une ligne vide [1].

Une règle générale est de ne mettre qu’un attribut de paragraphe par paragraphe.

Si deux paragraphes de suite ont le même attribut, il faut appliquer deux fois l’attribut, une fois pour chaque paragraphe.

Les attributs de paragraphe ne sont pas disponibles dans les champs de SPIP n’ayant qu’une ligne.

Les attributs de paragraphe sont :

  • les titres {{{Paragraphe du titre}}} et sous-titres {{{*Texte du titre}}}, avec un nombre d’* (étoiles) variant de 2 à 5, la barre de raccourcis ne proposant que 2 et 3.
    Attention : il est essentiel de respecter la hiérarchie de la titraille et de ne pas commencer par un élément sans qu’il soit précédé de son niveau supérieur (on ne doit pas commencer à 2 !). Voir les exemples de titraille
    Remarque : {{{Titre de premier niveau}}} est strictement équivalent à {{{*Titre de premier niveau}}}.
  • centrer [|Paragraphe centré|] : à n’utiliser que de manière exceptionnelle [2] !
Paragraphe centré
  • aligner à droite [/Paragraphe aligné à droite/] : essentiellement pour mettre la signature d’un auteur
Paragraphe aligné à droite
  • encadrer [(Paragraphe à encadrer)]
Paragraphe à encadrer

Certains attributs sont un peu spéciaux :

  • Poésie <poesie>Le texte de la poésie, sur plusieurs lignes, les retour à la ligne simple étant pris en compte</poesie>
Le geai gélatineux gégnait dans le jasmin
Voici mes infins le plus beau vers de la langue française.
  • Cadre <cadre>Texte qui apparaitra dans une zone de formulaire facilitant le copier/coller [3]</cadre>
Retour Sommaire

Citation

Soit à l’intérieur d’un paragraphe :<quote>Texte d’une citation</quote>

Proverbe connu : C’est en forgeant que l’on devient forgeron..

Soit formant un bloc :

<quote>
L'amour naît d'un cœur déchiré tant il s'est agrandi.
</quote>

L’amour naît d’un cœur déchiré tant il s’est agrandi.

Retour Sommaire

Caractères

Les attributs de caractères doivent être ouverts et fermés à l’intérieur du même paragraphe (pas question de débuter le gras sur un premier paragraphe et de le terminer sur un deuxième).

Ils peuvent être utilisés dans tous les champs de SPIP.

Retour Sommaire

Mise en forme

  • gras : {{texte en gras}} ; à utiliser pour un élément que l’on souhaite appuyer (sera prononcé plus fort dans un logiciel de lecture vocal) : texte en gras
  • italique : {italique} ; à utiliser pour une élément sur lequel on veut insister (sera prononcé avec emphase) : italique
  • mise en évidence [*texte en évidence*] : élément que l’on souhaite appuyer en attirant le regard par un changement de couleur : texte en évidence
  • mise en exposant : <sup>texte en exposant</sup> : pour l’abréviation de saint : St
  • petites capitales : <sc>texte en petite capitales</sc> : à utiliser essentiellement pour les noms propres : Charles de Gaulle
  • code : <code>du code (raccourcis typographiques, html…)</code> que l’on ne souhaite pas que SPIP interprète
  • biffé : <del>texte biffé</del> : pour indiquer qu’on avait pensé à un autre mot et que l’on a changé d’avis : SPIP, c’est bien fantastique !
Retour Sommaire

Comportement spécifique

Retour Sommaire
Aides à la compréhension du texte
  • bulle d’aide : [GPL|Gnu Public Licence] : pour donner la signification d’un terme ou d’une abréviation : GPL
    Ce raccourcis est beaucoup moins nécessaire depuis que vous disposez de Sigles, abréviations et acronymes automatiques.
Retour Sommaire
Liens internes et externes
  • lien : [texte du lien->http://www.spip.net/] : lien : texte du lien
    À noter qu’il est possible de faire des liens à l’intérieur du site SPIP à l’aide des numéros des éléments et de leur type (se reporter à l’aide en ligne fournie par SPIP).
  • lien avec bulle d’aide : [texte du lien|Le site officiel de SPIP->http://www.spip.net/] : texte du lien
  • lien avec langue de destination (non visible sur Internet Explorer) : [texte du lien|{fr}->http://www.spip.net/] : texte du lien
  • lien avec bulle d’aide et langue de destination : [texte du lien|Le site officiel de SPIP{fr}->http://www.spip.net/] : texte du lien
  • ancre et retour à l’ancre : [definition_ancre<-] et [retour à l'ancre->#definition_ancre] : retour à l’ancre
  • définition dans Wikipedia : [?GPL] : appelle l’encyclopédie libre Wkipedia pour obtenir la définition du mot [4] : GPL
    Avec bulle d’aide : [?GPL|Définition sur Wikipédia] : GPL
  • note de bas de page : texte[[note de bas de page]] : crée une note de bas de page avec le texte entre les doubles crochets [5]
Retour Sommaire

Listes

Les listes sont à utiliser pour tout ce qui à le sens d’une énumération.

Attention : il faut entourer un bloc de listes à puces d’une ligne vide avant et après.

Retour Sommaire

Listes à puces

Donnera :

  • première ligne
  • deuxième ligne
    • une sous liste à puce
  • de retour dans le niveau initial
Retour Sommaire

Listes numérotées

Donnera :

  1. première ligne
  2. deuxième ligne
    1. une sous liste numérotée
  3. de retour dans le niveau initial
Retour Sommaire

Tableaux

Pour être complètement accessible, un tableau dans SPIP doit avoir un titre et une description.

Ainsi :

Donnera :

Produits bio et prix
Produit Prix €
Beurre Bio 5€
Lait Bio 3€
Choux Bio 4€

Notez les doubles || [6] sur la première ligne du tableau !

Attention : les pièges classiques avec les tableaux sont :

  • ne pas avoir le même nombre de | sur une ligne
  • avoir un espace après le dernier | de la ligne (un moyen simple de vérifier : la touche fin du clavier amène à la fin de la ligne)
Retour Sommaire

Tableaux avec fusion de cellules

Donnera :

Tableau avec fusion
Colonne 1 Colonne 2 Colonne 3
ligne 1 Cellule fusionnée avec la suivante
ligne 2 Cellule fusionnée
avec celle du dessous
normale
ligne 2 normale aussi

Principe :

  • |<| fusionne avec la cellule de gauche
  • |^| fusionne avec la cellule au dessus
Retour Sommaire

Images

Pour les images et documents, reportez-vous à l’aide en ligne de SPIP. Seule contrainte pour l’accessibilité (et donc un meilleur référencement) : donnez un titre à toutes vos images décrivant le sens de chacune d’elles.

Retour Sommaire

Caractères spéciaux

  • ~ (espace insécable ou espace dur — correspond au &nbsp; du HTML) placé entre deux mots remplace l’espace en ayant l’avantage d’être insécable, c’est-à-dire, qu’il empêchera les deux mots d’être séparés par un retour à la ligne malvenu. S’utilise en particulier entre le prénom et le nom propre.
  • --> : → (flèche vers la droite)
  • <-- : ← (flèche vers la gauche)
  • <--> : ↔ (flèche vers la gauche et vers droite)
  • ==> : ⇒ (double flèche vers la droite)
  • <== : ⇐ (double flèche vers la gauche)
  • <==> : ⇔ (double flèche vers la gauche et vers droite)
  • -- : — (tiret cadratin) à utiliser pour les incises dans un texte
  • ... : … (3 petits points) points de suspension
  • (c) : © : CopyRight
  • (r) : ® : Registered
  • (tm) : ™ : Trade Mark
Retour Sommaire

Ligne horizontale

---- : 4 signes moins en seuls sur une ligne (précédés d’une ligne vide et suivis d’une ligne vide) donneront un trait de séparation horizontal.


Retour Sommaire

Éléments dangereux

Il y a deux éléments dangereux dans SPIP :

  • le retour à la ligne simple : _ (souligné espace) en début de ligne.
    Usage toléré pour donner adresse et numéro de téléphone/fax.
    Usage toléré : dans une liste à puce pour passer à la ligne sans passer à une nouvelle puce (comme ici).
    Usage interdit : pour mettre plus d’espace vertical entre deux éléments de la page.
  • le HTML pur : il est possible dans SPIP de mettre du code HTML. Le faire est fortement déconseillé :
    • parce que c’est la porte ouverte à toutes les dérives, ne serait-ce que celle de sortir de la charte graphique du site, ou celle de produire un code HTML non valide (voire non interprétable ailleurs que sur Internet Explorer
    • parce que c’est partir du postulat que votre site ne sera visité qu’en tant que site web ; il pourrait très bien être un jour disponible sous forme de fichiers PDF

Retour Sommaire

Exemples de titraille : Titre principal

{{{Exemples de titraille : Titre principal}}}

Retour Sommaire

Titre niveau deux

{{{**Titre niveau deux}}}

Retour Sommaire

Titre niveau trois

{{{***Titre niveau trois}}}

Retour Sommaire
Titre niveau quatre

{{{****Titre niveau quatre}}}

Retour Sommaire
Titre niveau cinq

{{{*****Titre niveau cinq}}}

Retour Sommaire

Placement des images

I love SPIP<img227|left>


I love SPIP <img227|center>


I love SPIP<img227|right>


I love SPIP
I love SPIP
Un badge par Izo !

<doc227|left>


I love SPIP
I love SPIP
Un badge par Izo !

<doc227|center>


I love SPIP
I love SPIP
Un badge par Izo !

<doc227|right>


I love SPIP
I love SPIP
Un badge par Izo !

<emb227|left>


I love SPIP
I love SPIP
Un badge par Izo !

<emb227|center>


I love SPIP
I love SPIP
Un badge par Izo !

<emb227|right>


Retour Sommaire

Une extension pour FireFox est très utile pour savoir rapidement si vous avez fait une erreur de raccourcis typographiques : HTML VALIDATOR (based on Tidy).

Quant à l’écriture pour le Web, vous pouvez visiter l’excellent Redaction.be

[1Sauf les listes à puce et les tableaux

[2J’avais mis ça en place à l’époque de la version 1.7 de SPIP qui gérait mal le centrage des images

[3Essentiellement utilisé sur spip-contrib pour donner des exemples de code

[4Si le mot n’existe pas, vous pouvez le créer vous-même !

[5Et la note de bas de page est automatiquement numérotée, rendue clicable, pour la consulter, et pour revenir au texte l’ayant appelée

[6Le signe | se fait sous Windows avec la combinaison AltGR-6.

Documents à télécharger

Vos réactions

  • Christophe 23 décembre 2011 14:11

    Bonjour,

    Pourquoi dites-vous qu’il ne faut utiliser qu’exceptionnellement la possibilité du centrer du texte avec SPIP ? « C’est mal » ? :-)

    • Raccourcis Typographiques de SPIP, mode d’emploi 23 décembre 2011 14:16, par Jacques Pyrat

      Parce que centrer, c’est faire de la présentation et non du sens.

      En pratique, j’utilise le centré uniquement quand :

      • je joint à un article une affiche d’un événementiel
      • et que je reproduis dans l’article le contenu de l’affiche
  • Yffic 1er septembre 2011 22:37

    Hello

    Un petit soucis avec spip-lettres… Si on met un texte en petites capitales, les balises <sc> restent dans le html généré… Sans doute car il n’y a pas de balise #INSERT_HEAD. L’ideal serait sans doute de desactiver les enluminures typo dans le formulaire de redaction d’une lettre. Est-ce possible ? envisageable ?

    • Raccourcis Typographiques de SPIP, mode d’emploi 13 septembre 2011 16:38, par Jacques Pyrat

      Ce serait plutôt qu’il manque soit :

      • un traitement pour transformer les <sc> en <span...> qui vont bien
      • un traitement de suppression des raccourcis typographique…

      Ne sachant pas comment SPIP-Lettres fonctionne, c’est difficile à dire.

      • Raccourcis Typographiques de SPIP, mode d’emploi 18 septembre 2011 11:31, par Yffic

        Hello

        Je pose ma question autrement : est-il possible de ne pas autoriser l’insertion des boutons de ce plugin sur un formulaire particulier… Ca me semble plus logique de faire comme cela. Car si on laisse la possibilité au rédacteur d’utiliser ces raccourcis à la rédaction, c’est pas pour supprimer leurs effets au traitement…

  • Luc - Genève 18 mai 2011 14:38

    Bonjour,

    Comment changer la couleur du texte « mis en évidence » et « mise en évidence variante » ???

    Milles merci Luc

  • Nadia 4 mars 2011 16:01

    Bonjour,

    J’ai besoin mettre un paragraphe en encadré à l’intérieur du texte. J’ai essayé avec les balises comme vous l’avez indiqué et ça ne marche pas ! Ma version du SPIP 1.9.2 e

    Merci pour les conseils

  • thierrybo 5 avril 2010 13:00

    Bonjour,

    avez-vous testé avec SPIP 2.0.10 :

    bulle d’aide :[GPL|Gnu Public Licence]

    chez moi tous les anciennes bulles d’aides sont affichées telles qu’elles , elles ne sont plus transformées

    • Raccourcis Typographiques de SPIP, mode d’emploi 5 avril 2010 15:13, par Jacques PYRAT

      Il est possible qu’il vous faille rajouter dans config/mes_options.php : $GLOBALS['barre_typo_pas_de_fork_typo'] = false; // Pour tenir compte de http://zone.spip.org/trac/spip-zone/changeset/22723 et disposer des raccourcis typo supplémentaires !

  • Yoline 21 mars 2009 11:36

    Bonjour,

    J’ai installé Beespip et votre plugin figure dans la liste et est activé. Par contre, la barre typographique ne s’affiche pas, est-ce normal ?

    Y-a-t-il quelque chose à faire d’autre que d’activer le plugin pour l’avoir ?

    Merci

    • Raccourcis Typographiques de SPIP, mode d’emploi 21 mars 2009 21:01, par Jacques PYRAT

      Je ne sais pas pour BeeSPIP. Bien que distribué en Open Source, BeeSPIP n’est pas développé publiquement. Raison pour laquelle j’évite strictement d’y toucher…

  • 21 janvier 2009 10:06

    Bonjour, Je cherche a mettre une balise pour gérer l’hébreu ou l’arabe, c’est a dire gérer le sens droite -> gauche ; Quelque chose du genre :

    $texte = preg_replace("'<rtl>([^\[]+)<\/rtl>'Ui",'<div align="right" class="hebreu" dir="rtl">\1</p></div>',$texte);

    Comment procéder merci ?

  • Problème Tableau 24 décembre 2006 16:44

    Bonjour, j’utilise SPIP 1.9 et en utilisant la syntaxe pour les tableaux, je me retrouve avec des caractères ; et , séparant les champs !! Quelqu’un a-t’il une explication ? Merci

  • 23 novembre 2006 16:08

    Bonjour, Je ne trouve pas le moyen de gérer des ancres dans la zone texte d’un article avec une liste déroulante de type form ou select.

    Auriez-vous une éventuelle solution ?

    Cordialement.

  • 18 octobre 2006 11:32

    Bonjour, Est-il possible de justifier un paragraphe avec ce logiciel ? Merci.

  • 10 octobre 2006 21:17

    Bonjour,

    j’ai testé ce plugin en version 1.9 et maintenant en 1.9.1 et cela rend bien service aux personnes qui ne sont habitués qu’aux wysiwyg (mais c’est pas encore gagné !).

    Je voulais savoir si cette barre (ou ce plugin) pouvait s’intégrer dans les rubriques, plus particulièrement dans la zone texte ?

    Sinon quelques remarque : je viens de m’appercevoir qu’il y a possibilité d’avoir une prévisualisation quasi instantané. Cela voudrait-il dire que l’on est sur la voie d’un éditeur wysiwyg en css ? Je ne suis pas expert pour savoir si cela est possible en fait… sinon le fait de pouvoir revenir en arriere en cliquant sur l’icone (par ex supprimer le gras) serait bien mais peut être que cela n’est pas possible non plus.

    En tous cas merci pour ce beau travail. Sylvain

  • Laurent 12 septembre 2006 20:58

    Nous avons installé ce plugin avec spip 1.9.1. Quelle convivialité, tout est vraiment très fonctionnel. Pour ajouter l’alphabet grec dans les caractères spéciaux comment faudrait-il s’y prendre ?

    Encore une fois Merci

    Laurent

  • Yann974 9 septembre 2006 13:20

    Bonjour… et merci pour ce superbe plugin de barre typo enrichie (v.1.9). Il me semble cependant qu’il y ait un oubli de taille. En effet, quid du tiret insécable ?

  • Thcan 21 août 2006 12:35

    Bonjour, J’utilise Spip 1.9 et j’ai incoporé le css du plugin dans spip_style.css.

    Tout fonctionne, cependant j’ai un problème avec les styles titre 1, titre 2 et titre 3 : Spip affiche le texte comme du corps…

    • RE : Style des titres 8 septembre 2006 17:49, par Snowcat

      La css du plugin ne comprend pas les styles des titres. Il faut les déclarer toi même.

      D’un point de vue html :

      • {{{titre de niveau 1}}} renvoi <h2>titre de niveau 1</h2>
      • {2{titre de niveau 2}2} renvoi <h3>titre de niveau 2</h3>
      • {3{titre de niveau 3}3} renvoi <h4>titre de niveau 3</h4>
      • {4{titre de niveau 4}4} renvoi <h5>titre de niveau 4</h5>
      • {5{titre de niveau 5}5} renvoi <h6>titre de niveau 5</h6>

      Ainsi, pour faire tes styles de titres, tu dois faire les styles des balises h2, h3, h4, h5 et h6

      • RE : Style des titres 10 avril 2008 10:40, par FX Theodule

        Bonjour, Si le niveau d’intertitre module bien les propriétés du texte auquel cet intertitre s’applique, il semble qu’il y ait un ’décalage’ entre le niveau d’intertitre choisi et la taille observée :

        Code SpipRenvoie dans le source HTML
        (1(Our Main themes are )1) [h3 class=« spip »]Our Main themes are [/h3]
        (2(RESEARCH AXES)2) [h4 class=« spip »]RESEARCH AXES[/h4]
        (3(HOTEL EXPRESS)3) [h5 class=« spip »]HOTEL EXPRESS[/h5]

        Comment faire pour supprimer ce décalage et avoir :

        (1(Our Main themes are )1) [h1 class=« spip »]Our Main themes are [/h1]
        (2(RESEARCH AXES)2) [h2 class=« spip »]RESEARCH AXES[/h2]
        (3(HOTEL EXPRESS)3) [h3 class=« spip »]HOTEL EXPRESS[/h3]

        Merci de m’éclairer sur le sujet Nota : Pour que les balises ne soient pas interprétées, j’ai remplacé les accolades ouvrantes/fermantes par des parenthèses ouvrantes/fermantes < par [ et > par ]

        • RE : Style des titres 18 avril 2008 14:36, par Jacques PYRAT

          Il faut installer le plugin cfg et régler les niveaux de titre par là (ou les régler par le fichier mes_options.php, mais c’est moins intuitif).

      • RE : Style des titres 2 mai 2009 00:13, par Steph

        Bonjour,

        J’ai le même problème que Thcan, sauf que votre réponse ne me suffit pas tout-à-fait car je débute. Dans quel fichier faut-il déclarer les styles par titres ? J’utilise spip 2 squelette sarkaspip 3.

        Merci beaucoup de m’éclairer.

  • Bonjour à tous,

    J’ai essayé [Texte|br18]

    Et cela m’affiche br18 en bulle d’aide (jusque là c’est logique)

    y-a-t-il un moyen pour qu’au lieu de me mettre br18, cela me renvoie la brève 18 dans la bulle d’aide ?

    Je demande cela car je mets en place un glossaire (un mot = une brève) sur mon site et je voudrais pouvoir utiliser les brèves dans tous les articles où les mots sont utilisés sans être obligé de faire des copier collé tout le temps.

    Merci d’avance pour la réponse

  • Pio 30 mai 2006 10:16

    Allez, juste une petite correction au passage : le beurre bio c’est 2€, le lait bio 1,20€ (le choux ça dépend)… :o)

    Rigolez pas ! c’est de + en + important de nos jours de ne pas décrédibiliser le bio…

  • 24 mai 2006 11:05

    j’ai rajouté le plugin dans le dossier plugin mais je n’arrive pas à l’activer. est ce normale ai-je oublié quelquechose ?

  • philippe LARA 24 mars 2006 15:09

    bonjour,

    le raccourci « fusion » de cellule est-il propre a SPIP 1.8.3 ou a ta version modifiée ?

    car il ne semble pas fonctionner en SPIP 1.8.3 pur

  • Bonjour, Comment faîtes vous pour les 4 niveaux de titre ? Je ne comprends pas bien. existe-t-ils par défaut dans spip ou faut il les définir ? Est ce propre à votre squelette : avez-vous définit de nouveaux raccourcis pour les niveaux 2, 3, 4 et 5 ?

    Parce que, par défaut, cette différenciation entre plusieur niveaux de titre n’a pas l’air d’exister dans SPIP.

    Pourriez-vous me dire comment créer ces raccourcis ?

    Merci d’avance,

    Nicolas

  • > question sur le raccourci cadre 12 août 2005 00:11, par ignare

    Bonjour,

    J’ai beau chercher (list spip, fourm, moteur de recherche) je ne trouve pas : cadre est très joli certes, et je l’utilise beaucoup et même s’il ne crée aucun problème de validation, il me semble poser un problème de sémantique comme on dit sur Spip-Lab. Ce raccourci produit en effet un formulaire et pourtant ce n’est pas le but.

    La seule chose que j’ai trouvée c’est l’élément HTML pre mais s’il y a un signe : il faut rajouter la balise html…

    Et les p class=« spip » se mettent tout autour de ce pre qui est pourtant un élément block, ce que Tidy n’aime pas.

    Auriez-vous une idée ?