The Pliant .page format

The Pliant .page format is an alternative to native HTML.
The Pliant HTTP server will translate on the fly any .page file to HTML, so the client browser will not see any difference.
On the server side, there are several advantages using .page format instead of HTML:

.page format enables you to write dynamic pages without adding poor extensions with completely different syntax and rules.
styles binding is performed on server side using the powerfull Pliant language overdefinition capabilities, so you get all the power of CSS without requiring any such feature on the client side.

A document written in Pliant .page format, is saved with ".page" extention, and actually is a Pliant program.
The style/default.style module which is defaultly binded to any .page file provides a basic set of instructions to display text, images, hyperlink, etc, so with .page format you will use instructions instead of HTML tags.
Several attributes, such as 'bold' need the area it applies on to be specifyed. In HTML this is performed using an start tag and a stop tag. In Pliant, it's done using indentation, so keep in mind that when writing .page files, indentation is not only for nice looking but also has meaning for Pliant dynamic compiler.

On this page you will have every .page format instruction described with examples.

Basic Instructionstext eol html link note image listing highlight
Structural Instructionstitle chapter header para list table
Attributesbold italic small big center fixed color
Dynamic Instructionsdynamic input button
Shortcuts[text] ;

The 'text' instruction is to display text.

syntax:

text string

Where 'string' is a character string you want to be displayed as normal text.

Sample code:

source: result:

text "hello world " text "on the same line [lf]" text "on the next line"
------> hello world on the same line
on the next line

Beware that Pliant uses a non standard encoding for special character in strings

The 'eol' instruction inserts a line feed.

Syntax:

eol

So, it's equivalent to:

text "[lf]"

Sample code:

source: result:

text "my first line" eol text "my second line"
------> my first line
my second line

alternatives that will give the same result:

text "my first line" text "[lf]" text "my second line"

text "my first line[lf]" text "my second line"

text "my first line[lf]my second line"

The 'html' instruction, can display pure html code in your page. It can be useful when HTML code is needed where Pliant .page format isn't shaped for.

Syntax:

html 'string

Where 'string' is raw HTML code

Sample code:

source: result:

html "<hr>"
------>

beware that Pliant uses a non standard encoding for special character in strings

The 'link' instruction makes hyperlinks between pages or programs.

Syntax:

link label target [section section] [options options]

Where 'label' is the hyperlink label.
Where 'target' is the link destination.
Where 'section' specify the section requested in the target page ('#' section in the URL).
Where 'options' specifies some options to be passed to the target page ('?' section in the URL).

Sample code: 1:

source: result:

link "Pliant home page" "http://pliant.cx/"
------> Pliant home page

Various sections within a page are defined using 'section' instruction.

Syntax:

section name

Where 'name' is a string.

Sample code 2:

source: result:

section "mysection" text "bla bla bla[lf]" text "more bla bla bla[lf]" link "jump to beginning of my section" "" section "mysection"
------> bla bla bla
more bla bla bla
jump to beginning of my section

The 'note' instruction is set to make a note in your document, you just have to indent the note content under the instruction.
On the client side it will appear like an hypertext, and your note will be displayed on a new page

Syntax:

note label instructions

Where 'label' is the note label
And 'instructions' is the content of your note.

Sample code:

source: result:

text "more " note "explanations" title "My sample note" text "As you can see the note is displayed on a new " text "page, but you included it in your main document" text " about notes."
------> more explanations about notes.

The 'image' instruction inserts image in your page.
If 'image' has a single parameter, it's a true image pasted in the page, but if it has two or more parameters, it's a graphical hyperlink, just like 'link' introduced a text hyperlink.

Syntax:

image url [target] [section section] [options options]

Where 'url' is the image access path.
Where 'target' and the following parameters have exactly the same meaning as with 'link' instruction.
Please also notice that the image will be inserted in the middle of the text. It means that if you want the image to be displayed alone on a line, you have to insert a '[lf]' character at the end of the text before the image (or an 'eol' instruction), and another at the beginning of the text after the image.

Sample code:

source: result:

text "A passive image:[lf]" image "/pliant/welcome/image/pliant.jpeg" eol text "An active image (in other words, an hyperlink):[lf]" image "/pliant/welcome/image/pliant.jpeg" "http://pliant.cx/" # FIXME
------> A passive image:

An active image (in other words, an hyperlink):

The 'listing' instruction displays pure ASCII code in your page.

Syntax:

listing bloc

Where 'bloc' is the ASCII text.
Please notice that the Syntax is not completely free: all the listing content must be indented from the 'listing' instruction, but with any number, and maybe not always the same number of spaces on each line.

Sample code:

source: result:

listing what ever you want with free indentation and on several lines
------>
what ever you want with free indentation and on several lines

The 'highlight' instruction is a very useful instruction which highlights any character string, to ask for reader's attention.

Syntax:

highlight string

Where string is the text you want to highlight.

Sample code:

source: result:

highlight "look at this"
------> look at this

The 'title' instruction has the same function than <title> HTML tag, but more than giving a title to the page, it also display page's title in a preformatted style .

Syntax:

title string

Where string is your page title.

Sample code:

source: result:

title "My page"
------> My page

The instruction 'chapter' is a big heading, in a preformatted style.

Syntax:

chapter string

Where 'string' is your chapter name.

Sample code:

source: result:

chapter "chapter XVI"
------>

The `header` instruction is also a heading, if you indent an other 'header' instruction in it, you would have an other kind of heading, more soft with little size fonts.

Syntax:

header string content

Where 'string' is your header name.
If 'content' is indented an contains some 'header' instructions, these will be considered introducing subparts rather then next parts.

Sample code:

source: result:

header "first" text "first text" header "one" header "two" text "second text"
------>

first text

second text

The 'para' instruction creates paragraphs.

Syntax:

para instructions

where 'instructions' defines the content of the paragraph paragraph.

Sample code:

source: result:

para text "once upon a time, bla bla bla" eol text "more bla bla bla." para text "and they lived happy and , bal bla bla" eol text "even more bla bla bla."
------>
once upon a time, bla bla bla
more bla bla bla.

and they lived happy and , bal bla bla
even more bla bla bla.

The 'list' instruction makes a list of item.
Please remind that you must indent each item of the list and introduce it with 'item' instruction.

Syntax:

list item instructions item instructions

Where 'instructions' defines the content of each item of your list.

Sample code:

source: result:

list item text "banana" item text "apple" eol text "and lemon" item text "orange"
------>
banana

apple
and lemon

orange

If you indent a new list in a list, you would have different kind.

Sample code:

source: result:

list item text "fruits" list item text "banana" item text "apple"
------>
fruits
banana

apple

HTML makes intensive usage of tables with no border, as they are a very efficient way to define the page layout. If you are not awarded of tables as a powerfull page layout mechanism, please refer to some HTML documentation.

To make a table with Pliant .page format, you must declare the number of columns so that when introducing a new cell, the system knows if they it has to be displayed on the same row or on the next one.
Inside the table you have to indent each cell and introduce it with 'cell' instruction.

Syntax:

table columns columns [border size] cell [color lsh l s h] [color rgb r g b] instructions cell [color lsh l s h] [color rgb r g b] instructions

If omited, the border size will be one.
See 'color' instruction for details about the color option in cells.

Sample code:

source: result:

table columns 3 cell text"cell one" cell text "cell two" cell text "cell three" cell text"cell four" cell text "cell five" cell text "cell six"
------>

cell one cell two cell three

cell four cell five cell six

These instructions change any element's style, you just have to indent any instruction in it.

The 'bold' instruction displays text in bold.

Syntax :

bold instructions

Sample code:

source: result:

bold text "Displayed in bold" eol text "also bold" text " no more bold"
------> Displayed in bold
also bold no more bold

The 'italic' instruction displays text in italic.

Syntax :

italic instructions

Sample code:

source: result:

italic text "Displayed in italic"
------> Displayed in italic

The 'small' instruction decreases the font size.

Syntax :

small instructions

Sample code:

source: result:

small text "small font"
------> small font

The 'big' instruction increases the font size.

Syntax :

big instructions

Sample code:

source: result:

big text "big font"
------> big font

The 'center' instruction aligns any element in the page or table center.

Syntax :

center instructions

Sample code;

source: result:

center text "The Pliant .page format is " eol text "an alternative to native HTML."
------> The Pliant .page format is
an alternative to native HTML.

The 'fixed' instruction displays text in fixed font.

Syntax :

fixed instructions

Sample code:

source: result:

fixed text "This font is fixed"
------> This font is fixed

There are two ways to code colors with Pliant .page format: lsh encoding and rgb encoding.
lsh stands for light saturation and hue. Please notice that Pliant lsh encoding does not conform strictly to the CIE lsh encoding. In particular, with Pliant lsh encoding 'light' value meaning has no effect when saturation=100.

Syntax :

color lsh light saturation hue instructions

Where 'light' and 'saturation' are two floating point numbers ranging from 0 to 100 (they are percentages).
And 'hue' is a floating point number ranging from 0 to 360 (it is a number of degrees).

The following tables should help you understand the meaning of 'light' 'saturation' and 'hue':

saturation = 0
so hue does not matter

light 0 25 50 75 100

result black dark grey grey light grey white

light = 50 , hue = 0

saturation 0 10 50 100

result grey redish grey dull red pure red

saturation = 100
so light does not matter

hue 0 60 120 180 240 300 360

result red yellow green cyan blue magenta red

light = 50

hue / saturation 10 50 100

0 red red red

30 orange orange orange

60 yellow yellow yellow

120 green green green

180 cyan cyan cyan

240 blue blue blue

300 magenta magenta magenta

hue = 0

light / saturation 10 50 100

0 sample sample sample

25 sample sample sample

50 sample sample sample

75 sample sample sample

100 sample sample sample

Alternative syntax :

color rgb red green blue instructions

'red' 'green' and 'blue' are three integers ranging from 0 to 255.
This syntax will be more familiar to programmers, but it's not very logical, so the light saturation hue one is recommended.

Sample code:

source: result:

font color (color hsl 60 100 50) text "yellow text."
------> yellow text.

Sample code 2:

source: result:

font color (color rgb 255 255 0) text "yellow text."
------> yellow text.

Sample code 3:

source: result:

table columns 1 cell color (color hsl 120 33 0) font color (color hsl 120 100 0) text "green text, in a dark green cell."
------>

green text, in a dark green cell.

Just include the 'dynamic' instruction in your page, to describe your page as a dynamic one.
If you forget it, and you page does not contain any input field and any button, then the HTTP server is allowed to cache the translated to HTML page.

Syntax:

dynamic

The 'input' instruction creates a text area , which can be filled on the client side.

Syntax:

input label variable

Where 'label' is a character string you want to be displayed as normal text in front of the input field.

Sample code:

source: result:

var Str name input "your name: " name
------> your name:

The 'button' instruction is used to create dynamism in your web site, clicking on the button in the client browser will ask the server to execute any pliant code indented under it, and display the result on the client browser.

Syntax:

button label instructions

Where 'label' is the button name.

Sample code:

source: result:

var Int i := 3 var Int j := 5 input "Type a number: " i input "Type an other number: " j button "Calculate" text "The sum of "+(string i)+" and "+(string j) text " is "+(string i+j)
------> Type a number:
Type an other number:

Some of pliant .page format instructions are very often used, so there are shortcut instructions to go faster.

bracketed text enables you to omit the 'text' instruction.

Syntax:

[string]

Where 'string' is the character string you want to display.

The following sample

[your prose]

is equivalent to

text "your prose"

So, the following sample

bold [your prose]

is equivalent to

bold text "your prose"

With " ; " you can write instructions on the same line.

Syntax:

instruction ; instruction

The following sample

[A ] ; bold [strong] ; [ word] ; eol

is equivalent to

text "A " bold text "strong" text " word" eol

source:		result:
`text "hello world " text "on the same line [lf]" text "on the next line"`	------>	hello world on the same line on the next line

source:		result:
`text "my first line" eol text "my second line"`	------>	my first line my second line

source:		result:
`link "Pliant home page" "http://pliant.cx/"`	------>	Pliant home page

source:		result:
`section "mysection" text "bla bla bla[lf]" text "more bla bla bla[lf]" link "jump to beginning of my section" "" section "mysection"`	------>	bla bla bla more bla bla bla jump to beginning of my section

source:		result:
`text "more " note "explanations" title "My sample note" text "As you can see the note is displayed on a new " text "page, but you included it in your main document" text " about notes."`	------>	more explanations about notes.

source:		result:
`text "A passive image:[lf]" image "/pliant/welcome/image/pliant.jpeg" eol text "An active image (in other words, an hyperlink):[lf]" image "/pliant/welcome/image/pliant.jpeg" "http://pliant.cx/" # FIXME`	------>	A passive image: An active image (in other words, an hyperlink):

source:		result:
`listing what ever you want with free indentation and on several lines`	------>	`what ever you want with free indentation and on several lines`

source:		result:
`highlight "look at this"`	------>	look at this

source:		result:
`list item text "banana" item text "apple" eol text "and lemon" item text "orange"`	------>	banana apple and lemon orange

source:		result:
`list item text "fruits" list item text "banana" item text "apple"`	------>	fruits banana apple

source:		result:
`bold text "Displayed in bold" eol text "also bold" text " no more bold"`	------>	Displayed in bold also bold no more bold

source:		result:
`italic text "Displayed in italic"`	------>	Displayed in italic

source:		result:
`center text "The Pliant .page format is " eol text "an alternative to native HTML."`	------>	The Pliant .page format is an alternative to native HTML.

source:		result:
`fixed text "This font is fixed"`	------>	`This font is fixed`

source:		result:
`font color (color hsl 60 100 50) text "yellow text."`	------>	yellow text.

source:		result:
`font color (color rgb 255 255 0) text "yellow text."`	------>	yellow text.

source:		result:
`var Str name input "your name: " name`	------>	your name:

source:		result:
`var Int i := 3 var Int j := 5 input "Type a number: " i input "Type an other number: " j button "Calculate" text "The sum of "+(string i)+" and "+(string j) text " is "+(string i+j)`	------>	Type a number: Type an other number: