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 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 énumération.
Ce n’est qu’ensuite que les raccourcis typographiques de SPIP pourront être appliqués avec discernement.
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.
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.
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}}
}
.
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 jasminVoici 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 [2]</cadre>
Ceci est du texte dans un cadre.
les espaces en début de ligne comptent !
Les retour à la ligne simples aussi !
- Citation
<quote>
Texte d’une citation</quote>
C’est en forgeant que l’on devient forgeron.
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>du code (raccourcis typographiques, html...)</code> que l’on ne souhaite pas que SPIP interprète
- depuis SPIP 4.2, on peut aussi utiliser les backticks (
`
) pour insérer du code. - biffé :
<del>
texte biffé</del>
: pour indiquer qu’on avait pensé à un autre mot et que l’on a changé d’avis : SPIP, c’estbienfantastique !
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). - Lien avec bulle d’aide :
[texte du lien|Le site officiel de SPIP->http://www.spip.net/]
: texte du lien - 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|Le site officiel de SPIP{fr}->http://www.spip.net/]
: texte du lien - Lien vers un email
[Contacter max->max@domaine.com]
Contacter max - Lien vers un email avec un sujet pré-rempli
[Contacter Max pour le spam->mailto:max@domaine.com?subject=Cadeau pour les robots spammeurs]
Contacter Max pour le spam - 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 Wikipedia pour obtenir la définition du mot [3] : 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 [4] - expression mathématique
<math>expression TeX</math>
: affichage une formule mathématique selon la syntaxe LaTeX :
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
-* première ligne
-* deuxième ligne
-** une sous liste à puce
-* de retour dans le niveau initial
Donnera :
- première ligne
- deuxième ligne
- une sous liste à puce
- de retour dans le niveau initial
Listes numérotées
-# première ligne
-# deuxième ligne
-## une sous liste à puce
-# de retour dans le niveau initial
Donnera :
- première ligne
- deuxième ligne
- une sous liste numérotée
- de retour dans le niveau initial
Tableaux
Pour être complètement accessible, un tableau dans SPIP doit avoir un titre et une description.
Ainsi :
||Produits bio et prix|Ce tableau sert d'exemple de mise en forme spip||
| {{Produit}} | {{Prix €}} |
| Beurre Bio | 5€ |
| Lait Bio | 3€ |
| Choux Bio | 4€ |
Donnera :
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
||Tableau avec fusion|Ce tableau sert d'exemple de mise en forme spip||
| {{Colonne 1}} | {{Colonne 2}} | {{Colonne 3}} |
| ligne 1 | Cellule fusionnée avec la suivante |<|
| ligne 2 | Celulle fusionnée
_ avec celle du dessous | normale |
| ligne 2 |^| normale aussi |
Donnera :
Colonne 1 | Colonne 2 | Colonne 3 |
---|---|---|
ligne 1 | Cellule fusionnée avec la suivante | |
ligne 2 | Celulle fusionnée
avec celle du dessous |
normale |
ligne 2 | normale aussi |
Principe :
-
|<|
fusionne avec la cellule de gauche -
|^|
fusionne avec la cellule au dessus
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
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.
É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. - les fausses listes à puce :
-
(moins espace) en début de ligne
L’effet visuel peut être intéressant, mais il n’a pas de sens.
- Ceci est une fausse liste à puce - 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 fichier PDF...
Exemples de titraille : Titre principal
{{{
Exemples de titraille : Titre principal}}}
Discussions par date d’activité
17 discussions
Bonjour à tous,
Une question (je ne l’ai encore jamais vu jusqu’à présent) : est-ce qu’il existe un raccourci typo standard pour la balise tfoot de table ? Et sinon, que me conseilleriez-vous de faire ? Surcharger Enluminures typographiques ? Aller plutôt vers Couteau Suisse ?
Merci pour votre réponse !
Répondre à ce message
Bonjour,
Je m’aperçois que pour le formatage des tableaux, l’entête formaté avec le double pipe ne permet pas d’afficher « Ce tableau sert d’exemple de mise en forme spip », il ne reste que « Produits bio et prix » :
https://contrib.spip.net/Les-raccourcis-typographiques-en-standard-avec-SPIP#Tableaux
françois
Salut François,
Oui, c’est tout à fait normal. C’est une information en HTML4 à destination des lecteurs d’écran (Jaws, Nvda).
Mais le HTML4 générélé n’est plus valide en HTML5.
Je suis en train de faire des tests d’ailleurs : https://codepen.io/jpyrat/pen/LYZwWYR
Répondre à ce message
Bonjour,
Comment saisir une liste :
a)
b)
c)...
plutôt qu’une liste :
1)
2)
3)...
Merci d’avance,
Cordialement,
Hervé
Répondre à ce message
ALIGNER LE PARAGRAPHE A DROITE
[/votre texte/]
Répondre à ce message
Bonjour,
Est-ce qu’il est possible d’aligner du texte à droite avec spip ?
J’ai tenté cette balise trouvée sur les forums, mais elle apparaît sur le site après publication de l’article : [/texte/]
Merci !
bonjour,
a priori il n’y a aucune raison d’aligner le texte à droite dans un cas spécifique. Le mieux serait de modifier les styles du site. Quelle est la signification de l’alignement à droite ?
Désolé, mais c’est vraiment le type de réponse idiote que l’on trouve quelques fois sur Spip (et sur d’autres forums aussi) provenant de personnes, qui fortes de tous leurs savoirs et d’autres prérogatives qui m’échappent, se sentent autorisées à prodiguer des conseils de bonnes pratiques à des ignorants qui n’en demandent pas tant.
Bien sûr qu’on peut changer l’alignement. Il existe sûrement de bonnes raisons de le faire. Ne serait-ce que pour emmerder les bien-pensants. Et si les standards qui règlent les CSS l’on prévu, c’est qu’il doit bien y avoir des raisons de le faire.
Donc, il faut mettre les mains dans les CSS, bien cibler les textes que l’on veut traiter et leur appliquer un
{text-align: right;}
. Ceci est valable pour des blocs de texte qui peuvent être déterminés à l’avance par le webdesigner. Si c’est pour le faire à la volée par un rédacteur cela me parait plus compliqué, car ce code CSS s’applique à un bloc de texte en entier et pas à une partie seulement. Mais, selon ce qu’on veut faire, il y a sûrement une méthode pour y arriver…Béat
graphiste et féru de typographie
@Béat : c’est bien, votre réponse rejoint exactement la mienne : cela doit se faire en css.
Et oui, il s’agit d’une affaire de bonne pratique, et oui je me sens autorisé à la donner parce qu’il s’agit effectivement d’une bonne pratique, qui veut que toute modification typographique locale est une signification sémantique, sauf exception (artistique ou autre). Et donc il est mieux de demander d’abord le pourquoi que de fournir une réponse qui peut aiguiller sur un mauvais emploi. C’est d’ailleurs tout l’objet du présent article. Libre à vous de ne pas l’approuver, mais si une personne pose une question sous cet article, qu’elle ne s’attende pas à avoir une réponse qui aille à contre-courant de l’article.
Donc @helene reprenons le point :
- s’agit-il d’un bloc spécifique à un article donné ? si oui quelle est la raison de traiter ce bloc autrement que le reste ?
- s’agit-il d’un alignement à droite sur l’ensemble du site (par exemple sur tout les textes) ? si oui il faudrait faire cela en css, mais pour cela nous aurions besoin de savoir un peu plus sur le squelettes utilisée (si je parle chinois, m’envoyer l’adresse du site).
Chère Helene,
en discutant avec une tierce personne, je me suis aperçu que ta question n’était peut être pas bien comprise par moi, d’où la présente « dispute » avec Béat,
Donc je reformule mes questions.
a) qu’entend tu par « aligner du texte à droite » : faire que le texte prenne toute la largeur de la colonne (justifié) ou bien qu’il soit aligné à droite mais pas à gauche.
b) veux tu que cela soit général pour l’ensemble du site ou pour un seul bloc d’un article spécifique ?
c) si c’est pour un seul bloc, peut préciser la raison d’un traitement différencié.
d) si c’est pour l’ensemble du site, il faudrait toucher aux css. D’où besoin de savoir quels squelettes tu utilise.
Ps : par ailleurs je t’invite à lire http://www.fabricecourt.com/formation/doit-on-justifier-un-texte-sur-le-web/ sur cette question. Libre à toi après de choisir de justifier ou pas ;-)
je vois un cas assez général qui relève du c) :
comment aligner une colonne d’un tableau spip - le plus souvent il s’agit de la dernière colonne à droite contenant des chiffres. Cependant on ne veut pas toucher au css pour ça car je ne sais pas à l’avance si j’en aurait besoin pour tous mes tableaux, ni comment isoler la dernière colonne etc.
ma solution pour l’instant est un peu lourdingue : j’aligne chaque cellule de la dernière colonne à droite.
pour cela j’utilise une div telle que, pour cadrer à droite le chiffre 850 € par ex. :
ou bien
on aimerait bien un raccourcis SPIP ad-hoc !
Répondre à ce message
Bonjour,
Comment varier la taille (le corps) des caractères ?
Cela donnerait un peu de relief aux textes.
Bien sûr les H1 etc. existent mais il semble que ces balises html seraient déconseillées… alors un plugin ?
hein ? varier la taille du texte au sein d’un même texte ?????
Je lis au début de cet article :
Tout est dit !
Donc, quel est votre besoin sémentique ?
A part l’intertitre et le gras, peu d’autres possibilités. Ah oui l’italique et le gras italique et les couleurs entre crochets.
Mais pas de sous-titre à l’intérieur d’un texte. On peut jouer avec quote pour mettre quelque chose en exergue mais c’est à peu près tout me semble-t-il à moins qu’avec couleurs_spip3 (en test) cela soit possible mais pour les Rédacteurs encore plus novice que moi…
Mais malgré cela Spip reste un excellent outil de publication ;)
mais je comprend pas ce que tu veux mettre en exergue ? un passage particulier de texte ? genre un encadré ? utilise alors Enluminures typographiques V3.
Spip est vraiment super et surtout les « Spipeurs » (c’est comme ça qu’on dit ?).
Je vais retirer couleurs_spip3 (qui est en test) et adopter Enluminures typographiques V3 qui me semble super et qui va être moins rébarbatif pour les Rédacteurs.
Merci Maïeul ;)
Enluminures typographiques V3 serait bien mais après essais il ne me semble pas complet…
En effet les Intertitres niveau deux et niveau trois, par exemple, ne répondent pas à l’appel. Un bug probablement car après enregistrement de l’article, ils paraissent bons mais après « Voir en ligne » il apparaissent comme du texte.
Tant pis, si je trouve pourquoi tant mieux sinon je continuerais ma quête… à la recherche d’un plugin typographique qui fonctionne.
Avec l’URL du site, ça serait plus facile de donner une piste de résolution.
En tout cas, le problème ne vient pas de ce plugin qui génère bien des H1, H2... mais de la CSS de ton site qui ne style pas les titres de manière distincte.
Hélas, je suis encore en local. J’attends que ce soit bien « bordé » avant de mettre en ligne.
Désolé d’avoir incriminé Enluminures typographiques V3. Je te crois sur parole.
J’ai désactivé mes plugins sauf sarkaspip_3x, z-core, zen-garden-2 (Arclite). J’ai aussi mis un tiret devant mon dossier -squelettes pour le désactiver.
Il me reste à vérifier si ce n’est pas l’un de ces trois : sarkaspip_3x, z-core, zen-garden-2 (Arclite). Si c’était le cas je ne pourrais utiliser ces balises H1, H2, etc.
Bon, là j’ai réinstallé (toujours en local) Spip 3.0.17 [21515] et seulement le plugin enluminures_typographiques_v3
C’est tout ! Puis j’ai créé un seul article :
et le résultat est en pièce jointe.
Ça ne me surprend pas : SPIP nativement ne gère pas tous ces niveaux de titres.
C’est donc le travail de la charte graphique du site de définir comment les afficher.
squelettes/perso.css est probablement ton amie.
Ah que c’est dur pour un débutant !
Mise en forme
Je crois qu’après « deux » il y a quelque chose qui cloche…
<code dir='
Il faudrait que je place
<h3 class="spip">
et</h3>
quelque part mais où ? j’ai essayé plusieurs formules sans résultat.Répondre à ce message
le CSS ne prévoit pas la justification à droite
comment l’obtenir quand le texte est vraiment très laid suite aux passages automatiques à la ligne ?
Répondre à ce message
Bonjour,
J’ai un p’tit soucis avec mes tableaux : ils ne s’affichent pas sur l’espace public !!
Pourtant j’ai fait tout comme il faut !
Je soupçonne que ce soit à cause de la version 3.0 que j’ai installé récemment (car ça marchait sur la version précédente !)
Si ce n’est pas cela, et si vous savez comment résoudre mon problème, je suis preneuse !
Merci d’avance,
Lena
Répondre à ce message
SPIP ne gère pas l’espace insécable à l’intérieur de l’incise constituée de tirets cadratins ?
elle est bien bonne celle là ! hahaha ! :)))
Peut être avec :
— ici l'incise —
Ou plus proprement en code spip, essayer :
--~ici l'incise~--
Oui on peut faire ça, mais ce n’est plus un automatisme. Va expliquer à un contributeur comment faire la tilde...
une pipeline pre_propre devrait faire l’affaire non ?
Il n’est pas possible d’automatiser cela, ces tirets pouvant être seul ou plus de deux. De plus, lorsqu’ils sont utilisés comme des parenthèses, le fermant et l’ouvrant ne sont pas distinguables. Il faut donc spécifier les espaces insécables voulus :
--~ici l'incise~--
. Ceci dit, ce n’est pas très gênant qu’ils n’y soient pas.Répondre à ce message
Je trouve que les termes « éléments dangereux » et « usage interdit » sont un peu forts. Personne ne risque rien à utiliser ces éléments, le site ne va pas planter, et aucune instance officielle ne va vous faire un procès ! Je ne sais pas qui peut se targuer d’établir une liste d’usages tolérés ou interdits des raccourcis typographiques ?
Le fait est que les retours à la ligne simples et les fausses listes à puce ne sont tantôt pas conformes à la typographie française, tantôt aux standards du Web, ou à l’usage sémantique de l’html pour baliser un texte.
Je suis par contre d’accord avec les remarques concernant l’usage de l’html, parce que les exemples donnés sont concrets.
Je pense que quelques liens vers des textes sur le Web sémantique, l’accessibilité du Web ou le respect des standards seraient plus efficaces pour sensibiliser que de laisser entendre qu’il y a un risque quelconque à utiliser tel raccourci.
Exemples de lectures intéressantes sur le site OpenWeb.eu.org :
- Respecter la sémantique XHTML
- Pourquoi les standards du W3C ?
- Pourquoi l’accessibilité numérique ?
Aurélie
D’ailleurs, pourquoi est-ce que ce retour à la ligne est « interdit » ?
Et comment fait-on alors pour revenir à la ligne ?
Je rappelle le préambule de cet article : ce qui compte, c’est la mise en sens.
Corollaire, c’est la mise en forme qui est, fort logiquement, interdite.
Donc, pousser le texte vers le bas ou vers la droite, c’est interdit.
Et le HTML, c’est dangereux. Je n’ai pas dit que c’était interdit. Mais jusqu’à présent, je n’ai pas encore vu qui que ce soit utiliser du HTML pour mettre du sens (langue, adresse, RDF...), mais uniquement de la présentation (font, center, target=_blank...).
Ce n’est pas le retour à la ligne qui est interdit, c’est plus d’un retour à la ligne consécutif.
Autrement dit, les retours à la ligne pour pousser le texte vers le bas.
Je suis d’accord sur le fond qui est d’ailleurs relevé dans l’aide en ligne Spip :
Le fait est qu’un paragraphe correspond à une unité de pensée, on en crée un nouveau pour montrer qu’on passe à l’idée suivante. Le retour à la ligne simple n’a pas de sens en français, sauf en poésie où il rythme le texte. Il n’est donc ni interdit, ni dangereux de l’utiliser, simplement son utilisation correspond dans la majorité des cas à l’envie de générer un effet visuel qui ne va rien ajouter au sens du texte.
Les développements actuels du langage html (xhtml) visent à séparer le contenu de la forme, désormais précisée dans les feuilles de styles. Les balises html devraient, pour suivre cette évolution, se limiter à donner des indications sur le sens du texte et non plus servir à « faire joli ».
Des balises comme le
<br />
qui indiquent un retour à la ligne apparaissent dans cette perspective plus comme une pollution qu’autre chose, puisque le retour à la ligne n’indique en fait rien du tout. De même que la « fausse » liste ne contenant qu’un seul item. Une liste est censée indiquer une énumération. Mettre une puce devant un élément unique ne sert qu’à faire joli et n’a aucun sens.Concernant l’utilisation de l’html, c’est un peu le même problème. La webmestre se casse le cul à faire un site conforme aux standards xhtml et les rédacteurs parsèment leurs textes de balises obsolètes comme
<font color="pink"></font>
...En bref, Spip prévoit assez de raccourcis pour mettre un texte en forme, qui respecte la charte graphique du site, la typographie et les standards du Web : pourquoi se casser la tête à « faire joli » quand ce qui compte avant tout, c’est que le texte soit accessible à tous.
Mais je persiste à dire que la forme « dangereux » et « interdit » n’est pas très pertinente, en particulier pour toutes les personnes qui ne sont pas encore sensibilisées aux enjeux du web sémantique ou de l’accessibilité.
Pourquoi faire peur plutôt que d’expliquer les tenants et aboutissants ? Si on comprend pourquoi ces usages ne sont pas recommandés, ou pas conformes, on reste libre de les utiliser ou pas. Qui peut énumérer les situations où un retour à la ligne aide le sens ou la lisibilité du texte ? À chacun de trancher. Après tout, si la balise existe et que quelqu’un en a même fait un raccourci Spip, c’est bien qu’il y a des usages possibles.
Je ne parviens pas à afficher mes sauts de ligne, pouvez vous m’aider ?
Bonjour,
Suite à votre intervention, savez vous justement comment il faut faire si on veut + qu’une retour à la ligne et que les retours par des br ne sont pas conseillés ?
A+Isa
Juste pour que la question ne soit plus posé...Par défaut spip utilise la balise P. En effet, lorsque un saut de ligne est appliqué dans un article, la balise p est automatiquement « calculée ». Il suffit donc de modifier les paramètres de p dans votre feuille de style. C’est tout. p est votre amie...
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |