Raccourcis typographiques

© Christian PAULUS. Document créé le 17 septembre 2008 , mis à jour le 6 octobre 2008.

C'est le devoir de chaque homme de rendre au monde au moins autant qu'il en a reçu. Albert Einstein

Accueil du site > Astuces > SPIP > Raccourcis typographiques

Formation / SPIP 192

Mots-clés

Même rubrique

La barre typo permet d’enrichir l’affichage du texte de votre article. Mais il est parfois nécessaire de le retoucher manuellement, dans sa boite d’édition en espace privé, par l’emploi des raccourcis typographiques de SPIP.

Voici quelques exemples qui pourront vous servir à l’occasion, voire compléter votre formation.

Si vous en avez quelques uns à proposer, le forum en bas de page est à votre disposition.

Créer un paragraphe

Laissez une ligne blanche entre les deux paragraphes.

Exemple :

Paragraphe #1.

Paragraphe #2.

Résultat :

Paragraphe #1.

Paragraphe #2.

Retour à la ligne forcé

Exemple :

Ligne #1.
Ligne #2.

Résultat :

Ligne #1. Ligne #2.

Pour forcer le retour à la ligne, insérez un espace sous-ligné (tiret bas) suivi d’un espace au début de la ligne :

Exemple :

Ligne #1.
_ Ligne #2.

Résultat :

Ligne #1.
Ligne #2.

Listes et énumérations

Un seul tiret en début de ligne liste avec un petit triangle

Exemple :

- Premier élément ;
- Second élément.

Résultat :

- Premier élément ;
- Second élément.

Un double tiret liste avec un grand tiret

Exemple :

-- Premier élément ;
-- Second élément.

Résultat :

— Premier élément ;
— Second élément.

Un tiret suivi d’une étoile (signe multiplier sur le clavier) liste avec des puces naturelles

Si vous êtes sensible à la conformité X-HTML et les règles d’accessibilités (WAI/WCAG), c’est cette option que vous devez préférer au deux précédentes dont le code HTML est celui d’un paragraphe au lieu d’une liste :

Exemple :

-* Premier élément ;
-* Second élément.

Résultat :

  • Premier élément ;
  • Second élément.

Listes imbriquées

Exemple :

-* Premier élément ;
-* Deuxième élément ;
-** Premier sous-élément ;
-** Deuxième sous-élément ;
-* Troisième élément ;

Résultat :

  • Premier élément ;
  • Deuxième élément ;
    • Premier sous-élément ;
    • Deuxième sous-élément ;
  • Troisième élément ;

Liste avec numéros

Exemple :

-# Premier élément
-# Deuxième élément
-# Troisième élément

Résultat :

  1. Premier élément
  2. Deuxième élément
  3. Troisième élément

Liste numérotée dans un élément d’une liste

Exemple :

- Premier élément
- Deuxième élément
-## Premier sous-élément
-## Deuxième sous-élément
-## Troisième sous-élément
- Troisième élément

Résultat :

- Premier élément
- Deuxième élément

    1. Premier sous-élément
    2. Deuxième sous-élément
    3. Troisième sous-élément
      - Troisième élément

Visiblement, ne donne pas le résultat attendu. De toute façon, comme précisé plus haut, les listes formatées par les raccourcis SPIP tiret et double-tiret sont à éviter.

Autre exemple :

-# Premier élément
-# Deuxième élément
-## premier
-## Deuxième sous-élément
-## Troisième élément
-# Troisième élément

Résultat :

  1. Premier élément
  2. Deuxième élément
    1. Premier sous-élément
    2. Deuxième sous-élément
    3. Troisième sous-élément
  3. Troisième élément

Plus propre, n’est-ce pas ?

Enrichissements typographiques

Du gras et de l’italique dans le texte

Exemple :

Un texte {{en gras}}, un autre {en italique}.

Résultat :

Un texte en gras, un autre en italique.

Nota : la balise HTML calculée pour l’italique (i) est dépréciée [1].

Plus corsé :

Exemple :

{{ {En gras puis en italique.} }}

Notez au passage l’espace entre les deux accolades du gras et celle de l’italique.

Résultat :

En gras puis en italique.

Pour s’en convaincre, supprimons l’espace :

Exemple :

{{{En gras puis en italique.}}}

Résultat :

En gras puis en italique.

Et c’est un titre de niveau 3 qui apparaît. L’espace est donc très important.

Complétons par un titre de niveau 3, dont une partie est en gras, une autre en italique, et la dernière en gras italique :

Exemple :

{{{Intertitre, avec un mot en {{gras}}, un autre en {italique}, un dernier en {{ {gras italique} }} }}}

Résultat :

Intertitre, avec un mot en gras, un autre en italique, un dernier en gras italique

Pas toujours très probant. Tout dépend de votre feuille de style CSS.

Un titre de paragraphe

Enveloppez votre titre d’une tripe-accolade.

Exemple :

{{{Intertitre}}}

Résultat :

Intertitre

Séparateur horizontal

Placez 4 tirets pour obtenir un grand trait (balise HTML HR).

Exemple :

----

Résultat :

Lien hypertexte

Entre crochets avec tiret et signe supérieur (>) ;

URL seule

Exemple :

[->http://www.foo.bar].

Résultat :

http://www.foo.bar.

URL avec texte et bullet

Exemple :

[Lien sur un site|bulle d'aide->http://www.foo.bar].

Résultat :

Lien sur un site.

Lien sur un article local (présent sur le site, et publié sinon erreur 404)

Exemple :

-* [->233]
-* [->art233]
-* [->art 233]
-* [->article233]
-* [->article 233]

Résultat :

Lien sur une brève locale (présente sur le site, et publiée sinon erreur 404)

Exemple :

-* [->br11]
-* [->breve 11]
-* [->brève 11]

Autres liens sur le même site

Dans le même principe, possibilité de lier à un auteur ; un mot-clé ; une rubrique ; un site syndiqué ; un document joint ; une image :

Exemple :

[un auteur->aut1] ou [le même auteur->auteur1]
[un mot->mot32]
[une rubrique->rub64]
[un site syndiqué->site1]
[un document joint->doc17] ou [le même document->document17]
[une image->img13] ou [la même image->image13]

Résultat :

Ca ne donne rien ici. C’est normal, il n’y a pas de brève sur ce site.

Lien interne au site

Lien interne à l’article

Créer une ancre :

Exemple :

[ancre<-]

L’ancre est invisible à l’affichage. Vérifiez sa présence dans le code source de la page.

Et pour lier à cette ancre, dans votre texte, du même article :

[Voir plus haut->#ancre]

Résultat :

Voir plus haut

Adresse mail

Pour les adresses mail, inutile d’ajouter « mailto: ».

Exemple :

[Contact->contact@foo.bar]

Résultat :

Contact

Si pas de texte, affiche directement l’adresse mail activée.

Exemple :

[->contact@foo.bar]

Résultat :

contact@foo.bar

Lien sur Wikipedia

Vérifiez que la page existe sur Wikipedia avant de valider votre article. Placez entre crochets et placez un point d’interrogation au début du mot :

Exemple :

En savoir plus sur [?Wikipedia]

Résultat :

En savoir plus sur Wikipedia

Note de bas de page

Exemple :

Cette phrase est trop longue [[Sa note la complète]].

Résultat :

Cette phrase est trop longue [2].

Pour reprendre la même note de bas de page plus loin dans votre article, insérez entre crochets et symboles inférieur/supérieur le numéro de la note.

Exemple :

Cette phrase a besoin d'être complétée par une note présente dans l'article [[<1>]].

Résultat :

Cette phrase a besoin d’être complétée par une note présente dans l’article [1].

Si vous voulez insérer un lien dans une note de base de page, il faut corriger le code. En effet, la barre Typo (SPIP 192e) ne place pas l’espace nécessaire entre les crochets.

Exemple :

[[Note avec [lien->http://foo.bar]]].

n’interprétera pas le lien.

Sa version corrigée manuellement (un espace inséré avant les deux derniers crochets) :

[[Note avec [lien->http://foo.bar] ]].

Tableau

Tableau simple

Exemple :

|{{titre a}}|{{titre b}}|
|1a|1b|
|2a|2b|

Résultat :

titre atitre b
1a 1b
2a 2b

Tableau avec cellules liées

Exemple :

||Description|tableau exemple||
|{{titre a}}|{{titre b}}|{{titre c}}|
|1a|1b1c|<|
|2a|2b|2c|
|3a|3b4b|3c|
|4a|^|4c|

Résultat :

Description
titre atitre btitre c
1a 1b1c
2a 2b 2c
3a 3b4b 3c
4a 4c

Exemple :

||Description|tableau exemple||
|{{titre a}}|{{titre b}}|{{titre c}}|
|1a1b|<|1c|
|2a|2b 3b 4b|2c|
|3a|^|3c|
|4a|^|4c|
|5a|5b|5c|

Résultat :

Description
titre atitre btitre c
1a1b 1c
2a 2b 3b 4b 2c
3a 3c
4a 4c
5a 5b 5c

Balises HTML

Certaines balises sont acceptées et traitées par le filtre texte.

Code HTML

Ajouter du code HTML dans son article :

Exemple :

<code><p>Ceci est une ligne de code <strong>HTML</strong></p>
&lt;/code&gt;&lt;

Résultat :

<p>Ceci est une ligne de code <strong>HTML</strong></p>

Vous pouvez ajouter autre chose que du HTML.

Code PHP

Présenter du code PHP (colorisé) dans son article :

Exemple :

<?php print("Hello World"); ?>

Résultat :

<?php print("Hello World"); ?>

Code Javascript et style CSS

Le code Javascript ne bénéficie pas de la coloration. CSS non plus.

Et si le code Javascript est préservé, le code CSS sera interprété comme texte et donc inefficace. De toute façon, l’utilisation de la balise style dans le body n’est pas conforme à la norme XHTML-strict.

Exemple :

<script type="text/javascript">
document.write("Hello World");
</script>

Résultat :

Le code Javascript n’est interprété qu’en espace public . En espace privé, il est affiché tel que sauf s’il vient d’un modèle.

Exemple, un peu de script inséré en fin de cet article afin de colorer le bord des cellules des tableaux (paragraphe des tableaux).

<script type="text/javascript">
// <![CDATA[
for(var i = 0; i < document.getElementsByTagName("td").length; i++) {
  document.getElementsByTagName("td")[i].style.border = "solid #ccc 1px";
}
// ]]>
</script>

Balises HTML pour marquage logique

D’autres balises HTML dites de « marquage logique [3] » sont disponibles. Par exemple :

  • balise samp pour un exemple
  • balise kbd pour une entrée clavier
  • balise var pour une variable
  • balise cite pour une citation
  • balise dfn pour une définition
  • balise acronym pour un acronyme
  • balise abbr pour une abréviation
  • balise q pour une citation avec référence sur un autre site

Del et Ins

Les balises DEL (extrait de texte supprimé) et INS (extrait de texte ajouté) sont acceptées.

Exemple [4] :

<p>Goethe est né en <del>1768</del><ins>1789</ins> et était un
<del>sportif</del> <ins>écrivain</ins> doué.</p>

Résultat :

Goethe est né en 17681789 et était un sportif écrivain doué.

Titre de niveau 4

La balise H4 est nécessaire pour certains articles.

<h4>Un sous-intertitre</h4>

Image et document joint

Insérez votre image via la boite « AJOUTER UNE IMAGE », puis après chargement, copier/coller le code HTML proposé sous l’image (ou son icone si les vignettes ne sont pas activées.

Exemple :

<img123|center>

Pour les documents, faire de même en utilisant la boite « AJOUTER UN DOCUMENT ».

Exemple :

<doc123|center>

Portfolio

Cas à part, le portfolio d’images. Il faut charger ses images en tant que documents. Le portfolio apparaît automatiquement en fin d’article (si vous utilisez un squelette standard) [5].

Balises propre à SPIP

Curiosité ? Une balise non HTML.

cadre

Exemple :

<cadre><p>Texte dans un cadre</p></cadre>

Résultat :

Autre curiosité : la balise <html>

Exemple :

<html>Texte dans un bloc à ne pas interpréter (conserve le {{texte}} brut tel qu'entré dans la boite d'édition et place le tout dans un paragraphe). </html>

Résultat :

Texte dans un bloc à ne pas interpréter (conserve le {{texte}} brut tel qu'entré dans la boite d'édition et place le tout dans un paragraphe).

A noter:

- Lire la documentation en ligne sur votre site. C’est en espace privé, le bouton Aide qui est sur la droite
- Styles des raccourcis typographiques de SPIP
- Les raccourcis SPIP
- Antisèche SPIP - SPIP Cheat sheet

Notes

[1] http://www.w3.org/TR/REC-html40/pre...

[2] Sa note la complète

[3] Voir la page consacrée au marquage logique sur SELFHTML

[4] Exemple de texte issu de l’excellent site didactique SelfHTML

[5] Voir également le plugin Portfolio ImageFlow pour l’insertion de votre portfolio au coeur de l’article

Plussoyez !

Les forums sont fermés.