Charte Typo de ce site

Ceci est le sous titre de l’article

Cette page présente un échantillon de chacun des enrichissements typographiques disponibles sur ce site. Leur apparence est programmée par le webmestre, en CSS, via des « feuilles de style externes ». Ce paragraphe constitue donc le chapeau.

Paragraphes

Premier paragraphe. L’idée principale doit être exprimée clairement au début du paragraphe. Les autres phrases servent à expliquer et à illustrer le message qu’on veut transmettre. Bref, un paragraphe pour chaque idée et une idée par paragraphe.
Ici, retour à la ligne, généré par le raccourci SPIP « _ ». Espace insécable.

Deuxième paragraphe. Selon la norme typographique adoptée, la première ligne d’un paragraphe peut être en retrait (alinéa rentrant). Sur un document électronique comportant de nombreux paragraphes courts, on évite parfois ce retrait pour le remplacer par une ligne vierge, détachant mieux les paragraphes et les prêtant ainsi mieux à la lecture rapide.

Troisième paragraphe, précédé d’une ligne horizontale de séparation, générée par le raccourci SPIP « ---- ». La lecture sur écran est fastidieuse et provoque rapidement de la fatigue oculaire. Il est donc recommandé d’aérer le texte : faire des paragraphes courts et sauter une ligne entre chaque.

Un intertitre normal

Voici du texte en italique et du texte en gras.
Voici un ~~texte supprimé~~ et le texte inséré en correction.
Une définition de terme avec la balise <dfn>.
Un sigle, par exemple W3C, est lu lettre par lettre, tandis que SPIP est un acronyme puisqu’il forme un mot qui est lu normalement.

Texte de gauche à droite et Texte de droite à gauche avec <bdo>.
Mise en exposant ² et mise en indice : H₂O.
Et voici une note de bas de page [1].

Ici, exemple de raccourci SPIP « - », corrigé par la trousse à têtue pour former une liste.

Ici, exemple de puce générée par le raccourci « * » de la trousse à têtue. Attention, leur succession ne constitue pas une liste !

— Un tiret long, généré par le raccourci SPIP « -- », utile pour les dialogues.

Hyperliens

SPIP distingue lien interne et liens externes dont URLs directes : http://www.spip.net, et lien généré par le raccourci [->site2] : site 2.
Mieux vaut spécifier la langue de destination, par exemple : SPIP.
Lien vers une définition du glossaire prédéfini : Wikipédia
Courriel : adresse@courriel.fr
Une ancre vers les citations : #citations

Listes

Liste non ordonnée (ul), générée avec le raccourci SPIP « -* » :

Élément de liste non numérotée
Élément de liste non numérotée
Élément de liste non numérotée
- Plantes
  - Ficus
  - Olivier
- Animaux de compagnie
  - Chat
  - Chien

Et une liste numérotée (ol), générée avec le raccourci SPIP « -# » :

Voici ma main : elle a cinq doigts. En voici deux, en voici trois.
Le premier, ce gros bonhomme, C’est le pouce qu’il se nomme.
L’index qui montre le chemin, Est le second doigt de la main.
Entre l’index et l’annulaire, Le majeur paraît un grand frère.
L’annulaire porte l’anneau, Avec sa bague, il fait le beau.
Le tout petit auriculaire Marche à côté de l’annulaire.

Regardez mes doigts travailler. Chacun fait son petit métier.

N’oublions pas les listes de définition, générées avec les balises HTML <dl>, <dd>, <dt> :

polatouche (n.m.): Mammifère rongeur omnivore méconnu d’Eurasie ou d’Amérique du Nord, dit « écureuil volant » car il est capable de planer en ligne droite d’un arbre à l’autre grâce à son patagium (membrane qui réunit ses pattes à son corps). Pelage gris et blanc.
écureuil (n.m.): Petit rongeur arboricole d’Europe à longue queue très touffue, excellent grimpeur, capable de sauts très étendus, amassant des provisions pour l’hiver et aisément familier de l’homme. Pelage gris ou roux.

Tableaux

Titre du tableau (caption)
entête	entête	entête
valeur	valeur	valeur
valeur	valeur	valeur
valeur	valeur	valeur

Citations

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ceci est une citation au fil du texte (avec la balise HTML <q>).

Ceci est une citation ordinaire, avec la balise HTML <blockquote>. Cras eleifend tristique quam. Fusce gravida lectus vel enim convallis tempor.
Second paragraphe. Maecenas laoreet interdum elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus tristique wisi ut lacus.

Ceci est une citation générée avec le raccourci SPIP <quote>.

Je ne connaîtrai pas la peur car la peur tue l’esprit. La peur est la petite mort qui conduit à l’oblitération totale. J’affronterai ma peur. Je lui permettrai de passer sur moi, au travers de moi. Et lorsqu’elle sera passée, je tournerai mon œil intérieur sur son chemin. Et là où elle sera passée, il n’y aura plus rien. Rien que moi.

Litanie contre la peur, Dune, Franck Herbert.

Je le vis, je rougis, je pâlis à sa vue

Un trouble s’éleva dans mon âme éperdue

Mes yeux ne voyaient plus, je ne pouvais parler

Je sentis tout mon corps et transir et brûler.

Ceci est une citation du Phèdre de Racine, générée avec le raccourci SPIP <poesie>, idéal pour les vers des poèmes et chansons.

Et voici du code, généré avec le raccourci SPIP <code> :

<?php
        // ceci est du langage php
        echo "bonjour";
?>

Ce raccourci natif est ici corrigé via un patch expérimental, pour afficher du code proprement (avec <pre><code>) dans SPIP, en proposant de plus des variantes stylistiques selon le type de langage :

exemple
de code SPIP

exemple
de code HTML

exemple
de code CSS

exemple
de code LESS

exemple
de code SCSS

exemple
de code JS

exemple
de code PHP

exemple
de code inconnu

exemple
de pre simple

Ici remplacé par <code>, le raccourci SPIP <cadre> permetait publier des extraits de code que l'on peut facilement copier-coller.

<?php
	// ceci est du langage php
	echo "au revoir";
?>

Sans oublier un raccourci-clavier (<kbd>), un extrait de script (<samp>) et une variable (<var>).

Et pour finir en beauté, voici une formule mathématique, générée en LaTeX avec <math> :

$z=\left( \frac {e^{i\theta}+e^{-i\theta}}{2}\right)^2 +\left(\frac{e^{i\theta}-e^{-i\theta}}{2i} \right)^2$