Typographic bar

8/8/2019 Typographic bar

1/12

Typographic bar

Preview Mode

The "Preview" icon (the eye icon) of the typographical bar activates the preview mode.

A red box appears under the text in which the text written with its formatting is displayed.It allows seeing, while typing, the appearance of SPIP typographical shortcuts in the text.

The preview is updated on each action and during the typing.

Hyperlink

"Link" icon: select a part of the text you want to associate a link and then click the link.

First fill in the address field.

It is possible to put a full http address (including a link to external site). However, you can also use theshorthand notation of SPIP for an internal link. For example: 45 to make a link to the article 45, rub21to make a link to the line 21, etc.

Example:

To create a link to an article in the local site, put the article ID:


2/12

Trick: to link to a page on your site, you can click on this icon:

It will display the structure of your site. You only need to click on the section or the article on which youwant to link. The field will be filled in automatically.

To link to an external site, put the full address:

Here is how the link to http://www.lemonde.fr/ with the text HERE selected to be active will bedisplayed in the text. Click on [HERE->http://www.lemonde.fr/]

If necessary, you can enter a short text in the "Help Bubble ". A tooltip will be displayed on mouseover:

The option "Abbreviated language: " is not useful in this case.

After filling the fields, select the text to change into a link and click OK.

Here is how the link to http://www.lemonde.fr/ with the text HERE selected to be active and a tooltipwith the text HELLO will be displayed in the text of the public part.

Click HERE

Anchors

An anchor is a point in a page on which you want to point a link.Click on the icon with a red arrow pointing down to display the management area of the anchors.

To create an anchor, fill in the Name field anchor Anchor name:

Then select the word of your article on which you want to place the anchor (that will be pointed to bythe link). It will therefore be the target of the link:


3/12

Click on OK:

To make a link on this anchor placed in the article, fill in the field Anchor1

and if needed the field Helpbubble, select the text to change into a link:

Click on OK:

When you click on OK, it will display in the public part like this:

This will lead you on:

Search and Replace

Click on this icon to display the Search and Replace.

To search, fill in the field Search:

Option "Match case". To allow or not the character case in the search box, you can enable thisfunction:

Click the Search button to activate the search:

To replace a word or a group of words, fill in the fields Search and Replace.


4/12

Then click the button Replace to change the occurrences of the term searched by the replacementterm:

Some options will help you optimize the use of this tool.To change the case (uppercase or lowercase) of the search expression, use these buttons:

These two buttons allow you to switch the selection to uppercase or lowercase. They are available inthe Find / Replace and the Special Character areas.

To replace all or just the complete expressions:

Special Characters

Click on the icon Special Characters (keyboard icon) to display the special characters.

Quotation marks are inserted on both sides of the selected text.

The non-standard letters (upper case accented, and oe, ) are inserted where the cursor is.

Switch to uppercase or lowercase on the text selected.

These two buttons allow you to switch the selection to uppercase or lowercase. They are available inthe Find / Replace and the Special Character areas.

Note: lowercase accented ( etc.) are converted to uppercase accented ( etc.) and conversely.


5/12

Table

Put the cursor where you want to insert a table and then click on the icon of the table publisher.A pop-up box appears allowing you to enter information in your table.

In the fields Table title and Table summary (accessibility), you can put a title and a summary ofyour table (especially for accessibility tools).

You can add or delete rows or columns.

The red crosses allow you to delete rows or columns.

The following icons allow you to insert a row or column to a specific location

.

If you want to edit a table, you must select the entire code of your table in your article:

|{{Day}}|{{morning}}|{{afternoon}}|

|Monday|12|10||Tuesday|5|9||Wednesday|7|11||Thursday|4|13||Friday|15|8|

Then click on the icon of the table editor. The pop-up will appear with the table and its data:


6/12

Pay attention: you have to select the entire table; otherwise you may get an unexpected result.

Here are the Spip marks that will be visible in the text in the private part:

|{{Day}}|{{morning}}|{{afternoon}}||Monday|12|10||Tuesday|5|9||Wednesday|7|11||Thursday|4|13||Friday|15|8|

To create tables very simply, just make lines with "boxes" separated by the symbol "|" (pipe, a verticalline). The lines begin and end with vertical lines.

The symbol "|" is obtained on the PC Azerty keyboard via keystroke Alt Gr + 1-&:

This will be displayed in the public part like this:


7/12

Statistics

(Number of words, characters and signs)

Click on the symbol "Sum" to display the statistics on the text being written. The statistics are updatedduring the typing like in the preview mode. The statistics are calculated from raw text, after havingremoved all formatting information.

If you select some text, only the selection is taken into account for the statistics. Once the text isdeselected, the statistics will update throughout the text. When the text is deselected, the statistics areon the whole text.

ItalicsThis tool will put selected text in italics.

Select some text:

Then click on the italic icon:

Here are the Spip marks that will be visible in the text from thePrivate Area: {un super texte}Public Area: un super texte

Bold

This tool will put selected text in bold.

Select some text :

Then click on the bold icon:

Here are the Spip marks that will be visible in the text fromthe Private Area: {{un super texte}}the Public Area: un super texte


8/12

Accentuate

This tool will put selected text inbold and orange

Select some text :

IMAGE

Then click on the accentuate icon:

Here are the Spip marks that will be visible in the text fromthe Private Area: [*un super texte*]the Public Area: un super texte

Superscript

This tool will put selected text inexponent

Select some text :

Then click on the exponent icon:

Here are the Spip marks that will be visible in the text fromthe Private Area: un super textethe Public Area Public : texte normal

UN SUPER TEXTE

Indice

This tool will put selected text ininferior

Select some text :

Then click on the inferior icon:Here are the Spip marks that will be visible in the text fromthe Private Area: un super texte

the Public Area: texte normalun super texte


9/12

Small caps

This tool will put selected text in small caps.

Subheading

This tool will put selected text in:

Font-family: GeorgiaFont-size: 16pxFont-color: blue

Select some text :

Then click on the subheading icon

Here are the Spip marks that will be visible in the text fromthe Private Area: {{{un super texte}}}

the Public Area:

Footnote

This tool allows a footnote on page with a bidirectional link between the note and the word annotated.

In the following example the word to annotate is "gramines" and the footnote: "Famille des plantesmonocotyldones qui comprend notamment les crales."

Private Area: allergie aux gramines [[Famille des plantes monocotyldones qui comprend notammentles crales.]] de pollens

And how the footnote will display in the Public Area:

To see the footnote, click on the [1] in the text.To return in the text from de footnote, click on the number (in this case [1]).


10/12

Special formatting

This function has a submenu:

This option allows you to put some code on a page without being interpreted by thebrowser:

Here are the Spip marks that will be visible in the Private Area text:ce qui donne:

This option allows you to create an insert in the text:

Here are the Spip marks that will be visible in the text from the Private Area:test test test test test test test test test test test test test test test test

ce qui donne

This option allows you to highlight some text:

Here are the Spip marks that will be visible in the text from the private part:test test test test test test test test test test test test testtest test test

in the Public Area:

Extra & Justification

This function has a submenu:


11/12

To insert a level 1 subheading:

Here are the Spip marks that will be visible in the text fromthe Private Area: {{{Intertitre niveau 1}}}the Public Area:


Here are the Spip marks that will be visible in the text fromthe Private Area: {2{Intertitre niveau 2}2}the Public Area:


Here are the Spip marks that will be visible in the text fromthe Private Area : {3{Intertitre niveau 3}3}the Public Area:

This icon allows you to centre the text:

Here are the Spip marks that will be visible in the text fromthe Private Area: [|Texte centr|]the Public Area :

Texte centr

Texte centr

This icon allows you to align text to right:

Here are the Spip marks that will be visible in the text fromthe Private Area: [/Texte align droite/]the Public Area:

Texte align droite

This icon allows you to frame the text:

Here are the Spip marks that will be visible in the text fromthe Private Area: [(Texte encadr)]the Public Area:


12/12

This icon allows you to cross the text:

Here are the Spip marks that will be visible in the text fromthe Private Area: Texte barrthe Public Area :

Texte barr

Wikipedia Reference

This tool creates a link to the page of the selected word.

Here are the Spip marks that will be visible in the text from

the Private Area: [?maison]the Public Area: maison ( "maison" is clickable and refers to the Wikipedia page "maison")

Documents

Typographic bar