AIDE : Mise en forme du texte

Les possibilités de mise en forme du texte dans les documents s'étoffent petit à petit.
Cet article les décrit toutes. Certaines parties sont aussi décrites dans d'autres articles.

Mise en forme des caractèresSummary

Dans tous les documents du topoguide et les articles, le texte peut être mis en forme grâce à des balises similaires au balises BBcode du forum.
Des boutons permettent d'insérer facilement certaines balises autour du texte sélectionné. Les balises fonctionnent sur tous les champs multilignes, même ceux sans bouton.

[b] texte en gras [/b]  : texte en gras
[i] texte en italique [/i]  : texte en italique
[u] texte souligné [/u]  : texte souligné
[s] texte barré [/s]  : texte barré

[color=#00AA33]texte en couleur[/color] : texte en couleur (ne pas en abuser)
Le code couleur est le HTML.

[q] texte cité [/q] : texte cité

[c] police à chasse fixe [/c] :  police à chasse fixe

texte [sup] en exposant [/sup] : texte ^{en exposant}
texte [ind] en indice [/ind] : texte _{en indice}

[acronym=info-bulle]texte avec info-bulle[/acronym] : texte avec info-bulle
L'info-bulle d'un objet s'affiche lorsqu'on place la souris sur l'objet sans la bouger durant 1s environ.

[quote] Texte dans une boite de citation [/quote]

Texte dans une boite de citation

[important] Balise d'information importante [/important]

Balise d'information importante

[warning] Balise de warning [/warning]

Balise de warning

Merci d'utiliser ces deux dernières balises avec clairvoyance pour souligner des informations importantes voire capitales.

Mise en forme des paragraphesSummary

[center]texte en un ou plusieurs paragraphes
centré[/center]

[right]texte en un ou plusieurs paragraphes
aligné à droite[/right]

ColonageSummary

Il est possible de mettre en forme un texte en colonnes. Ce n'est pas du vrai colonage dynamique, le texte de chaque colonne est fixe, il ne "coule" pas d'une colonne à l'autre selon la place disponible.

Syntaxe

[col taille position]
texte de la colonne
[/col]

Taille

Valeur proche du rapport de la largeur de la colonne sur la largeur de la fenêtre (en %).
Valeurs possibles :

• 20 : colonne de largeur 1/5 de la fenêtre, pour la diviser en 5 colonnes
• 25 : colonne de largeur 1/4 de la fenêtre, pour la diviser en 4 colonnes
• 26 : colonne de largeur 1/4 de la fenêtre, avec un inter-colonne plus grand
• 33 : colonne de largeur 1/3 de la fenêtre, pour la diviser en 3 colonnes
• 66 : colonne de largeur 2/3 de la fenêtre, pour la diviser en 2 colonnes 2/3 + 1/3
• 50 : colonne de largeur 1/2 de la fenêtre, pour la diviser en 2 colonnes
• 51 : colonne de largeur 1/2 de la fenêtre, avec un inter-colonne compatible avec 2 colonnes 1/4 (26)
• 52 : colonne de largeur 1/2 de la fenêtre, avec un inter-colonne compatible avec 2 colonnes 1/4 (25)

Position

• left : colonne de gauche
• rien : colonnes du milieu
• right : colonne de droite

Exemple

Pour 3 colonnes 1/4 + 1/2 + 1/4 :

[col 25 left]
Lorem ipsum dolor sit amet, in vis facer integre, ut sed nihil omnes. Est quem quodsi detraxit cu. Consul eripuit intellegat ut pro, ubique ceteros ad pro. Est nihil labore blandit cu, homero impetus definitiones duo ex, eam id partem praesent.
[/col]
[col 52]
Amet consul usu te, dico mazim ei cum. Et dicit tempor vix, no saepe mnesarchum dissentias vis. In zril hendrerit referrentur cum. Ex mei blandit erroribus concludaturque, vis an veri graece. Eam quis indoctum ei. Eam vidit cotidieque te.
[/col]
[col 25 right]
Eos no unum laoreet patrioque, vix eu quas accusata. Luptatum platonem et nam, et eam eius velit doming, nullam oporteat et vim. Dico iisque prompta ei quo, mei nulla viris tation an. Cu duis appetere democritum his. Ne mea recusabo salutatus.
[/col]
[p]

Pour éviter des surprises avec le texte qui suit les colonnes, il est recommandé d'ajouter une balise de remise à niveau : [p].

Ce qui donne :

Description des longueursSummary

Pour décrire les longueurs d'une grande voie, d'une cascade de glace, ou les voies d'un site de couenne ou de bloc, il est pratique d'utiliser la balise L#.
Cette balise permet entre autre :

• La numérotation automatique des longueurs.
• La mise en forme de tableau, pour aligner les infos (cotations, longueurs en mètre, nb de points, commentaires, ...).

Voir la description complète de la balise L#.

ImagesSummary

Insertion d'une image dans le texte

Il est possible d'insérer une image dans le texte. Exemple : articles/108356 ou articles/107005.

L'image doit respecter les conditions suivantes :

• L'image doit avoir été préalablement associée au document.
• Dans un document collaboratif, l'image doit être aussi collaborative. Pour modifier le type de l'image, éditez-la (bouton Modifier dans la colonne de gauche) ou utilisez l'outil de gestion des images personnelles (Barre orange des menus > Contributeurs > Gestion des images personnelles).
• Dans un document personnel, le type de l'image n'a pas d'importance.

Il faut donc tout d'abord que l'image soit insérée dans l'album de Camptocamp.org. Pour ce faire, un lien Ajouter des images est disponible au bas de la page de chaque document.
Si la photo existe déjà, il ne faut pas la charger une 2ème fois dans l'album, mais l'associer au document désiré. Pour cela, se rendre sur la page de l'image et utiliser l'outil d'association dans la section "Documents associés" qui se trouve tout en bas de page.

Ainsi, pour insérer de nouvelles images dans le texte d'un nouveau document, il faut procéder en 3 étapes :

• créer le document sans les images,
• enregistrer les images sur le document,
• modifier le document pour insérer les images dans le texte.

Une fois l'image disponible dans l'album, et associée au document, il existe deux possibilités pour l'insérer dans le texte :

• La plus simple est d'utiliser le bouton [ img ] disponible dans la barre d'édition des champs, qui fera apparaître une boîte de dialogue permettant de sélectionner l'image, son positionnement et sa légende.
• Il est également possible de recopier (et éventuellement modifier à ses besoins) le Code d'insertion de l'image disponible dans la page d'information de cette image.

Dans les deux cas, il sera affiché une vignette de 250 pixels max de côté, comportant un lien permettant d'afficher l'image en 800 pixels max de côté sur fond noir.
Il est également possible d'afficher l'image en taille réelle grâce au mot-clé "big" : [img=identifiant position big /]

Les possibilités de positionnement sont les suivantes :

• droite (right) : image positionnée à droite
• gauche (left) : image positionnée à gauche
• centré (center) : image centrée, sans texte ni à gauche, ni à droite
• au fil du texte (inline) : image dans le fil du texte

Attention, avec une image collée à gauche ou à droite, pour commencer un nouveau paragraphe sous l'image, ajoutez la balise [p] à la fin du paragraphe précédent.

Les syntaxes correspondantes sont les suivantes :

• [img=identifiant position /] : la légende affiché est l'intitulé de l'image
• [img=identifiant position]légende personnalisée[/img]

Modification d'une image

Comme tous les documents du topoguide, il est possible de modifier une image de l'album :

• intitulé
• auteur
• date et heure de prise de vue (pour une photo)
• activités, catégories
• description texte
• image elle-même

Ainsi, une photo comportant des tracés de voies peut être mise à jour en modifiant la page de l'image pour enregistrer une nouvelle version de la photo. Tous les documents associés sont conservés, et les vignettes insérées dans les descriptions de documents sont mises à jour. Dans un document, si le code d'insertion de l'image ne comporte pas de légende personnalisée, la légende est aussi mise à jour en fonction de l'intitulé. C'est donc très pratique pour les photos collaboratives utilisées dans plusieurs documents.

Insertion d'un pictogramme C2C

Il peut être utile d'insérer un pictogramme C2C (par exemple pour la documentation d'aide). Pour ce faire, il existe une balise "picto" dédiée :

[picto nom_du_picto /]

VidéosSummary

Dans les documents personnels (sorties et articles personnels), il est possible d'insérer une vidéo hébergée sur un site tiers tel que YouTube, Vimeo, Dailymotion, etc. Il suffit d'encadrer l'URL de la page de la vidéo entre des balises "video" :

[video]URL de la video[/video]

LiensSummary

Lien externe ou vers le forum

Utiliser le bouton : url
[url = adresse.web/avec_ou_sans_http]Texte du lien[/url] : Texte du lien
Par ailleurs, un lien nu est détecté et est automatiquement activé : f24, http://www.romma.fr

Lien interne au topoguide et aux articles

Utiliser le bouton : wl
Une syntaxe similaire aux wikiliens de médiawiki (doubles crochets) permet de créer facilement des liens internes. Mais contrairement à Wikipédia, on ne peut pas créer un article en créant un lien dans une page : il faut utiliser le menu Articles > Ajouter.

[ [ type du document/numéro de document | titre du lien ] ]  : crée un lien vers un document précis en précisant son numéro. Le numéro document est visible dans la barre d'url.

[ [ summits/numéro de document | titre du lien ] ]  : lien vers un sommet
[ [ routes/numéro de document | titre du lien ] ]  : lien vers un itinéraire
[ [ articles/numéro de document | titre du lien ] ]  : lien vers un article
De même pour les autres types de document : parkings, huts, outings, etc.

Exemple : [ [summits/37355|Mont-Blanc] ] donne Mont-Blanc

Attention : Il ne faut pas mettre d'espace entre les crochets de [ [, ] ] et part et d'autre du slash / et de la barre |.
Il est possible d'omettre le type du document, mais l'accès est plus rapide lorsqu'il est présent.

Le plus souvent, il suffit donc de recopier une partie de l'adresse d'un document, selon le modèle "type/numéro".

Adresse email

[email][/email] :
Par ailleurs, une adresse email nue est détectée et est automatiquement activée : Dans les deux cas, l'adresse email est codée avec un antispam.

Listes à puces et numérotéesSummary

Liste à puces

Dans une liste à puces, chaque ligne commence par un point noir.

[ ligne vide avant le premier item, ou début du texte ]
* un item commence par une étoile
- ou un moins
+ ou un plus
- suivi d'un espace, puis du texte
Le retour à la ligne sans saut de ligne donne un retour à la ligne dans l'item.
* item
 
* pour insérer un saut de ligne entre les items, il faut insérer une ligne comportant au moins 3 espaces
[ ligne vide après le dernier item, ou fin du texte ]

Le résultat est :

• un item commence par une étoile
• ou un moins
• ou un plus
• suivi d'un espace, puis du texte
  Le retour à la ligne sans saut de ligne donne un retour à la ligne dans l'item.
• item
   
• pour insérer un saut de ligne entre les items, il faut insérer une ligne comportant au moins 3 espaces

Liste numérotée

[ ligne vide avant le premier item ]
1. premier item
2. deuxième
1. inutile de numéroter correctement
[ ligne vide après le dernier item ]

Le résultat est :

1. premier item
2. deuxième
3. inutile de numéroter correctement

Listes et sous-listes

Une liste peut aussi être hiérarchisée en plusieurs niveaux.

[ ligne vide avant le premier item ]
* premier niveau
* 1 espace avant l'étoile : 2ème niveau
 * 2 espaces avant l'étoile : 3ème niveau
 * encore deux espaces
* on peut combiner les types de liste (liste à puces et liste numérotée)
 1. liste numérotée
 2. c'est pratique
  1. sous liste numérotée
  1. sous sous liste
* item
 
* saut de ligne dans une sous liste : insérer une ligne comportant au moins 2 + n espaces, avec n = numéro du niveau de la liste (en partant de 1)
* dernier item
[ ligne vide après le dernier item ]

ce qui donne :

• premier niveau
  
  • 1 espace avant l'étoile : 2ème niveau
    
    • 2 espaces : 3ème niveau
    • encore 2 espaces
  • on peut combiner les types de liste (liste à puces et liste numérotée)
    
    1. liste numérotée
    2. c'est pratique
       
       1. sous liste numérotée
          
          1. sous sous liste
  • item
     
  • saut de ligne dans une sous liste : insérer une ligne comportant au moins 2 + n espaces, avec n = numéro du niveau de la liste (en partant de 1)
• dernier item

Saut de ligne avant et après une liste

Pour ajouter un saut de ligne avant ou après une liste à l'affichage, il faut sauter 2 lignes à l'édition.

Sous-titres et sommaireSummary

Sous-titres

Il est possible d'utiliser 5 niveaux de sous-titre dans les champs textuels des documents de n'importe quel type (article, itinéraire, sortie, ...), le style de chaque niveau de sous-titre différant.
A noter que le style des sous-titres dans les articles est différent de celui dans tous les autres types de document. Ainsi, le niveau 1 dans un itinéraire correspond au niveau 3 dans un article, le niveau 2 au niveau 4, etc. Ceci afin d'alléger la syntaxe, les gros sous-titres étant inutiles dans les documents autres que les articles.

Les niveaux 1 et 2 ont 2 syntaxes :

## Niveau 1

ou

Niveau 1
========

### Niveau 2

ou

Niveau 2
--------

#### Niveau 3
##### Niveau 4
###### Niveau 5

Il existe une mise en forme aux couleurs C2C :
##c Niveau 1
Ce qui donne une sérigraphie orange (cf. les sous-titres de cet article).
Il est préférable de réserver les sous-titres en couleur aux articles d'aide et aux articles de l'association camptocamp.

Si on le souhaite, on peut ajouter des # après le sous-titre. Leur nombre n'est pas important.
### Niveau 3 ###

Il est possible d'ajouter du texte après le sous titre, affiché en italique. Il doit être séparé du sous-titre par des # :

##### Approche # 1200m, 2 à 3h

donne ainsi :

Approche1200m, 2 à 3h

Saut de ligne avant les sous-titres

L'espace entre un sous-titre et le texte qui précède est défini dans le style du sous-titre, et dépend de son niveau.
Toutefois, il peut être parfois utile d'augmenter l'espace, en ajoutant des sauts de lignes. Pour ajouter un saut de ligne à l'affichage, il faut ajouter 3 lignes vides avant le sous-titre à l'édition (et 4 sauts pour 2 sauts à l'affichage, etc).

Lien vers les sous-titres

Chaque sous-titre possède une "ancre", c'est à dire que l'on peut définir un lien interne pointant directement vers le sous-titre.
Par défaut, le nom de cette ancre est issu du nom du sous-titre. Il est toutefois possible de définir le nom de l'ancre, les espaces et caractères accentués n'étant pas acceptés.

### Sous-titre {#nom-de-l-ancre}
### Sous-titre 2 ### {#nom-de-l-ancre-2}

Pour obtenir le lien direct vers un sous-titre, il est inutile de construire l'url à la main : il suffit de copier le lien situé sur le sous-titre (clic droit sur le sous-titre, puis "copier l'adresse du lien").

Sommaire

Il est possible d'insérer un sommaire grâce à une balise, n'importe où dans le texte. On peut définir le nombre de niveaux à afficher.

[toc] affiche tous les niveaux par défaut
[toc 1] n'affiche que le premier niveau tandis que [toc 2] affiche les 2 premiers niveaux, et ainsi de suite.

Lorsqu'un sommaire est inséré, à côté des sous-titres de plus bas niveau est affiché un lien "Sommaire" permettant de revenir facilement au sommaire.

Il n'est pas nécessaire de commencer la hiérarchie des sous-titres au 1er niveau. Ainsi, on peut choisir le style du premier niveau.

Il est possible de placer le sommaire à droite :
[toc right] ou [toc 2 right]