Beliebige Inhalte platzieren: Vorbereitungen
HTML eignet sich als besonders weit verbreitete und mächtige "Seitenbeschreibungssprache" ideal auch um zusätzliche Inhalte für PDF Seiten flexibel festzulegen. Letzte Beschränkungen werden durch die spezifischen Möglichkeiten in der pdfToolbox, z.B. zum Definieren von CMYK Farben beseitigt. Beim Platzieren von Objekten auf PDF Seiten, sollte man sich aber von im Web gültigen Grundregeln frei machen. Zum Beispiel sind anders als bei HTML im Web-Umfeld bei HTML für PDF Tabellen und absolute Positionierungen kein Problem.
Darüber hinaus gibt es einige Default-Einstellungen in HTML und vor allem CSS, die bei der Erzeugung von PDF nicht immer intuitiv oder erwünscht sind. Dieser Artikel beschreibt daher einige vorbereitende Tricks für die Einrichtung benutzerdefinierter Inhalt-platzieren-Korrekturen. Diese Tricks kommen übrigens auch bei den mitgelieferten Korrekturen (etwa Farbkontrollstreifen platzieren) zum Einsatz.
Die hier genannten Tipps beziehen sich auf die HTML-Templates; genauer gesagt auf bestimmte CSS-Vorgaben. Um die styles.css einzurichten beziehungsweise anzupassen, kann man jeden beliebigen Texteditor verwenden.
Für das pdfToolbox-Umfeld eignet sich „Sublime Text“ (erhältlich für Mac OS, Windows und Linux.) besonders gut, weil das Programm mit der Darstellung von Ordnern und PDF-Dateien gut zurechtkommt.
Hilfreiche Code-Anweisungen im styles.css per Texteditor hinterlegen
Default Margins und Paddings anpassen
Alle folgenden Optimierungen beziehen sich auf die für Place Content angepasste Darstellung von Elementen und finden in einer der referenzierten CSS Dateien, z.B. in der styles.css statt.
Viele HTML-Elemente verwenden voreingestellte Margins (Ränder) und Paddings (Füllungen). Dies führt dazu, dass z.B. bei Positionierungen von Elementen immer ein Abstand zwischen diesen Elementen vorhanden ist. Um das zu vermeiden und für vorhersehbarere Ergebnisse zu sorgen, sollte man per CSS eventuell auftretende Margin-/Padding-Werte „größer als 0“ auf „0“ setzen.
Der folgende CSS-Code setze alle Werte für Margins und Paddings auf 0:
* {
margin: 0;
padding: 0;
}(* ist der universelle CSS-Selector)
Background-Farbe auf Transparent setzen
Standardmäßig ist die Die Hintergrundfarbe in HTML Weiß, und zwar RGB-Weiß; was im PDF-Umfeld für die Print-Ausgabe nicht gewünscht ist.
Normalerweise ist bei der Platzierung von HTML Objekten ein solcher Hintergrund unerwünscht. Der Code lautet hier:
* {
background-color: transparent;
}Im Prinzip das Gleiche, aber doch etwas spezifischer ist es, wenn man den Background nur im Bereich body transparent stellt:
body {
background-color: transparent;
}Beides wird in der Regel zu den gleichen Ergebnissen führen.
Die Größe der Box
Jedes HTML-Element ist eine Box, die - wie oben gesagt - durch Margin und Padding in der Regel deutlich größer ist, als das eigentliche Element.
Alle Angaben im CSS für Höhe und Breite (in width und height) beziehen sich aber nur auf das Element als solches; zusätzliche Margins und Paddings werden nicht berücksichtigt. Beim Umgang mit Print Content ist es aber häufig wünschenswert, diese Angaben für das komplette Element, also incl. Padding, Linienstärke und Margin machen zu können. Das ist natürlich nur dann notwendig, wenn diese für ein Element nicht wie oben beschrieben auf 0 gesetzt sind.
Damit man die gewünschten Werte für Höhe und Breite nicht ausrechnen muss, kann man dafür im CSS eine Anweisung hinterlegen.
Der CSS-Code lautet:
* {
box-sizing: border-box;
}Diese Anwendung wirkt sich dann wieder auf alle Elemente auf einer HTML Seite aus.
Im Ergebnis werden die Werte für Höhe und Breite auf die gesamte Border-Box inklusive Margins und Paddings gemessen.
Beispiel mit vorbereiteten HTML Templates
Die folgende Zip-Datei enthält eine Reihe von relevanten HTML-Vorlagen, die heruntergeladen und als Referenz/Beispiel verwendet werden können:
Den Ordner „HTMLTemplates“ für pdfToolbox zugänglich machen
Entpacken Sie die heruntergeladene ZIP-Datei und öffnen Sie pdfToolbox.
Im Bereich „Korrekturen“ können Sie über das Flyout-Menü eine neue Korrektur anlegen. Wählen Sie den Korrektur-Typ „Inhalte auf Seite platzieren“. Über „Ordner“ lässt sich im Aufklappmenü der „Ordner mit den Konfigurationsdateien öffnen“.
Hierhin verschieben/kopieren Sie aus dem vorher entpackten Ordner „HTMLTemplates“ Ordner 01 bis 09. Diese enthalten vorbereitete CSS-Styles, Skripte und weiteres mehr.
Dateien in „HTMLTemplates“
Wie eingangs erwähnt, empfiehlt sich als Texteditor die Anwendung Sublime Text. Um einen Überblick über Dateien und die Orderstruktur zu bekommen, ziehen Sie den/die jeweils gewünschten Ordner in das Sublime-Text-Fenster.
Ausgewählte Dateien im Ordner 01
Die Datei styles.css enthält alle Codezeilen, die zur Vorbereitung hilfreich sind (Paddings und Margins auf „0“ gesetzt; Box-Sizing = Border-Box für leichteres Berechnen von Platzierungen sowie transparenter Hintergrund).
In der index.html interessiert hier vor allem der Bereich Body: Hier ist der Text „Penguins“ hinterlegt, der bei der Durchführung der Korrektur auf dem geöffneten PDF platziert wird.
Korrektur anlegen und ausführen
- Legen Sie wie gewohnt eine neue Korrektur an.
- Wählen sie den Korrektur-Typ „Inhalte auf Seite platzieren“ aus.
- Unter Ordner wählen Sie den Ordner 01 aus.
- Speichern Sie die Korrektur unter einem anschaulichen Namen mit OK.
Tipp: Um den Effekt gut zu sehen, dass pdfToolbox standardmäßig ein PDF im DIM-A4-Format auf das geöffnete PDF-Dokument platziert, sollten Sie als zu bearbeitendes PDF eines im Format größer als DIN A4 verwenden.
Wählen Sie die neu eingerichtete Korrektur aus und starten Sie diese.
Je nachdem, welche Platzierungsparameter Sie im pdfToolbox-Dialog ausgewählt haben (links unten, rechts oben, Mitte etc. sowie Bezugsrahmen CropBox, TrimBox etc.), wird der Text „Penguins“ (links oben innerhalb der intern vorgegeben DIN-A4-Seite) auf das geöffnete PDF gelegt.
Dreimal platziert: In der Abbildung wurde „Penguins“ auf einem PDF-Dokument in A3-Größe (plus Anschnitt und Infobereich) unten links, in der Mitte und oben rechts bezüglich der CropBox platziert.
Der grüne Rahmen, der die intern verwendete A4-Seite zeigt, ist nachträglich zur Verdeutlichung zur Abbildung hinzugefügt worden.