5. Der HTML-Output

5.1 Übersicht

Hinweis

Hier soll nun auf die Nutzung des html-Outputs im QGIS-Layout-Modus eingegangen werden. Das im Folgenden Beschriebene kann in den individuellen Workflow zum Erstellen eines vollständigen Stadtplan-Printlayouts integriert werden und richtet sich an erfahrene Nutzer. Es wird nicht auf das allgemeine Layouten von Kartendaten mit QGIS eingegangen. Darüber hinaus ist simples Einsteigerwissen in den Bereichen HTML und CSS von Vorteil.

Der Grundgedanke ist hier, dass variabel anpassbare HTML-Container zum Layout hinzugefügt werden, deren Inhalt via CSS gestylt werden kann.

1. HTML hinzufügen:

   Über diese Schaltfläche kann ein neuer HTML-Container im Layout-Bereich aufgezogen werden.

2. Beispielcontainer:

   Der Beispielcontainer enthält unformatierten HTML-Text.

3. Seiten hinzufügen:

   Diese Schaltfläche fügt neue Seiten zum Layout-Bereich hinzu. Dies ist nützlich, falls der vorhandene Platz nicht für das Straßenverzeichnis ausreicht.

4. Als PDF exportieren:

   Hier wird die aktuelle Layoutansicht als PDF exportiert. Nach der Auswahl des Speicherorts stehen zahlreiche Exportoptionen zur Verfügung.

5. HTML-Quelle:

   In das Textfeld Quelle wird der vom Plugin erzeugte HTML-Text eingefügt. Damit dieser Bereich erscheint, muss der erste erstellte HTML-Container angewählt sein. Nach erfolgtem Einfügen wird der Inhalt des Containers über die Schaltfläche HTML aktualisieren auf den neuen Stand gebracht.

6. Benutzer-Stylesheet:

   An dieser Stelle wird der zum Stylen des HTML-Textes verwendete CSS-Code eingefügt. Mehr dazu unter Kapitel 5.3.

5.2 HTML-Container

In der Regel wird der Platz eines HTML-Containers nicht ausreichen, um ein vollständiges Straßenverzeichnis abzubilden. Zur Lösung dieses Problems bietet QGIS die Funktion des Erweiterns eines HTML-Containers an.

Über die Schaltfläche Rahmen hinzufügen im Unterpunkt Rahmen in den Elementeigenschaften des ersten HTML-Containers werden neue HTML-Container nacheinander unterhalb des ersten Containers erzeugt. Diese werden dann mit dem HTML-Text gefüllt, der nicht mehr in den vorherigen Container gepasst hat. Werden auf diese Art mehrere HTML-Container aneinandergereiht, kann beispielsweise folgendes Layout entstehen:

5.3 Styling mit CSS

Um eine visuelle Hierarchie und bessere Nutzung des zur Verfügung stehenden Platzes umzusetzen, kann im Bereich Benutzer-Stylesheet (siehe 5.1) CSS-Code eingefügt werden, mit dem der Text in den HTML-Containern umfassend gestylt werden kann.

Die HTML-Ausgabe des Plugins ist so simpel wie möglich gehalten. Alle Bestandteile sind Paragraph-Elemente (<p>Beispieltext</p>). Zur Differenzierung in CSS sind diese unterschiedlichen Klassen zugeordnet:

• Titel:

  <p class="title">Straßenverzeichnis Bochum</p>
  

• Buchstaben-Überschriften:

  <p class="header">A</p>
  

• Straßeneintrag:

  <p class="entry">ABC-Str.; H7,I7</p>
  

Um eine Klasse anzusprechen, reicht es aus, die Regeln in CSS als

p.Klassenname{
    Stylingregeln
}

zu deklarieren.

Wird nun das Beispiel-CSS

p.title{
    font-size: 11pt;
}
p.header{
    font-size: 10pt;
}
p.entry{
    font-size: 7pt;
    margin: unset;
}

in das Textfeld Benutzer-Stylesheet eingefügt und anschließend die direkt darunter zu findende Schaltfläche HTML aktualisieren geklickt, sieht die zuvor unformatierte Seite nun so aus:

Dies soll nur ein plakatives Beispiel dafür sein, was im Layout-Modus mit der Nutzung von HTML-Containern und CSS möglich ist. Die Möglichkeiten von CSS sind äußerst vielfältig und lassen eine große Zahl an individuellen Darstellungen zu.