# SCLO/ Vorlage: Baum

root :
| a-text-left | a-text-right |
| first-text-left first-text-right first last-text-left last-text-right last ||
Vorlage für eine Out-Tree mit mindestens zwei bis maximal zehn Kindelementen auf einer Zeile. Für mehr Ebenen kann ein Baum im Baum erstellt werden.

## Einfügen

Bei nur 2 Kindelementen kann der Block "mittlere Kindelemente" gelöscht werden. Falls mehrere "mittlere Kindelemente erforderlich sind, muss der Block vervielfacht werden. Bei den mittleren Kindelementen wird das X jeweils durch die Nummer des zu formatierenden Kindelements ersetzen (Ziffern 2 - 9). Also 2 für alle Parameter welche das 2. Kindelement betreffen.

### Einfach

<!-- Wurzel --> |root=
<!-- Erstes Kindelement --> |first=
<!-- Mittlere Kindelemente : X jeweils durch die Nummer des zu formatierenden Kindelements ersetzen (Ziffern 2 - 9).--> |x=
<!-- Letztes Kindelement --> |last=

### Einfach mit Beschriftung der Linien

<!-- Wurzel --> |root=
|a-text-left=
|a-text-right=
<!-- Erstes Kindelement --> |first=
|first-text-left=
|first-text-right=
<!-- Mittlere Kindelemente : X jeweils durch die Nummer des zu formatierenden Kindelements ersetzen (Ziffern 2 - 9).--> |x=
|x-text-left=
|x-text-right=
<!-- Letztes Kindelement --> |last=
|last-text-left=
|last-text-right=

### vollständig

<!-- den ganzen Baum betreffend --> |style=
|style-all=
|line=
<!-- Wurzel --> |root-style=
|root=
|a-line=
|a-text-left=
|a-text-left-style=
|a-text-right=
|a-text-right-style=
<!-- Erstes Kindelement --> |first-style-all=
|first-style=
|first=
|first-line=
|first-text-left=
|first-text-left-style=
|first-text-right=
|first-text-right-style=
<!-- Mittlere Kindelemente : X jeweils durch die Nummer des zu formatierenden Kindelements ersetzen (Ziffern 2 - 9).--> |x-style-all=
|x-style=
|x=
|x-line=
|x-text-left=
|x-text-left-style=
|x-text-right=
|x-text-right-style=
<!-- Letztes Kindelement --> |last-style-all=
|last-style=
|last=
|last-line=
|last-text-left=
|last-text-left-style=
|last-text-right=
|last-text-right-style=

## Parameter
### Inhalt der Kästen

* root=: Inhalt des Wurzelelements (root)
* first=: Inhalt des ersten Kindelements
* 2=, 3=, 4=, 5=, 6=, 7=, 8= und 9=: Inhalt der Kindelemente 2-9.
* last=: Inhalt des letzten Kindelements

### Rahmenbeschriftungen (text-left und text-right)

* a-text-right= / a-text-left=: Beschriftung der Linie welche vom Mutterelement (root) wegführt (rechts/links davon)
* first-text-right= / first-text-left=: Beschriftung der Linie zum ersten Kindelement (rechts/links davon)
* x-text-right= / x-text-left=: Beschriftung der Linie zu den mittleren Kindelementen (rechts/links davon). x wird durch die jeweilige Nummer des Kindelement ersetzt.
* last-text-rigth= / last-text-left=: Beschriftung der Linie zum letzten Kindelement (rechts/links davon)
Rahmen um den Text mit: x-text-left=<div style="display:inline-block; border: Farbe Rahmenart Dicke"> Text </div>

### Linienformatierung (line)

Die Formatierung der Linien erfolt mit line= Farbe Form Dicke.
* line=: Formatierung aller Verbindungslinien der Baumstruktur (Rahmen der Element sind nicht betroffen, sie werden mit dem style-Attribut angepasst).
* a-line=: Formatierung der vom Mutterelement (root) wegführenden vertikalen Linie.
* first-line=: Formatierung der zum ersten Kindelement führenden vertikalen Linie.
* x-line=: Formatierung der zu den mittleren Kindelementen führenden vertikalen Linie (x durch die Nummer des jeweiligen Kindelements ersetzen).
* last-line=: Formatierung der zum letzten Kindelement führenden vertikalen Linie.

### Style-Variablen

Trennung der Attribute mit ;. x-style-all bei den Kindelemente betrifft jeweils eine 2x2-Zellen-Tabelle, inkl. der vertikalen Linie zum Kasten. Hier kann zum Beispiel die Ausrichtung des Textes (text-align:left/right) für den Inhalt des jeweiligen Kastens formatiert werden. Rahmen, Schriftfarbe und -typ etc. sollten aber mit der x-style= Variablen formatiert werden.
* style=: Für die Ausrichtung des Baums im Text (display:; float:;)
* style-all=: Betrifft die gesamte Baumstruktur (Tabelle).
** Beispiel: style-all=border: red solid 1pt bewirkt einen Rahmen um den gesamten Baum.
* root-style=: Betrifft das Aussehen der Box und des Inhaltes des Wurzelelements (root).
* first-style-all=: Betrifft das gesamte 1. Kindelement.
* first-style=: Betrifft nur den Inhalt des first-Kastens.
* x-style-all=: Betrifft das gesamte x. (x mit der Nummer des jeweiligen Kindelements ersetzen) Kindelement.
* x-style=: Betrifft nur den Inhalt des x. Kindelements.
* last-style-all=: Betrifft das gesamte letzte Kindelement.
* last-style=: Betrifft nur den Inhalt des letzten Kindelements.
* a-text-right-style= / a-text-left-style=: Formatierung des Beschriftungstextes der vom Mutterelement (root) wegführenden vertikalen}}
* first-text-right-style= / first-text-left-style=: Formatierung des Beschriftungstextes der zum ersten Kindelement führenden, vertikalen Linie.
* x-text-right-style= / x-text-left-style=: Formatierung des Beschriftungstextes der zum jeweiligen Kindelement führenden, vertikalen Linie.
* last-text-right-style= / last-text-right-style=: Formatierung des Beschriftungstextes der zum jeweiligen Kindelement führenden, vertikalen Linie.

## Beispiele
### Baum im Baum

! Im style-all des Elements in welchem ein neuer Baum gestarte wird muss border: none angegeben werden, da sonst ein Rahmen um den gesamten folgenden Inhalt entsteht.
root :
first-root
first-first
first-2
first-last :
* 2 |
* last |

### farbiges Beispiel

root :
* a-text-left
* first
* zweites Kindelement
* last |

## mögliche Probleme

* gesamter Baum liegt zu weit rechts (z.B. bei langem first-text-right): Lösung style-all=margin: 0 0 0 -xem
* x-text wird umgebrochen, sollte aber auf einer Zeile liegen. Lösung: x-text=<div style="white-space:nowrap; ">x-text</div>
* Seitliche Verschiebung der Kindblöcke bei Eingabe sowohl eines text-right als auch eines text-left gleichzeitig. Lösung: Beide Texte müssen ungefähr gleich lang sein. Evtl Ausgleich auf einer Seite mit geschütztem Leerzeichen (&nbsp;).
* Rahmen der Linienbeschriftung ist zu gross wenn er mit x-text-right-style=border: gemacht wird. Lösung: Rahmen um den Text mit: x-text-left=<div style="display:inline-block; border: Farbe Form Dicke"> Text </div>

## verwendete Vorlage

/Kindelement