Raccourcis Typographiques de SPIP, mode d’emploi

La typographie au service de la sémantique

La mise en page d’un contenu textuel doit permettre de renforcer son sens. Les CMS professionnels intègrent généralement des fonctionnalités typographiques dans leurs éditeurs de textes.

En dépit de son positionnement éditorial, SPIP n'offre pas nativement d'interface WYSIWYG (Acronyme de la formule en anglais "What You See Is What You Get" qui signifie en français que "ce que vous voyez est ce que vous faites").

Nous avons testés les modules qui tentent de palier à cette carence et avons constaté qu'ils généraient un certain nobre d'erreurs.

Nous avons donc jugé bon de mettre cet article à la disposition des rédacteurs encore utilisateurs de SPIP.

Pour vos premières mises en page

Au cours des premières utilisations de SPIP et avant toute mise en forme typographique, il vous sera plus aisé de :

  • partir d’un texte complet mais brut (sans apport typographique) ;
  • séparer d'une ligne chaque nouvelle idée (nouveau paragraphe) ;
  • poser un projet de titre pour chaque nouvelle idée ;
  • passer à la ligne avant chaque élément d’une énumération si vous comptez utiliser une liste à puces.

Votre texte ainsi posé, il vous sera ensuite facile d'appliquer à chaque séquence de texte l'attribut typographique approprié.

Plusieurs niveaux d'enrichissement typographique

Selon les besoins, les attributs typographiques peuvent être appliqués :

  • à des paragraphes entiers,
  • aux caractères de certains mots (majuscules accentuées par exemple),
  • ou à des mots isolés qu'il est nécessaire de valoriser au sein d'un paragraphe.

Vue de la barre typographique de SPIP

La barre d'outils typographiques de SPIP intègre :

  • des attributs de caractères (5 premiers boutons à gauche) ;
  • des attributs de paragraphes (6 boutons suivants).

Traitement typographique des paragraphes

Avec SPIP, un paragraphe doit être :

  • précédé d’une ligne libre ;
  • suivi d’une ligne libre [1].

Un seul attribut typographique peut être appliqué à un paragraphe.

Les attributs de paragraphe génériques

Mettez les à profit pour :

  • hiérarchiser les titres {{{Paragraphe du titre}}} entre titres principaux et inter-titres {{{*Texte du titre}}} en précisant un nombre d’* (étoiles) entre 2 et 5. (le 1 est le titre de la page).
    Autre syntaxe utilisable : {1{Titre de premier niveau}1}.
  • aligner à droite [/Paragraphe aligné à droite/] essentiellement pour permettre à un auteur de signer.
  • encadrer un texte [(Paragraphe à encadrer)].

Les attributs de paragraphes spécifiques

  • Poésie pour que les retours à la ligne simples renvoient effectivement à la ligne
  • Cadre Le texte apparait dans une zone de formulaire pour simplifier le copier/coller 
  • Citation Texte d’une citation

Les attributs de Caractères

Les attributs de caractères s’ouvrent et se ferment exclusivement à l’intérieur du paragraphe qui les contient.

Ils s’appliquent à tous les champs de SPIP.

Pour la mise en forme

  • gras {{texte en gras}} donne de l'importance en appuyant visuellement et en augmentant le volume en mode "reconnaissance vocale",
  • italique {italique} distingue une séquence du texte en la mettant en relief visuellement et en la prononçant avec emphase en "reconnaissance vocale",
  • mise en évidence [*texte en évidence*] attire l'attention visuelle à l'aide d'une colorisation,
  • exposant texte en exposant positionne le caractère comme le 2 de "m2" pour indiquer un surface dans cet exemple,
  • petites capitales : texte en petite capitales s'utilise pour modéliser les noms propres,
  • code : du code (raccourcis typographiques, html…) indique à SPIP que la séquence de code figurant entre les balises ne doit pas être prise en compte dans l'exécution du script,
  • biffé : texte biffé indique que l'auteur a finalement remplacé un mot par un autre en tenant à ce que le lecteur le sache.

Pour préciser le sens d'une séquence particulière de texte

  • bulle d’aide : [GPL|Gnu Public Licence] définit précisément un élément… [GPL|Gnu Public Licence]
  • Le plugin Dictionnaires permet de générer automatiquement la traduction des sigles et des acronymes au survol du texte

Des liens internes et externes

  • lien externe : [texte du lien|texte de la bulle d'aide du lien->http://www.spip.net/] pour créer un lien qui pointe vers la page d'un autre site,
  • lien interne : vers un autre élément du site [texte du lien|texte de la bulle d'aide du lien->rubrique7] pour compléter une information d'autres informations déjà développées par ailleurs,
  • lien avec langue de destination (inexploitable sur Internet Explorer) : [texte du lien|->http://www.spip.net/],
  • lien avec bulle d’aide et langue de destination : [texte du lien|Le site officiel de SPIP{fr}->http://www.spip.net/],
  • ancre et retour à l’ancre : [definition_ancre<-] et [retour à l'ancre->#definition_ancre],
  • définition dans Wikipedia : [?GPL] : appelle l’encyclopédie libre Wkipedia pour obtenir la définition du mot [2],
    Avec bulle d’aide : [?GPL|Définition sur Wikipédia]
  • note de bas de page  : texte[[note de bas de page]] renvoie à une note de bas de page [3]

Des listes pour simplifier la lecture

Les listes présentent l'avantage de présenter clairement une succession d'éléments associés à une idée.

Un bloc de liste sera toujours précédé et suivi d’une ligne libre.

Les listes à puces

En syntaxant comme suit la typographie d'une liste à puces:

_* première ligne ;

_* seconde ligne ;

_**liste à puces secondaire associée au second point de la première ;

_**second point de la liste à puces secondaire ;

_* troisième puce de la première liste.

On obtient un contenu présenté sous cette forme:

  • première ligne ;
  • seconde ligne ;
    • liste à puces secondaire associée au second point de la première ;
    • second point de la liste à puces secondaire ;
  • troisième puce de la première liste.

Les listes numérotées

En syntaxant comme suit la typographie d'une listre numérotée :

#* première ligne ;

#* seconde ligne ;

#**liste à puces secondaire associée au second point de la première ;

#**second point de la liste à puces secondaire ;

#* troisième puce de la première liste.

On obtient un contenu présenté sous cette forme :

  1. première ligne ;
  2. seconde ligne ;
    1. liste à puces secondaire associée au second point de la première ;
    2. second point de la liste à puces secondaire ;
  3. troisième puce de la première liste.

Des tableaux pour présenter des données techniques

Un tableau conforme aux bonnes pratique de l'accessibiité web contient un titre et un descriptif.

En syntaxant comme suit la typographie d'un tableau :

On obtient un contenu présenté sous cette forme :

Modèle de Tarif
Produits laitiersPrix TTC en €
Beurre Bio (la livre)10,20€
Lait Bio (le litre)3,10€
Tomme fermeière Bio (le kilo)9,80€

Les doubles || [4] servent à indiquer que cette ligne est la première du tableau et qu'elle porte le titre et le descriptif !

Fusionner les cellules d'un tableau

En syntaxant comme suit la typographie d'un tableau :

On obtient un contenu présenté sous cette forme :

Modèle de tableau avec cellules fusionnées
Colonne 1Colonne 2Colonne 3
ligne 1Cellule fusionnée avec la suivante
ligne 2Cellule fusionnée
avec celle du dessous
normale
ligne 2normale aussi

Zoom sur la syntase permettant de fusionner les cellules d'un tableau :

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

Utiliser les caractères spéciaux

  • ~ (espace insécable ou espace dur — correspond au   du [HTML|Hyper Text Markup Language]) placé entre deux mots crée un espace insécable qui empêche les deux mots d’être séparés. Les espaces insécables sont particulièrement utiles pour évider qu’un numéro de téléphone ou qu’une date soient désolidarisés dans les textes.
  • --> : → (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

Poisitionner une ligne horizontale

---- : 4 signes moins juxtaposés sur une ligne produisent un trait horizontal sur toute la largeur de la page.

Pour aller plus loin...

FireFox propose une extension permettant de s'assurer que vos raccourcis typographiques sont conformes : HTML VALIDATOR (based on Tidy).

L'utilisation des attributs typographiques n'a par ailleurs de sens que si votre contenu présente un intérêt textuel réel. Pour plus d'informations sur ce volet, vous pouvez visiter la page "Publier des contenus de qualité"

[1] Cette règle ne concerne ni les listes à puce, ni les tableaux.

[2] Créez si besoin les mots qui n'y figurent pas encore !

[3] La note de bas de page est automatiquement numérotée, on peut la consulter et revenir au texte initial en cliquant.

[4] Pour intégrer le signe | dans les liens ou les tableaux, activer la combinaison "AltGR-6" sous Windows ou "alt majuscule L" si vous travaillez sur Mac .

 

Retrouvez également dans notre dossier Administrer un site Drupal la gestion des contenus publiés sous Drupal par l'agence Mantalo.

Catégorie Contenu: 

Lettres d'information

Mantalo Formations

Organisme de formation web, communication, marketing
Cap@cités - 251, bd des Saveurs
24660 Coulounieix-Chamiers (Périgueux Sud)
Aquitaine - Dordogne
Tél. : 05 53 03 05 21

Suivez nous sur :