Sigil-Vorschau, DOM, Inspektor & JavaScript

Erneut ein Beitrag, der nicht die Fotografie in den Mittelpunkt stellt, sondern die Nutzung von Sigil. Die Reise in die Tiefen dessen, was mit Sigil und epub-Dokumenten möglich ist, geht weiter. Zuletzt hatte ich in meinem Beitrag R(e)volution - Books erstellen darüber berichtet, auf welchen Technologien das ebook-Format epub basiert, und welche Unterstützung Sigil und PageEdit zur Erstellung solcher Dokumente bieten.

Im vorliegenden Beitrag möchte ich Sigils Vorschau unter die Lupe nehmen. Dabei widme ich dem Domain Object Model (DOM) einer HTML-Seite, dem mit der Vorschau gekoppelten Inspektor und einzelnen Aspekten der Manipulation des DOM mittels JavaScript besondere Aufmerksamkeit. Die Ausführungen basieren auf der aktuellen Version Sigil 1.1.0.

Relevanz für meine Fotografie erhalten diese Ausführungen mit Blick auf meine Ideen zur Präsentation meine Fotowerke, zur Weiterentwicklung meiner Foto-Website fotostellwerk.de und künftiger Erstellung von epub-Dokumenten.

Sigil - Vorschau

Sigil besitzt zur Anzeige des HTML-Codes der aktuell in Bearbeitung befindlichen HTML-Seite eine Vorschau (engl. Preview). Ergänzt wird dieses Werkzeug durch folgende Funktionen:

• Vorschaufenster aktualisieren (engl. Update Preview Window): aktualisiert die gerenderte HTML-Seite
• Alles auswählen (engl. Select All): Selektiert den in der Vorschau erzeugten Text
• Auswahl in die Zwischenablage kopieren (engl. Copy Selection To ClipBoard): kopiert den in der Vorschau angezeigten Text
• Seite untersuchen (engl. Inspect Page): öffnet den Inspektor

Der Inspektor (engl. Inspector) ist ein sehr mächtiges Werkzeug zum Inspizieren, Debuggen und Manipulieren der aktuell in der Vorschau angezeigten HTML-Seite.

Dieses Werkzeug steht auch in PageEdit, dem WYSIWYG-Editor für Sigil zur Verfügung. Web-Entwickler setzen es bei der Arbeit mit Browsern wie Firefox, Chrome, Safari und Internet Explorer ein.

DOM - eine modifizierbare Baumstruktur

Ein HTML-Dokument basiert auf einem Domain Object Model - einem DOM. Jedes HTML-Element wird darin durch einen Knoten repräsentiert. Durch die Schachtelung der HTML-Elemente entsteht eine Baumstruktur, konkret einen Baum von Objekten.

Dieser Baum kann mittels JavaScript-Programmierung modifziert werden. Auf diese Weise lässt sich JavaScript z.B. auch zur Programmierung von Code-Generatoren nutzen - mit Sigil sogar in einem epub-Dokument!

Als Beispiel möchte ich die in meinem letzten Beitrag genannte JavaScript-Anwendung RectInCircle nennen.

Diese Anwendung erzeugt auf Basis einzugebender Parameter eine SVG-Grafik. Ich habe sie ursprünglich in der IDE Netbeans (aktuell Version 11.2) programmiert und den Code dann via Sigil in ein epub-Dokument übertragen.

Inspektor - das schauen wir uns näher an

Ich öffne das epub-Dokument RectInCircle.epub in Sigil.

Die Vorschau zeigt den Dialog der Anwendung. Das DOM von RectInCircle repräsentiert anfangs nur einen Dialog. Er erlaubt es, vier Parameter einzugeben. Die Felder sind mit Standardeinstellungen vorbelegt.

Elemente

Ich drücke den Button Seite untersuchen (Inspect Page). Es öffnet sich ein zusätzliches Dialog-Fenster mit Titel Seite oder Element untersuchen. Der Inhalt des Fensters erscheint ausschliesslich in englisch-sprachiger Lokalisierung. Im linken Bereich sehen wir die komplette DOM-Baumstruktur der HTML-Elemente (vgl. Abb. 4, unten).

Zusammen mit den im rechten Bereich angebotenen Optionen gibt es vielfältige Möglichkeiten den aktuellen DOM-Baum Element für Element zu inspizieren, zu manipulieren, zu debuggen.

Erst nach Drücken des in RectInCircle programmierten Button Compute berechnen die von mir geschriebenen JavaScript-Routinen unter Verwendung der eingegebenen Parameter die gewünschte SVG-Grafik und geben sie zusammen mit einigen berechneten Werten in der Seite aus.

Bei diesem Vorgang werden neue HTML-Elemente generiert, dem DOM hinzugefügt und schliesslich in der Vorschau angezeigt. Hier sehen wir die generierte SVG-Grafik:

Das kontext-sensitive Menü im Hauptfenster des Inspector Element-Bereichs bietet interessante Funktionsaufrufe.

Beispielsweise den Menü-Eintrag Edit as HTML und Copy outerHTML.

Rufen wir erstere Funktion auf, können wir das HTML des selektierten Elements in einem Fenster editieren.

Der zweitgenannte Aufruf kopiert das selektierte HTML-Element. Wir können es dann mit Cmd-V (MacOS) bzw. Strg-V (MS Windows) direkt in eine Datei einsetzen.

Wenn es sich bei dem kopierten Code um SVG-Code handelt können wir beispielsweise auch die Funktion Leeres SVG-Bild hinzufügen ... aufrufen. Sie wird im Buch-Browser via kontext-sensitivem Menü über dem Ordner Images angeboten.

Nach Aufruf wird eine neue leere Datei im Sigil-Editor (in den Bildschirmkopien das rechte Fenster) angezeigt. Den SVG-Code nun einfach mit o.g. Tastaturbefehl einsetzen. Abschliessend die Datei via kontext-sensitivem Menü geeignet umbenennen - fertig.

Die generierte Grafik steht nun wie alle anderen Bilder oder Grafiken für die Integration in beliebige HTML-Seiten des ebook zur Verfügung. Sie lässt sich aber auch exportieren - mit kontext-sensitivem Menü-Eintrag Speichern als ... (engl. Save as ...) des Buch-Browsers (engl. Book Browser).

Nun können wir die Datei im Falle einer SVG-Grafik in jedem beliebigen Browser anzeigen oder in einer Anwendung wie Affinity Designer weiterbearbeiten.

Zurück zum Inspector. Im Bereich Properties des Inspector Element-Bereichs werden alle Properties (dt. Eigenschaften) eines HTML-Elements gelistet, ebenso die eingesetzten Styles. Beides sehr hilfreich, möchte man diese Styles und Properties mittels JavaScript-Anweisungen über die JavaScript Konsole (engl. Console) verändern.

Um dieses Thema geht es im nächsten Kapitel.

Konsole

Neben dem Bereich Elements bietet der Inspector weitere interessante Arbeitsbereiche an. Sie dienen jeweils einem besonderen Zweck. Ausser dem Bereich Console (dt. Konsole), sollen sie hier jedoch nicht weiter betrachtet werden.

In der Konsole können wir JavaScript-Anweisungen interaktiv eingeben. Sie werden unverzüglich ausgeführt. So können wir Anweisungen testen und später, wenn sie ihre Funktionsfähigkeit bewiesen haben, direkt in JavaScript Programmcode übernehmen.

Zentral sind Funktionen, die uns helfen HTML-Elemente zu identifizieren und zu finden. Die gefundenen Elemente können wir mit Anweisungen modifizieren.

Die Konsole stellt wichtige Standard-Funktionen zum Finden von Elementen in abgekürzter Schreibweise zur Verfügung:

und

Als Parameter sind z.B. HTML-Tags, Id's oder Klassen einzutragen.

In umfangreicherem JavaScript Programmcode macht es Sinn diese Kürzel ebenso zu definieren:

Das folgende Kommando sucht den <body>-Knoten der Seite und gibt die Eigenschaft (Property) innerHTML zurück:

Es wird der vollständige zwischen den <body>-Tags liegende HTML-Text als eine Zeichenkette zurückgeliefert und in der Konsole angezeigt.

Weitere Methoden für den Zugriff auf das DOM sind beispielsweise hier (SelfHTML) sehr gut beschrieben.

Mit JavaScript-Anweisungen können wir einem HTML-Element auch eine CSS-Id und/oder CSS-Klassen zuweisen. Wenn dies geschehen ist, wendet der Browser für die so identifizierbaren Elemente die zugehörigen CSS-Anweisungen an.

Klassen eines HTML-Elements sind in der Eigenschaft classList, einer NodeList, abgelegt. Eine NodeList ist einem Array ähnlich. Die Elemente sind direkt mittels [index] adressierbar. Zur Bearbeitung der classList stellt JavaScript verschiedene Methoden bereit. Die Eigenschaft Länge der classList erfahren wird durch Aufruf der Methode length.

Eine Id ist eine Eigenschaft eines HTML-Elements. Einem Element lässt sich eine Id wie folgt zuweisen.

Für meine in RectInCircle ausgebene Grafik sieht die Anweisung wie folgt aus - suche das svg-Element und vergib die id #svg_001 (hier in CSS-Schreibweise angegeben).

(vgl. selfHTML).

Damit kann das Element eindeutig identifiziert werden und die Anweisung 

liefert das HTML-Element, das diese Id besitzt.

Für das obige Beispiel sieht das dann so aus ...

Im Unterschied zur Anweisung

darf kein id-# angegeben werden.

Einige Eigenschaften müssen wir aufgrund besonderer interner Verarbeitung über get- und set-Methoden setzen bzw. abfragen. Detaillierte Hinweise auf solche Fälle gibt das von mir unten empfohlene Buch.

Abschliessend ein praktisches Beispiel zu RectInCircle. Folgendes Kommando in der Konsole eingegeben ändert die Hintergrundfarbe auf den angegebenen Grünton.

Hier wird - nebenbei bemerkt - sichtbar, dass die Methoden-Bezeichner in JavaScript nach dem Prinzip camelCase aufgebaut werden. Die Schreibweise der CSS-Bezeichner mit Bindestrich ist nicht erlaubt. So wird aus background-color in JavaScript backgroundColor.

Das Ergebnis:

SVG - Farb-Codierung

Die Farbe von HTML-Elementen können wir üblicherweise entsprechend unterschiedlicher RGB-Farbmodelle festgelegen.

Die ursprünglichste Form Farbe zu kodieren ist die durch Angabe eines Hex-Werts mit vorangestelltem #, Beispiel: #ff7f50. Intuitiver ist der Einsatz von Funktionsaufrufen zur Nutzung von RGB-Farbmodellen. Es gibt folgende Varianten: rgb(), rgba(), hsl() und hsla(), jeweils mit bestimmten Parametern. Detailliertere Bescheibungen finden wir hier (selfHTML).

In aktuellen Browsern funktioniert das mit HTML, CSS und SVG problemlos. Das gilt nicht unbedingt für SVG-Grafiken und deren Import in Grafik-Anwendungen wie Affinity Designer. Die Funktionsaufrufe werden teilweise nicht korrekt interpretiert.

Es scheint daher sinnvoll bei Generierung von SVG-Code wie in RectInCircle, den einfachen "nicht-sprechenden" Hex-Code der Farbe anzugeben. Dieser wird beim Import in Affinity Designer erkannt und korrekt dargestellt.

Der für eine SVG-Grafik definierte Hintergrund wird hingegen gänzlich ignoriert. Ist der Hintergrund wichtig, sollte er der Grafik als eigenständiges SVG-Element hinzugefügt werden.

Zur Umrechnung von Farbcodes verwende ich die iOS App Palettes Pro. Mit dieser App kann ich auch Farbpaletten entwickeln und als solche abspeichern.

Buchempfehlung

Zum Schluss möchte ich ein Buch zum beschriebenen Thema empfehlen:

Marco Emrich, Christin Marit, JavaScript: HTML mühelos manipuliert. Ein Webmasters Press Lehrbuch, 2016.

Es ist locker und gut verständlich geschrieben und hat mir sehr geholfen, in die Materie einzusteigen. Basis der Erörterungen ist in diesem Buch der Inspector des Browsers Firefox. Ist Firefox auf deutsche Lokalisierung eingestellt, wird auch der Inspektor mit dieser Lokalierung dargestellt.

Copyright, 16.02.2020, Uwe Heimburger