HELP : text formatting and layouting

frenchitaliangerman
english
spanishcatalanbasque

The text formatting and layouting possibilities become larger and larger.
This article describes all of them. Some are also described in other articles.

Summary

Characters formattingSummary

In all the guidebook documents and in the articles, the text can be formatted with the use of tags similar to the forum's BBcode tags.
Some buttons on top of text areas help to easily insert some tags around the selected text. The tags work on all multiline fields, even those that do not have such buttons.

[b] bold text [/b] => bold text

[i] italic text [/i] => italic text

[u] underlined text [/u] => underlined text

[s] strike-through text [/s] => strike-through text

[q] quoted text [/q] => quoted text

[c] monospace font [/c] => monospace font

superscript [sup] text [/sup] => superscript text

subscript [ind] text [/ind] => subscript text

[acronym=toootip]text with tooltip/acronym] => text with tooltip
The tooltip of an object is displayed when the mouse hovers the object for around 1s.

[color=#00AA33]colored text[/color] => colored text  (do not overuse)

[quote]Text within a quote box [/quote] =>

Text within a quote box

Paragraphs formattingSummary

[center]text centered in one or more
paragraphs[/center]

text centered in one or more
paragraphs


[right]text aligned on the right in one or more
paragraphs[/right]

text aligned on the right in one or more
paragraphs

PicturesSummary

It is possible to insert pictures, see e.g. articles/108356/fr or articles/107005/fr.
Only pictures associated to a document can be inserted into it. Moreover, only collaborative pictures can be inserted in collaborative documents (route, collaborative article...). The picture's type is not important for personal documents.

Thus, the picture must be present in the camptocamp.org album first.
To do this, a link named Add pictures is available at the bottom of the document's page. If the picture is already available in the album because associated to another document (summit, route, outing...), do not upload the picture again, but insteadassociate the existing picture to the document through the tool in the Associated documents section at the bottom of the picture page.

To insert new images to a new article, you thus need 3 steps:

  • create the document without pictures,
  • add pictures to the document,
  • modify the document to insert pictures in the text.

Once a picture is available in the album, copy the Code for inserting a picture in the guidebook available in the picture's page to insert it in the text of a document. A thumbnail of at most 250 pixels wide will be displayed, with a link to display the picture on a dark background with a 800 pixels width.

It is possible to specify the position of the picture in the text. The following patterns are valid:

[img]123123123_123123123.jpg[/img] => picture without legend, placed right by default.

[img=123123123_123123123.jpg]legend[/img] => picture with legend, placed right by default.

[img=123123123_123123123.jpg|position]legend[/img] => picture placed based on the attribute given after the pipe |:

  • right: picture right, text left
  • left: picture left, text right
  • center: picture centered, no wrapping text (neither left nor right)
  • inline: picture in-line


To display several centered pictures on the same line, use paragraph formatting:
[center]
[img=123123123_123123123.jpg|inline]Image 1[/img]
[img=123123123_456123654.jpg|inline]Image 2[/img]
[img=123123123_845135513.jpg|inline]Image 3[/img]
[/center]

As you can notice on this example, it's best to add a line after the image tag: the line return is removed at display and editing is more clear. If you still want a line return displayed, add a second line return or a space after the picture tag.

Beware, add a [p] at the end of the previous paragraph if you want to start a new paragraph below an image inserted with the right or left attribute.

Button : url
[url = web.address/with_or_without_http]Link text[/url] => Link text
Note that links are also automatically detected in the text (without tag) and activated: f24, romma.fr

Button : wl
A syntax similar to the mediwiki wikilinks (double bracket) allows to easily create internal links.
Unlike Wikipedia, you cannot create an article through a link placed in another page: you need to use the Articles > Add menu.

[ [ name of the document ] ] => creates a link to search the specified name. If only one result is found, a redirection to the document is made (e.g. [[Aiguille de Scolette]]). Avoid this, except if you want to give a list of documents, because unique documents are rare (giving a summit name, you will also find all outings).

[ [ document id | link title ] ]  => creates a link to a specific document using its id.

You can add some details, thus allowing a faster access:
[ [ summits/document id | link title ] ] => link to a summit
[ [ routes/document id | link title ] ] => link to a route
[ [ articles/document id | link title ] ] => link to an article
The rule is the same for the other document types.

You can add the language of the document:
[ [ articles/document id/en | link title ] ] => link to an english article
If the language is not specified, it is chosen automatically based on the available translations and the user preferences. This is the expected behaviour in most cases. Therefore, do not add the language in the link except for some specific cases.

Most of the time, you only need to copy part of the address of a document, using the rule "type/id".

Email address

[email][/email] :
Note that email addresses are automatically detected in the text (without tag) and displayed:
In both cases, an antispam function encodes the email address.

Unordered and ordered listsSummary

Unordered list

[ empty line before the first item, or begining of text ]
* an item starts with a star
- or a minus
+ or a plus
- followed by a space, then the text
A carriage return without an empty line creates a carriage return in the list item.
* item
 
* to insert a empty line between items, enter a line with at least 3 spaces
[ empty line after the last item, or end of text ]

Result:

  • an item starts with a star
  • or a minus
  • or a plus
  • followed by a space, then the text
    A carriage return without an empty line creates a carriage return in the list item.
  • item
     
  • to insert a empty line between items, enter a line with at least 3 spaces

Ordered list

[ empty line before the first item ]
1. first item
2. second
1. it's useless to use consistent numbering
[ empty line after the last item ]

Result:

  1. first item
  2. second
  3. it's useless to use consistent numbering

Sublist

You can build a hierarchy among lists:

[ empty list before the first item ]
* first level
* one space before the star: second level
 * 2 spaces: third level
 * more
* you can combine different list types
 1. ordered list
 2. it's esay
  1. ordered sublist
  1. subsublist
* item
 
* empty line within a sulist: insert a line with at least 2 + n spaces, with n equals to the number of the list (starting with 1)
* last item
[ empty line after the last item ]

Result:

  • first level
    • one space before the star: second level
      • 2 spaces: third level
      • more
    • you can combine different list types
      1. ordered list
      2. it's esay
        1. ordered sublist
          1. subsublist
    • item
       
    • empty line within a sulist: insert a line with at least 2 + n spaces, with n equals to the number of the list (starting with 1)
  • last item

Empty line before and after a list

To add an empty line before or after a list, use 2 empty lines in the edit form.

Subtitles and table of contentsSummary

Subtitles

It is possible to use up to 5 subtitle levels in the text fields of any document (article, route, outing, ...).
The style of each subtitle level is different. Moreover, the style of the articles differs from that of the other documents: the first level in a route corresopnds to level 3 in an article, level 2 to level 4 and so on. This is done to lighten the syntax used: big subtitles are not needed for guidebook documents.

Level 1 and 2 have 2 syntaxes:

Level 1
========

or

## Level 1

Level 2
--------

or

### Level 2

#### Level 3
##### Level 4
###### Level 5

You may add sharps after the subtitle, ther number is not important
### Level 3 ###

It is possible to add some text after the subtitle, displayed with an italic font. It must be separated from the subtitle by some sharps:

##### Approach # 1200m, 2 to 3h

produces:

Approach1200m, 2 to 3h


Each subtitle has an anchor, i.e. you can define an internal link pointing directly to the subtitle.
Bydefault, the anchor name is that of the subtitle.
It is possible to define the anchor name. Spaces and accents are not allowed.

### Subtitle {#name-of-the-anchor}
### Subtitle 2 ### {#name-of-the-anchor-2}

To produce a direct link to a subtitle, do it simple: just copy the link placed on the subtitle itself (right clic on the link and choose "copy link address").

Table of contents

It is possible to insert a table of content (summary) anywhere in the text with a single tag. You can specify the number of levels displayed.

[toc]
[toc 2] => display only the 2 first levels

When a table of content is inserted, a link "Summary" is displayed near each subtitle, that allows to easily reach the table of contents.

It is not mandatory to start the hierarchy at the first level. Thus you can choose the style of the first level.

You can place the table of contents on the right:
[toc right] or [toc 2 right]

Empty line before subtitles

The space between a subtitle and the text before is defined in the subtitle style and depend on its level.
It is sometimes needed to augment the vertical space by adding empty lines. To do this, enter 3 empty lines before the subtitle in the edit form in order to insert an additional empty line (and 4 lines to produce 2 empty lines, and so on).

  • Document type:
    article
  • Categories:
    help, website info
  • Article type:
    collaborative article

No Picture is linked to this document

The text in this page is available under a Creative Commons CC-by-sa license.
The images associated to this page are available under the license specified in the original document of each image.
Version #7, date 24 November 2009