Accueil / Charte typographique

Charte typographique

Le texte avant la mise en page

C’est une évidence : pour mettre en page un texte, il faut que le texte existe.

Lors de la publication d’un texte avec SPIP, nous recommandons soit de recopier le texte directement dans un article (au moins dans un premier temps), soit de copier coller le texte depuis un traitement de texte sans chercher à récupérer les enrichissements typographiques du traitement de texte :

  • disposer de tout le texte sans aucun raccourcis 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 liste (énumération).

Ensuite il faut donc appliquer les raccourcis typographiques de SPIP avec discernement.

Distinction entre paragraphes et caractères

Certains attributs typographiques s’appliquent à mots isolés ou a des groupes de mots et d’autres à des paragraphes entiers.

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.

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.

Mise en forme :

  • gras : {{texte en gras}} ; à utiliser pour un élément que l’on souhaite appuyer (sera prononcé plus fort dans un lecteur vocal) : texte en gras
  • italique : {italique} ; à utiliser pour une élément sur lequel on veut insister (sera prononcé avec emphase) : italique
  • code : <code>#TITRE</code> du code (raccourcis typographiques, html...) que l’on ne souhaite pas que SPIP interprète : #TITRE
  • 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 !

Comportement spécifique :

  • 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) : [texte du lien->art55], Lien vers l’article n°55.
  • lien avec bulle d’aide : [texte du lien avec bulle d'aide|Le site officiel de SPIP->http://www.spip.net/] : texte du lien avec bulle d’aide
  • lien avec langue des destination (non visible sur Internet Explorer) : [texte du lien|{fr}->http://www.spip.net/] : texte du lien
  • lien avec bulle d’aide et langue des destination : [texte du lien avec bulle d'aide|Le site officiel de SPIP{fr}->http://www.spip.net/] : texte du lien avec bulle d’aide
  • 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 [1] : 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 [2]

Paragraphes

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

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

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 geignait dans le jasmin »
Voici, mes zinfints
Sans en avoir l’air
Le plus beau vers
De la langue française.
  • Cadre <cadre>Texte qui apparaitra dans une zone de formulaire facilitant le copier/coller [4]</cadre>
  • Citation <quote>Texte d’une citation</quote>

C’est en forgeant que l’on devient forgeron.

Alignement des paragraphes

Le texte d’un paragraphe est par défaut aligné à gauche. Nulla commodo turpis et justo pharetra varius. Vivamus viverra mauris nec sem laoreet volutpat placerat eget elit. Etiam laoreet volutpat arcu, sed iaculis nibh tincidunt ut. Proin enim augue posuere.

Il peut être justifié en utilisant ce code [|texte justifié|] ou bien le bouton de la barre d’outil correspondant. Nulla commodo turpis et justo pharetra varius. Vivamus viverra mauris nec sem laoreet volutpat placerat eget elit. Etiam laoreet volutpat arcu, sed iaculis nibh tincidunt ut. Proin enim augue posuere.

[-Il peut être centré en utilisant ce code [-texte centré-] ou bien le bouton de la barre d’outil correspondant. Nulla commodo turpis et justo pharetra varius. Vivamus viverra mauris nec sem laoreet volutpat placerat eget elit. Etiam laoreet volutpat arcu, sed iaculis nibh tincidunt ut. Proin enim augue posuere.-]

Il peut enfin être aligné à droite en utilisant ce code [/texte aligné à droite/] ou bien le bouton de la barre d’outil correspondant. Nulla commodo turpis et justo pharetra varius. Vivamus viverra mauris nec sem laoreet volutpat placerat eget elit. Etiam laoreet volutpat arcu, sed iaculis nibh tincidunt ut. Proin enim augue posuere.

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.

Listes à puces

Donnera :

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

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

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

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

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/signification] de chacune d’elles.

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.
  • -- : — (tiret cadratin) à utiliser pour les incises dans un texte

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.


Attention

Il y a deux remarques à faire dans SPIP :

  • le retour à la ligne simple : _ (souligné espace) en début de paragraphe.
    Usage normal pour aller à la ligne dans le même paragraphe.
    Usage normal : dans une liste à puce pour passer à la ligne sans passer à une nouvelle puce (comme ici).
    Usage peu recommandé : 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 très 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 sur tel ou tel navigateur)

Exemples de titraille : Titre principal

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

Placement des images

I love Spip {PNG}<img208|left> Nulla commodo turpis et justo pharetra varius. Vivamus viverra mauris nec sem laoreet volutpat placerat eget elit. Etiam laoreet volutpat arcu, sed iaculis nibh tincidunt ut. Proin enim augue posuere.


I love Spip {PNG}<img208|center> Nulla commodo turpis et justo pharetra varius. Vivamus viverra mauris nec sem laoreet volutpat placerat eget elit. Etiam laoreet volutpat arcu, sed iaculis nibh tincidunt ut. Proin enim augue posuere.


I love Spip {PNG}<img208|right> Nulla commodo turpis et justo pharetra varius. Vivamus viverra mauris nec sem laoreet volutpat placerat eget elit. Etiam laoreet volutpat arcu, sed iaculis nibh tincidunt ut. Proin enim augue posuere.


PNG - 11.2 ko
I love Spip
J’aime beaucoup Spip.

<doc208|left> Nulla commodo turpis et justo pharetra varius. Vivamus viverra mauris nec sem laoreet volutpat placerat eget elit. Etiam laoreet volutpat arcu, sed iaculis nibh tincidunt ut. Proin enim augue posuere.


PNG - 11.2 ko
I love Spip
J’aime beaucoup Spip.

<doc208|center> Nulla commodo turpis et justo pharetra varius. Vivamus viverra mauris nec sem laoreet volutpat placerat eget elit. Etiam laoreet volutpat arcu, sed iaculis nibh tincidunt ut. Proin enim augue posuere.


PNG - 11.2 ko
I love Spip
J’aime beaucoup Spip.

<doc208|right> Nulla commodo turpis et justo pharetra varius. Vivamus viverra mauris nec sem laoreet volutpat placerat eget elit. Etiam laoreet volutpat arcu, sed iaculis nibh tincidunt ut. Proin enim augue posuere.


PNG - 11.2 ko
I love Spip
J’aime beaucoup Spip.

<emb208|left> Nulla commodo turpis et justo pharetra varius. Vivamus viverra mauris nec sem laoreet volutpat placerat eget elit. Etiam laoreet volutpat arcu, sed iaculis nibh tincidunt ut. Proin enim augue posuere.


PNG - 11.2 ko
I love Spip
J’aime beaucoup Spip.

<emb208|center> Nulla commodo turpis et justo pharetra varius. Vivamus viverra mauris nec sem laoreet volutpat placerat eget elit. Etiam laoreet volutpat arcu, sed iaculis nibh tincidunt ut. Proin enim augue posuere.


PNG - 11.2 ko
I love Spip
J’aime beaucoup Spip.

<emb208|right> Nulla commodo turpis et justo pharetra varius. Vivamus viverra mauris nec sem laoreet volutpat placerat eget elit. Etiam laoreet volutpat arcu, sed iaculis nibh tincidunt ut. Proin enim augue posuere.