Formatierte Ausgabe mit der Otto Suite.

Die Standardform zur Darstellung der Ausgabe von Otto ist die strukturierte Tabelle. Diese kann einmal in Textform als ASCII-formatierte Tabelle oder als Tabelle in einem HTML-Dokument ausgeben werden.
Die HTML-Ausgabe erlaubt es aber auch die Daten in anderen Layouts darzustellen. Dazu benötigt sie zusätzliche Formatinformationen. Diese sind an die vielleicht schon bekannte Formatierungsspache CSS (Cascading Style Sheets) angelehnt. Um die Formatinformation der HTML-Ausgabe zugänglich zu machen, werden die Daten mit o++oPS um diese erweitert. Das Schema der Formatinformation ist SELECT, TYPE, STYLEl l.
Beispiel:
ext FORMAT := ##
<TAB:
SELECT,   TYPE,    STYLEl l
DOKUMENT  div
ARTIKELl  tabelle  ohnerahmen fett
:TAB>

Das zusätzliche Tag "FORMAT" um diese Struktur ist erlaubt aber nicht notwendig.
Die Spalte SELECT wählt aus welchen Teilen der Daten ein Format zugeordnet wird.  Dazu kann man hier einen Tagnamen angeben. Kollektion ohne eigenem Namen können hier auch über INNERTAGl (wie im Beispiel) angesprochen werden. Die Spalte TYPE legt grob die Darstellungsart fest. Einige mögliche Werte sind table (Tabelle), div (allgemeiner Bereich), span (inline Bereich), img (Bild) und svg (plotten). (Im HTML-Dokument spiegeln sich diese Tags auch wieder.) In der Spalte STYLEl werden die eigentlichen Formatierungen angegeben. Hier stehen alle CSS Eigenschaften zur Verfügung. Aus Gründen der Benutzerfreundlichkeit wurden aber auch zusätzliche Abkürzungen eingeführt. So kann man die CSS Eigenschaft "font-weight:bold" durch "fett" ersetzen.
Beispiel:
ext LIST1:= 1 bis 3 tag1 A1;
ext LIST2 := 1 bis A1 tag1 B1
ext C:= B1 + 1
ext A2:= Tabelle +text " " +text (A1 text)
weg A1

ext ##
<TAB:
SELECT,       TYPE,       STYLEl m
LIST1         div  
LIST2         table       rotation:1 rand-unten:2em
C                         farbe:rot
:TAB>
Die äußere Kollektion (LIST1) wird nicht wie gewöhnlich als Tabelle sondern als allgemeiner Bereich per div ausgegeben. Die A1-Elemente werden auch als "div" ausgegeben, da sich die Formate automatisch weitervererben so lange kein anderes Format angegeben wird. Die inneren Kollektionen (LIST2) werden aber als Tabellen ausgegeben da ihr "TYPE" mit "table" bestimmt wurde. Die C-Spalte wird zusätzlich rot gefärbt.

Bemerkungen zum Einsatz von div und span

Sowohl "div" und "span" definieren einen Bereich. Dabei wird beim div im Text ein neuer Block eingeführt. Das heißt, dass vor und nach dem "div" Zeilenumbrüche entstehen. Dies kann man zum Beispiel benutzen um Absätze zu gestalten. Beim "span" dagegen entstehen keine Zeilenümbrüche, es erlaubt Formatierungen im laufenden Text vorzunehmen. Dies ermöglicht zum Beispiel einzelne Wörter im laufenden Text zu formatieren.
Beispiel:
ext VORNAME:= Frank
ext NACHNAME:= Schulz
ext STRASSE:= "Waldweg 3"
ext PLZ:= 09123
ext ORT:= Eindorf
tag ADRESSE

ext ##
<TAB:
SELECT,        TYPE,       STYLEl m::
ADRESSE        div           
VORNAME        span
NACHNAME       span
PLZ            span
ORT            span
:TAB>
Hier wird die Adresse zunächst als "div" ausgegeben. Ohne weitere Angaben würden so alle Elemente der Adresse für sich in einer eigenen Zeile ausgegeben. Vorname / Nachname und PLZ / Ort sollten aber jeweils zusammen in einer Zeile stehen. Darum werden sie hier als span ausgegeben.

Es ist auch möglich zunächst mit "span" zu beginnen. Dann würden alle Elemente der Adresse nacheinander in einer Zeile erscheinen. Macht man jedoch die Straße zum "div" entsteht vor und nach der Straße ein Zeilenumbruch und die Adresse sieht aus wie gewohnt.
<TAB:
SELECT,        TYPE,       STYLEl m::
ADRESSE        span           
STRASSE        div
:TAB>

TYPE

In der TYPE-Spalte sind alle HTML-Tags erlaubt. Einige wichtige sind in der folgenden Übersicht aufgelistet.

TYPE
Beschreibung
table
tabelle
Darstellung als Tabelle
In der Spalte STYLE sind hier zuätzlich folgende Schlüsselwörter erlaubt:
  • rotation, roation:n
    dreht die gesamte Tabelle um 90° gegen den Uhrzeigersinn. Enthält die Tabelle innere Tabellen gibt n an bis zu welcher Tiefe die Tabellen gedreht werden. Die entstehenden Spalten können in der SELECT Spalte über den Tabellennamen-[Spaltennummer] angesprochen werden. Datenspalten haben dann den TYPE td (table data) und die Kopfspalte den TYPE th (table head)
  • ohnerahmen
    per Voreinstellung werden Tabellen mit Gitternetzlinen und Rahmen ausgegeben. Das Schlüsselwort "ohnerahmen" schaltet diese ab
  • ohnekopf
    stellt die Tabelle ohne Kopf dar
div
allgemeiner Bereich
span
inline Bereich
img
Bildausgabe: das betreffende Element sollte einen Dateinamen oder eine URL enthalten
svg
Plotten
h1
h2
h3
h4
h5
h6
Überschrift

STYLE

In der STYLE-Spalte sind alle CSS-Eigenschaften zugelassen. Außerdem gibt es einige Abkürzungen.

STYLE
Beschreibung
font-weight:bold
fett
bold
fett
font-weight:bolder
extrafett
bolder
extra fett
font-weight:lighter
duenner
duenn
dünn
font-style:italic
kursiv
italic
kursiv
fint-style:oblique
schraeg
oblique
schräg
width:[ ]
breite:[ ]
gibt die Breite eines Elementes an, z.B. nützlich bei Bildern und Tabellen
Bsp: breite:250px
height:[ ]
hoehe:[ ]
gibt die Höhe eines Elementes an
text-decoration:underline
unterstrichen
underline
unterstrichen
text-decoration:overline
ueberstrichen
overline
überstrichen
text-decoration:line-through
durchgestrichen
line-through
durchgestrichen
text-decoration:blink
blinkend
blink
blinkend
text-indent:[ ]
einzug:[ ]
Einzug
line-height:[ ]
zeilenhoehe:[ ]
Zeilenhöhe
vertical-align:[ ]
vertikale_ausrichtung:[ ]
vertikaleausrichtung:[ ]
vertikale-ausrichtung:[ ]
vertikale Ausrichtung in Verbindung mit top/oben, middle/mitte, bottom/unten, baseline/basisline, sub/tief, super/hoch
Bsp: vertikaleausrichtung:oben
text-align:[ ]
textausrichtung:[ ]
text-ausrichtung:[ ]
ausrichtung:[ ]
Textausrichtung (horizontal) in Verbindung mit left/links, right/rechts, center/zentriert, justify/block
Bsp: ausrichtung:block
font-size:[ ]
schriftgroesse:[ ]
groesse:[ ]
Schriftgröße in Verbindung mit xx-small/winzig, x-small/sehrklein, small/klein, medium/mittel, large/gross, x-large/sehrgross, xx-large/riesig
margin-left:[ ]
rand-links:[ ]
linker Rand
margin-right:[ ]
rand-rechts:[ ]
rechter Rand
margin-bottom:[ ]
rand-unten:[ ]
unterer Rand
margin-top:[ ]
rand-oben:[ ]
oberer Rand
padding-left:[ ]
abstand-links:[ ]
linker Abstand
padding-right:[ ]
abstand-rechts:[ ]
rechter Abstand
padding-bottom:[ ]
abstand-unten:[ ]
unterer Abstand
padding-top:[ ]
abstand-oben:[ ]
oberer Abstand
page-break-after:[ ]
seitenumbruch-danach:[ ]
Seitenumbruch nach dem Element in Verbindung mit always, avoid, left, right, inherit, auto
seitenumbruch
Abkürzung für seitenumbruch-danach:always
color:[ ]
farbe:[ ]
Farbe in Verbindung mit Farbnamen
background-color:[ ]
hintergrundfarbe:[ ]
Hintergrundfarbe in Verbindung mit Farbnamen

Plotten

Das Plotten ermöglicht es Daten als Punkte auszugeben. Damit können beliebige Grafiken erzeugt werden. Die Plotdaten müssen einem bestimmten Schema entsprechen, das im folgendem beschrieben wird.
In einer Kollektion von Tupeln wird der erste Wert eines Tupels als X-Wert angesehen. Alle weiteren Werte des Tupels als Y-Werte. Diese Y-Werte können auch in Kollektionen und Tupeln sein.
Folgendes Beispiel plottet zwei Funktionen:
aus -2 bisschritt 2,0.005 tag1 X    # X-Werte
ext GERADE:=0.5 * X              # Funktion 1
ext PARABEL:=X * X + X -2        # Funktion 2

Will man die Fläche zwischen den Funktionen plotten (image klicken), so kann man dies durch Erweiterung des X, Y1, Y2 Tupels um die Kollektion K tun:
ext K:=GERADE < PARABEL dann GERADE bisschritt PARABEL,0.01 tag1 Z, PARABEL bisschritt GERADE,0.01 tag1 Z

Um Punkten eine andere Farbe zu geben, muss man die Daten um Farbinformationen erweitern. Eine Farbinformation ist ein Tupel mit dem Tagnamen RGB. RGB steht für rot-grün-blau. Das Tupel besteht aus drei PZAHL Werten im Interval [0., 1.]. Ein Wert gibt den Farbanteil für rot, grün oder blau an. Gibt man die Werte als ZAHL an, so ist das Interval [0, 255]. Will man einen Punkt färben, so muss man ein Farbtupel vor diesem Punkt definieren. Der Punkt und alle folgenden Punkte werden dann in der entsprechenden Farbe geplottet. Die folgende Erweiterung färbt die Funktionen rot und blau und füllt die Fläche dazwischen mit einem Farbverlauf.
ext RGB:= (0.5*X,Z*0.1,Z*0.2) leftat K   # Farbverlauf

...