Visualisierung

Mapping zwischen Layoutdeklaration und Visualisierungstechnologie

Wenn <surface> in <sourceDoc> das oberste einer Seite zugeordnete Containerelement ist (also wenn es in keine <hei:box>-Struktur eingebettet ist), entspricht es einem obersten <div> für die jeweilige Seite in HTML. Die <zone>-Elemente auf Kindebene von <surface> werden dann in der Dokumentreihenfolge nacheinander ausgelesen und ihrerseits jeweils zu <div> umgewandelt. Dabei gilt es zu unterscheiden:

• Das Element <zone> stellt einen Gruppierungsbereich (› hc:GroupingZone ‹) dar, d. h. einen Container, dessen Komponenten in einem bestimmten Layout angeordnet werden sollen. Solche Gruppierungsbereiche werden mit CSS als flex container ausgewiesen.
• Das Element <zone> stellt einen Inhaltsbereich (› hc:ContentZone ‹) dar, das unmittelbar einen Inhalt enthält, z. B. Zeilen (wenn es sich um einen Textbereich handeln würde). Inhaltsbereiche werden bei der Umwandlung in HTML zu <div>-Elementen, die entweder Kindelemente des Seitencontainers (HTML-Entsprechung von <surface>) oder Kindelemente eines Layout-Containers (Entsprechung von › hc:GroupingZone ‹) sind. Im letzteren Fall funktionieren sie in einem flex container als dessen flex items. Jedenfalls beinhalten Inhaltsbereiche ihrerseits keine Gruppierungsbereiche, sondern unmittelbar den jeweiligen Inhalt.

Um die Unterscheidung zwischen Gruppierungsbereichen und Inhaltsbereichen für die Visualisierung zu vereinfachen, wird an das jeweilige <zone>/@ana beim Durchlaufen der TEI-Verarbeitungspipeline eindeutig entweder hc:GroupingZone oder hc:ContentZone gesetzt.

Die in Layouterfassung beschriebenen layout-relevanten Typen der Gruppierungsbereiche werden in HTML wie folgt umgesetzt:

• hc:HorizontalLayout entspricht der CSS-Angabe flex-direction: row;.
• hc:VerticalLayout entspricht der CSS-Angabe flex-direction: column;.

horizontale Container Für ein <zone> mit der Angabe hc:HorizontalLayout sind ferner folgende Attributangaben möglich:

• @hei:width Breitenangaben in Prozent in der Form 30% sind in CSS entsprechend mit width umzusetzen. Diese Angabe an einem horizontalen Container ist nur dann sinnvoll, wenn dieser Container selbst ein flex item eines übergeordneten horizontalen Containers wäre, was zwar möglich, aber untypisch ist.
• @rendition und Wert hc:AlignmentLeft entspricht der CSS-Angabe justify-content: flex-start;. Das sollte auch die Voreinstellung sein, falls weder hc:AlignmentLeft noch hc:AlignmentRight noch hc:AlignmentCentered explizit gesetzt ist. Die @rendition-Angaben hc:AlignmentLeft, hc:AlignmentRight und hc:AlignmentCentered schließen einander aus, eine Schematron-Prüfung sollte vorher gewährleisten, dass sie nicht miteinander kombiniert werden.
• @rendition und Wert hc:AlignmentRight entspricht der CSS-Angabe justify-content: flex-end;.
• @rendition und Wert hc:AlignmentCentered entspricht der CSS-Angabe justify-content: center;.
• @rendition und Wert hc:SelfAlignmentLeft entspricht der CSS-Angabe align-self: flex-start;. Die Angabe ist an einem horizontalen Container nur dann sinnvoll, wenn er selbst ein flex item eines übergeordneten vertikalen Containers wäre. Die @rendition-Angaben hc:SelfAlignmentLeft, hc:SelfAlignmentRight und hc:SelfAlignmentCentered schließen einander aus, eine Schematron-Prüfung sollte vorher gewährleisten, dass sie nicht miteinander kombiniert werden.
• @rendition und Wert hc:SelfAlignmentRight entspricht der CSS-Angabe align-self: flex-end;. Die Angabe ist an einem horizontalen Container nur dann sinnvoll, wenn er selbst ein flex item eines übergeordneten vertikalen Containers wäre.
• @rendition und Wert hc:SelfAlignmentCentered entspricht der CSS-Angabe align-self: center;. Die Angabe ist an einem horizontalen Container nur dann sinnvoll, wenn er selbst ein flex item eines übergeordneten vertikalen Containers wäre.

Um für schmalere Bildschirme eine flexiblen Umbruch eines horizontalen Layoutcontainers in mehrere Zeilen zu erreichen, muss der flex container die CSS-Angabe flex-wrap: wrap erhalten. Alternativ können die Angabe flex-direction: row; und flex-wrap: wrap durch die einzige Angabe flex-flow: column wrap; ersetzt werden.

vertikale Container Um auf oberster Ebene der Elemente einer Inhaltsfläche eine vertikale Anordnung festzulegen, ist keine explizite Angabe eines vertikalen Containers notwendig. Deswegen werden vertikale Container nur für ggf. tiefer geschachtelte Bereiche verwendet. Für ein <zone> mit der Angabe hc:VerticalLayout sind folgende Attributangaben möglich:

• @hei:width Breitenangaben in Prozent in der Form 30% sind in CSS entsprechend mit width umzusetzen. Diese Angabe ist an einem vertikalen Container nur dann sinnvoll, wenn dieser Container ein flex item eines übergeordneten horizontalen Containers wäre.
• @rendition und Wert hc:AlignmentTop entspricht der CSS-Angabe justify-content: flex-start;. Das sollte auch die Voreinstellung sein, falls weder hc:AlignmentTop noch hc:AlignmentBottom noch hc:AlignmentCentered explizit gesetzt ist. Die @rendition-Angaben hc:AlignmentTop, hc:AlignmentBottom und hc:AlignmentCentered schließen einander aus, eine Schematron-Prüfung sollte vorher gewährleisten, dass sie nicht miteinander kombiniert werden.
• @rendition und Wert hc:AlignmentBottom entspricht der CSS-Angabe justify-content: flex-end;.
• @rendition und Wert hc:AlignmentCentered entspricht der CSS-Angabe justify-content: center;.
• @rendition und Wert hc:SelfAlignmentTop entspricht der CSS-Angabe align-self: flex-start;. Die Angabe ist an einem vertikalen Container nur dann sinnvoll, wenn er selbst ein flex item eines übergeordneten horizontalen Containers wäre. Die @rendition-Angaben hc:SelfAlignmentTop, hc:SelfAlignmentBottom und hc:SelfAlignmentCentered schließen einander aus, eine Schematron-Prüfung sollte vorher gewährleisten, dass sie nicht miteinander kombiniert werden.
• @rendition und Wert hc:SelfAlignmentBottom entspricht der CSS-Angabe align-self: flex-end;.
• @rendition und Wert hc:SelfAlignmentCentered entspricht der CSS-Angabe align-self: center;.

Container-›Kinder‹ Die Kindelemente (flex items) eines als flex container fungierenden horizontalen oder vertikalen Containers werden je nach festgelegter flex-direction des Elternelements horizontal oder vertikal ausgegeben und je nach der Angabe in justify-content entlang der entsprechenden Hauptachse des Elternelements ausgerichtet.

Darüber hinaus ist es möglich, an einzelnen Kindelementen ihre jeweiligen Ausrichtung entlang der Querachse des Elternelements anzugeben (z. B. am unteren Rand eines horizontalen Containers). Solche Angaben erfolgen in @rendition durch Referenzen auf Resourcen, deren Namen jeweils mit ›Self‹ anfangen. Mit Ausnahme von hc:SelfAlignmentCentered sind einzelne Werte jeweils nur für horizontale bzw. vertikale Elterncontainer sinnvoll und erlaubt:

• @rendition und Wert hc:SelfAlignmentTop entspricht der CSS-Angabe align-self: flex-start;. Die Angabe ist nur an einem flex item eines übergeordneten horizontalen Containers möglich. Die @rendition-Angaben hc:SelfAlignmentTop, hc:SelfAlignmentBottom und hc:SelfAlignmentCentered schließen einander aus, eine Schematron-Prüfung sollte vorher gewährleisten, dass sie nicht miteinander kombiniert werden. Die Ausrichtung am oberen Rand eines horizontalen Containers sollte die Voreinstellung sein, wenn keine explizite Angabe zur Selbstausrichtung des flex item entlang der Querachse gemacht wird.
• @rendition und Wert hc:SelfAlignmentBottom entspricht der CSS-Angabe align-self: flex-end;. Die Angabe ist nur an einem flex item eines übergeordneten horizontalen Containers möglich.
• @rendition und Wert hc:SelfAlignmentLeft entspricht der CSS-Angabe align-self: flex-start;. Die Angabe ist nur an einem flex item eines übergeordneten vertikalen Containers möglich. Die @rendition-Angaben hc:SelfAlignmentLeft, hc:SelfAlignmentRight und hc:SelfAlignmentCentered schließen einander aus, eine Schematron-Prüfung sollte vorher gewährleisten, dass sie nicht miteinander kombiniert werden. Die Ausrichtung am linken Rand eines vertikalen Containers sollte die Voreinstellung sein, wenn keine explizite Angabe zur Selbstausrichtung des flex item entlang der Querachse gemacht wird.
• @rendition und Wert hc:SelfAlignmentRight entspricht der CSS-Angabe align-self: flex-end;. Die Angabe ist nur an einem flex item eines übergeordneten vertikalen Containers möglich.
• @rendition und Wert hc:SelfAlignmentCentered entspricht der CSS-Angabe align-self: flex-center;. Die Angabe ist an flex items sowohl in horizontalen als auch in vertikalen Containern möglich; sie bezeichnet die mittige Ausrichtung entlang der jeweils gültigen Querachse.

Zusammengefasst kommen an <zone> folgende Kombinationen von Attributen und Attributwerten vor, die für die Ausrichtung in einem flex container auszuwerten sind:

@hei:width Mit dem Attribut @hei:width kann die relative Breite eines flex item in einem horizontalen oder vertikalen Elterncontainer festgelegt werden. Der Wert des Attributs muss dem regulären Ausdruck \d{1,2}% entsprechen (d. h. eine bis zwei Ganzzahlen und das Prozentzeichen). Das Attribut kann direkt in die entsprechende CSS-Angabe width überführt werden.

@rotate An jedem Element <zone> kann mit dem Attribut @rotate die Drehung des Bereichs angegeben werden. Sie wird in der Visualisierung voraussichtlich nur verbal angezeigt und nicht nachgeahmt.

ergänzende Werte an @ana Neben den Werten hc:HorizontalLayout und hc:VertikalLayout (bzw. hc:GroupingZone) können an @ana ergänzend weitere URIs angegeben werden, die das Layout näher beschreiben, aber für technische Aspekte der Visualisierung irrelevant sind. Diese Angaben werden jeweils in ihre deutschen oder englischen natursprachlichen label übersetzt und am betroffenen HTML-Element optional als Information ausgegeben. Die hier einschlägigen URIs sind den Abschnitten Angaben zu Typen von Inhaltsbereichen sowie Semistrukturelle Angaben zu Layout- und Inhaltsbereichen zu entnehmen.

@hei:placeRef An Randbereichen (› hc:MarginalZone ‹ bzw. › hc:MarginalColumn ‹) kann mit dem Attribut @hei:placeRef als ergänzende Information zur strukturellen Layoutbeschreibung die Platzierung an einem der im Layoutsystem der jeweiligen Inhaltsfläche vorhandenen Ränder angegeben werden. Diese Angaben werden für die Visualisierung jeweils in ihre deutschen oder englischen natursprachlichen label übersetzt und am betroffenen HTML-Element optional als Information ausgegeben. Die hierfür einschlägigen URIs sind dem Abschnitt Ergänzende Angaben zur Platzierung von Randbereichen zu entnehmen.