AIDE : Mise en forme du texte

View in other lang ca - en - es - it

Information

General

General

activities
categories: site_info

article_type: collab

quality: medium

Licence

Licence

Sous-titres et sommaire {#sub-title}

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.
Des boutons permettent d'insérer facilement les balises des niveau 1 à 3 (boutons h2, h3, h4).
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.

## Niveau 1
### 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. Ce texte n'est pas repris dans le sommaire.
Il doit être séparé du sous-titre par des # :

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

donne ainsi :

Approche # 1200m, 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.

Par défaut, le sommaire est affiché à gauche, et le texte qui suit est placé en dessous.
Mais il est possible de placer le sommaire :

  • à droite du texte qui suit :
    [toc right] ou [toc 2 right]
  • à gauche du texte qui suit :
    [toc left] ou [toc 2 left]

Le sommaire placé à gauche du texte est utile s'il se trouve à gauche d'une photo ou d'un texte d'introduction. C'est déconseillé de le placer à gauche du corps de l'article, car la mise en page n'est pas agréable (une phrase peut commencer à droite du sommaire et finir en dessous).
Penser à ajouter un [p] après l'image ou l'introduction, afin que la suite du texte soit toujours placé en-dessous du sommaire.

Listes à puces et numérotées {#list}

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)
  • liste numérotée
  • c'est pratique
  • 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.

Description des longueurs et couennes

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

Images {#image}

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 (menu > Mon C2C > 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 2 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. Dans un document collaboratif, seules les images collaboratives sont proposées.
  • 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=[b]identifiant[/b] [b]position[/b] 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=[b]identifiant[/b] [b]position[/b] /] : la légende affiché est l'intitulé de l'image
  • [img=[b]identifiant[/b] [b]position[/b]][b]légende personnalisée[/b][/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 :

[[b]picto[/b] nom_du_picto /]
Voici la liste des pictos qui peuvent être affichés par la balise "picto" :

[col left 20]
[picto action_edit /] action_edit
[picto action_list /] action_list
[picto action_filter /] action_filter
[picto action_delete /] action_delete
[picto action_del_light /] action_del_light
[picto action_protect /] action_protect
[picto action_unprotect /] action_unprotect
[picto action_merge /] action_merge
[picto action_rss /] action_rss
[picto action_rss_new /] action_rss_new
[picto action_query /] action_query
[picto action_create /] action_create
[picto action_cancel /] action_cancel
[picto action_back /] action_back
[picto action_next /] action_next
[picto action_first /] action_first
[picto action_last /] action_last
[picto action_up /] action_up
[picto action_down /] action_down
[picto action_contact /] action_contact
[picto action_view /] action_view
[picto action_print /] action_print
[picto action_bookmark /] action_bookmark
[/col]

[col 20]
[picto action_tag /] action_tag
[picto action_report /] action_report
[picto action_rm /] action_rm
[picto action_help /] action_help
[picto action_informations /] action_informations
[picto action_description /] action_description
[picto action_comment /] action_comment
[picto action_gps /] action_gps
[picto action_on /] action_on
[picto action_off /] action_off
[picto action_cc /] action_cc
[picto action_json /] action_json
[picto action_kml /] action_kml
[picto action_people /] action_people
[picto picto_areas /] picto_areas
[picto picto_articles /] picto_articles
[picto picto_books /] picto_books
[picto picto_huts /] picto_huts
[picto picto_images /] picto_images
[picto picto_maps /] picto_maps
[picto picto_outings /] picto_outings
[picto picto_parkings /] picto_parkings
[picto picto_routes /] picto_routes
[/col]

[col 20]
[picto picto_sites /] picto_sites
[picto picto_summits /] picto_summits
[picto picto_users /] picto_users
[picto picto_documents /] picto_documents
[picto picto_products /] picto_products
[picto picto_portals /] picto_portals
[picto picto_xreports /] picto_xreports
[picto picto_rss /] picto_rss
[picto picto_list /] picto_list
[picto picto_forum /] picto_forum
[picto picto_forums /] picto_forums
[picto picto_info /] picto_info
[picto picto_tools /] picto_tools
[picto picto_add /] picto_add
[picto picto_rm /] picto_rm
[picto picto_open /] picto_open
[picto picto_open_light /] picto_open_light
[picto picto_close /] picto_close
[picto picto_close_light /] picto_close_light
[picto picto_weather /] picto_weather
[picto picto_snow /] picto_snow
[/col]

[col 20]
[picto activity_1 /] activity_1
[picto activity_1_light /] activity_1_light
[picto activity_2 /] activity_2
[picto activity_2_light /] activity_2_light
[picto activity_3 /] activity_3
[picto activity_3_light /] activity_3_light
[picto activity_4 /] activity_4
[picto activity_4_light /] activity_4_light
[picto activity_5 /] activity_5
[picto activity_5_light /] activity_5_light
[picto activity_6 /] activity_6
[picto activity_6_light /] activity_6_light
[picto activity_7 /] activity_7
[picto activity_7_light /] activity_7_light
[picto activity_8 /] activity_8
[picto activity_8_light /] activity_8_light
[/col]

[col right 20]
[picto picto_images_light /] picto_images_light
[picto pt_1 /] pt_1
[picto pt_2 /] pt_2
[picto pt_3 /] pt_3
[picto pt_4 /] pt_9
[picto pt_9 /] pt_3
[picto freq_2 /] freq_2
[picto freq_4 /] freq_4
[picto freq_6 /] freq_6
[picto freq_8 /] freq_8
[/col]
[p]

Vidéos {#video}

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" :

[[b]video[/b]]URL de la video[/[b]video[/b]]

Liens

Lien externe ou vers le forum

Utiliser le bouton : url
Texte du lien : Texte du lien
Par ailleurs, un lien nu est détecté et est automatiquement activé : http://www.camptocamp.org/forums/viewforum.php?id=24, 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]nom@serveur.pouet[/email] : [email]nom@serveur.pouet[/email]
Par ailleurs, une adresse email nue est détectée et est automatiquement activée : nom@serveur.pouet Dans les deux cas, l'adresse email est codée avec un antispam.

Mise en forme des caractères {#character}

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.
Attention : pour formater un sous-titre, n'utilisez pas les balises ci-dessous mais les balises de sous-titre

  • [[b]b[/b]] texte en gras [[b]/b[/b]] : texte en gras

  • [[b]i[/b]] texte en italique [[b]/i[/b]] : texte en italique

  • [[b]u[/b]] texte souligné [[b]/u[/b]] : texte souligné

  • [[b]s[/b]] texte barré [[b]/s[/b]] : texte barré

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

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

    texte cité

  • [[b]c[/b]] police à chasse fixe [[b]/c[/b]] : police à chasse fixe
  • texte [[b]sup[/b]] en exposant [[b]/sup[/b]] : texte en exposant
  • texte [[b]ind[/b]] en indice [[b]/ind[/b]] : texte [ind] en indice [/ind]

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

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

    Texte dans une boite de citation

  • 2 points[b].[/b][b].[/b]entre[b].[/b][b].[/b]les[b].[/b][b].[/b]mots : espace[b].[/b][b].[/b]insécable : 2..points..entre..les..mots : espace..insécable

Par ailleurs, un simple espace est automatiquement remplacé par un espace insécable dans les cas suivant (inutile donc d'utiliser l'astuce ci-dessus) :
- espace devant ? ou ! ou :
- espace séparant des chiffres
- espace séparant un chiffre et un mot
Dans ce dernier cas, si le mot est m, cm, dm, hm, km, mn, min, h, hr ou s, l'espace est supprimé (sauf dans certains cas, c'est buggué, pas grave).

  • [[b]/[/b]] texte en commentaire qui ne sera pas affiché,
    éventuellement
    sur plusieurs lignes [[b]
    /[/b]] :
    texte en commentaire
    éventuellement
    sur plusieurs lignes [*/]

Mise en forme des paragraphes {#paragraph}

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

texte en un ou plusieurs paragraphes
centré

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

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

Balise d'information importante

[[b]warning[/b]] Balise de warning [[b]/warning[/b]]

Balise de warning, le plus souvent temporaire

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

Colonage {#column}

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

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

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 :

[[b]col 25 left[/b]]
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.
[[b]/col[/b]]
[[b]col 52[/b]]
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.
[[b]/col[/b]]
[[b]col 25 right[/b]]
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.
[[b]/col[/b]]
[[b]p[/b]]

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 :

[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]

Associated waypoints

Associated routes

Associated articles

Associated books

Associated xreports

Associated outings

Comments

No thread yet?

Log in to post the first comment

  • eu
  • de