CSS-Stylesheet für mpdf richtig konfigurieren

2U1C1D3 · #1 (**permalink**) 06.07.2019, 12:12

Hallo zusammen!

Ich habe meine Frage bereits an anderer Stelle schon gestellt, habe aber leider keine Antwort bekommen. Ich hoffe, ihr könnt mir helfen!?

Mein System um das es geht:
Server: Ubuntu 16.04.2 LTS Server
DokuWiki: 2018-04-22b "Greebo"
dw2pdf: 2019-06-19
mpdf: ???

Mein Problem:
Ich habe in diesem DokuWiki Ausbildungsunterlagen zusammengestellt, welche sowohl online (eben im Wiki), als auch offline in PDF-Form (über das Plugin dw2pdf) abgerufen werden sollen.

Meine Vorgabe dazu ist allerdings, dass die PDF-Ausgabe ein bestimmtes Design bekommt. Mit HTML habe ich zumindest so viel Ahnung, dass ich mir in eine Seite Links einfügen kann und die Farbe ändern kann.

Das war's dann aber auch schon. Von CSS, und somit auch vom Zusammenspiel CSS / HTML, habe ich überhaupt keine Ahnung.

Zunächst habe ich versucht mein Problem unter Zuhilfenahme von Seiten wie mpdf, hier insbesondere supported CSS in Griff zu bekommen. Leider stoße ich hier schnell an meine Grenzen, da ich die Zusammenhänge zwischen CSS und HTML nicht (er)kenne. Auch die mir an anderer Stelle empfohlene Seite css4you hat mir nicht so wirklich geholfen. Ich habe dadurch zwar den einen oder anderen Zusammenhang erkannt und die Attribute besser kennen gelernt, das war's aber auch schon.

Laut Manual wird die PDF-Ausgabe über ein CSS-Stylesheet gestaltet, welches die Datei "style.css" und Dateien wie "header.html" und "footer.html" benutzt. Bzw. das Stylesheet resultiert daraus.

Die Dateien beinhalten folgenden Code (die footer.html habe ich mir gespart - die soll nicht verändert werden):
Inhalt der style.css:

Code:

table.pdfheader {
     font-size: 8pt;
     border-collapse: collapse;
     border-bottom: 1px solid #000000;
     clear: both;
}

table.pdffooter {
     font-size: 8pt;
     border-collapse: collapse;
     border-top: 1px solid #000000;
     clear: both;
}

/* Table of Content -- see http://mpdf1.com/manual/index.php?tid=243 */ div.mpdf_toc { } a.mpdf_toc_a {
     color: black; /* links black as well */ }
/* Whole line level 0 */
div.mpdf_toc_level_0 {
     line-height: 1.5;
     margin-left: 0;
     padding-right: 1em; /* padding-right should match e.g <dottab outdent="2em" /> 0 is default */ }
/* Title level 0 - may be inside <a> */
span.mpdf_toc_t_level_0 {
}
/* Page no. level 0 - may be inside <a> */
span.mpdf_toc_p_level_0 {
}
/* Whole line level 1 */
iv.mpdf_toc_level_1 {
     margin-left: 1em;
     text-indent: -1em;
     padding-right: 1em; /* padding-right should match <dottab outdent="2em" /> 2em is default */ }
/* Title level 1 */
span.mpdf_toc_t_level_1 {
}
/* Page no. level 1 - may be inside <a> */
span.mpdf_toc_p_level_1 {
}
/* level 2 */
div.mpdf_toc_level_2 {
     margin-left: 2em;
     text-indent: -1em;
     padding-right: 1em; /* padding-right should match <dottab outdent="2em" /> 2em is default */ }
span.mpdf_toc_t_level_2 {}
span.mpdf_toc_p_level_2 {}

/* level 3 */
div.mpdf_toc_level_3 {
     margin-left: 3em;
     text-indent: -1em;
     padding-right: 1em; /* padding-right should match <dottab outdent="2em" /> 2em is default */ }
span.mpdf_toc_t_level_3 {}
span.mpdf_toc_p_level_3 {}

/* level 4 */
div.mpdf_toc_level_4 {
     margin-left: 4em;
     text-indent: -1em;
     padding-right: 1em; /* padding-right should match <dottab outdent="2em" /> 2em is default */ }
span.mpdf_toc_t_level_4 {}
span.mpdf_toc_p_level_4 {}

In Zeile 4 des Codes ist definiert wie die waagrechte Linie unterhalb der Kopfzeile aussehen soll. Diese ist, wie im Code angegeben, 1px stark und schwarz. Ich brauche aber an dieser Stelle eine mehrfarbige Linie, ähnlich einer Deutschlandfahne. Also drei verschiedene Farben ohne Abstand untereinander. Eine Lösung für die Farben nebeneinander habe ich inzwischen. Bringt mich aber nicht weiter, da ich die Farben ja untereinander brauche...

Wie geht denn das???

Inhalt der header.html:

HTML-Code:

<table width="100%" class="pdfheader">
     <tr>
         <td style="text-align: left">@DATE@</td>
         <td style="text-align: center">@PAGE@/@PAGES@</td>
         <td style="text-align: right">@WIKI@</td>
     </tr>
</table>

Ich möchte nun dort wo in der Datei header.html das Datum "@DATE@" angezeigt wird ein Logo darstellen und das Datum dafür etwas weiter nach rechts rutschen. Da ja meines Wissens das Tag "<td>" für eine "Tabellenspalte" steht, und das Datum durch die Aussage "text-align: left" in dieser Spalte ganz nach links gerutscht wird, habe ich mir folgende Lösung gedacht:
Inhalt der neuen header.html:

HTML-Code:

<table width="100%" class="pdfheader">
     <tr>
         <td><p><img src="logo.png" width="70" height="100" align="bottom" alt="DAS Logo">@DATE@</p></td>
         <td style="text-align: center">@PAGE@/@PAGES@</td>
         <td style="text-align: right">@WIKI@</td>
     </tr>
</table>

Pustekuchen, da kommt aber nix. Weder das Datum, noch das Bild... Das Bild liegt übrigens im gleichen Verzeichnis wie die header.html.

Kann mir einer von euch einen Denkanstoß geben oder mir erklären was ich falsch mache? Ich erwarte ja nicht dass mir das Händchen von A-Z geführt wird. Aber da mir der Code im Editor nicht beanstandet wird, siehts für mich aus als hätte ich einfach nur einen Denkfehler in der Sache (mit dem HTML)...

So nebenbei noch die Frage zur Zeile 1 aus dem HTML-Code:
Gebe ich durch den Eintrag "class="pdfheader" "in der HTML-Datei auch zugleich eine Referenz für den Eintrag "table.pdfheader" aus der style.css an?

Dankeschön!

protonenbeschleuniger · #2 (**permalink**) 08.07.2019, 21:25

um dir helfen zu können, müsste man erkennen wo das Problem liegt. Da dies aber mit ein paar Codefragmenten nur schwer geht, ist vermutlich die Resonanz nicht so gut.

Mir wird beim lesen aber auch nicht ganz klar, wie wir dir helfen können.

Eine 3 farbige Linie geht nicht mit CSS.

Und bei den anderen Fragen ist es nicht ganz klar, ob es dir um die Struktur geht oder um das Aussehen und wie wir dabei helfen könnnen, denn wir kennen das aussehen nicht und können das uns auch so nicht vorstellen. Du müsstest uns Code zeigen mit dem wir das Problem sehen können.

cloned · #3 (**permalink**) 09.07.2019, 08:06

Zitat:

Zitat von protonenbeschleuniger

Eine 3 farbige Linie geht nicht mit CSS.

Mit linear-gradient sollte das doch machbar sein?

protonenbeschleuniger · #4 (**permalink**) 09.07.2019, 08:40

Dachte ich auch kurz dran. Ich habe mich aber tatsächlich nicht mit allen Optionen genau beschäftigt (Verläufe sind so old school) und wusste tatsächlich nicht das man mehr als 2 Farben angeben kann.

HTML-Code:

<div style="background-image: linear-gradient(green 33%, yellow 33%, yellow 66%, red 66%);height:2em;"></div>

2U1C1D3 · #5 (**permalink**) 11.07.2019, 22:50

Zitat:

Zitat von protonenbeschleuniger

um dir helfen zu können, müsste man erkennen wo das Problem liegt. Da dies aber mit ein paar Codefragmenten nur schwer geht, ist vermutlich die Resonanz nicht so gut.

Danke erstmal für die Resonanz überhaupt!

Da ist aber genau mein Problem: Ich kenne mich mit der Thematik null aus und bin eigentlich nur der Endanwender...
Sag mir was ich Dir / euch noch anreichen muss damit ihr mir unter die Arme greifen könnt! Das Tool mpdf welches diese Dateien zur Anpassung der Ausgabe verwendet, ist ein Plugin eines DokuWikis. Aus den Anleitungen zum Plugin ist nur ersichtlich, dass diese Dateien zu modifizieren sind um das auszugebende PDF den eigenen Wünschen anzupassen. Wie mpdf selbst funktioniert - keine Ahnung

Um Dir die Frage nach Struktur und Aussehen zu beantworten: BEIDES

Die Art und Weise wie der Inhalt einer Wiki-Seite auf dem PDF dargestellt wird ist ok und kann im Wiki selbst über ein Plugin leicht modifiziert werden. Der Stil der ausgegebenen Seite, in diesem Fall also Kopf- und Fußzeile, sollen auf den Verfasser und die Organisation schließen lassen. Dazu werden Kopf- und Fußzeile jeweils mit einem dreifarbigen Strich vom Textkörper abgetrennt. Bei der Kopfzeile kommt hinzu, dass der Trenner auf der linken Seite des Dokument leicht von einem Logo überdeckt wird. Ob das Logo jetzt aber tatsächlich auf dem Strich drauf ist oder ob da ein paar Millimeter Abstand dazwischen sind ist egal.
Ich habe mir jetzt einfach provisorisch damit geholfen, dass ich hier zwei Bilder in eine Tabelle in der Datei "header.html" eingefügt habe. Das eine Bild ist das Logo, das andere ist der Strich. Im Anhang befindet sich das Tabellenresultat auf die Schnelle mit LibreOffice dargestellt - habe grad keinen Zugriff auf den Code der HTML-Datei.

Hierbei ergibt sich allerdings das Problem, dass ich die Vorgabe nur für ein DIN A4-Hochformat verwenden kann da ich ja mit Bildern arbeite.

Das mit dem linear-gradient werde ich so schnell wie möglich ausprobieren und Feedback geben!!!

protonenbeschleuniger · #6 (**permalink**) 12.07.2019, 07:48

Zitat:

Zitat von 2U1C1D3

Um Dir die Frage nach Struktur und Aussehen zu beantworten: BEIDES

Die Art und Weise wie der Inhalt einer Wiki-Seite auf dem PDF dargestellt wird ist ok und kann im Wiki selbst über ein Plugin leicht modifiziert werden. Der Stil der ausgegebenen Seite, in diesem Fall also Kopf- und Fußzeile, sollen auf den Verfasser und die Organisation schließen lassen. Dazu werden Kopf- und Fußzeile jeweils mit einem dreifarbigen Strich vom Textkörper abgetrennt. Bei der Kopfzeile kommt hinzu, dass der Trenner auf der linken Seite des Dokument leicht von einem Logo überdeckt wird. Ob das Logo jetzt aber tatsächlich auf dem Strich drauf ist oder ob da ein paar Millimeter Abstand dazwischen sind ist egal.
Ich habe mir jetzt einfach provisorisch damit geholfen, dass ich hier zwei Bilder in eine Tabelle in der Datei "header.html" eingefügt habe. Das eine Bild ist das Logo, das andere ist der Strich.

Ohne zu sehen, wie der HTML/CSS Code aussieht ist das nicht nachvollziehbar.

Es taucht aber eine weitere Frage auf, redest du von der Seite im Browser oder von dem PDF das erzeugt wird?

Wir können dir nur helfen bei dem, was im Browser angezeigt wird. Da ein PDF etwas komplett anderes ist, als ein HTML Dokument.

Wenn es darum geht was ein Programm daraus macht, müsstest du die Fragen anders formulieren und wäre hier auch vermutlich am falschen Platz, zumindest müsstest du dann jhemand finden, der sich damit auskennt.

2U1C1D3 · #7 (**permalink**) 12.07.2019, 11:39

Zitat:

Zitat von protonenbeschleuniger

Es taucht aber eine weitere Frage auf, redest du von der Seite im Browser oder von dem PDF das erzeugt wird?
Wir können dir nur helfen bei dem, was im Browser angezeigt wird. Da ein PDF etwas komplett anderes ist, als ein HTML Dokument.

Ja, es geht mir darum was als PDF raus kommt. Ich ging eigentlich schon davon aus, dass CSS=CSS ist und es sich bei HTML genauso verhält... Zumal ich ja mit meinem HTML-Provisorium weiter gekommen bin.
Nachdem Du aber ganz klar sagst, dass das was ich gepostet habe nur ein paar Codefragmente sind, bin ich auch am Ende mit meinem Latein. Ich habe nämlich keine Ahnung was noch fehlen soll, bzw. selbst wenn ich es wüsste, wo ich es finde

Dann sag ich aber trotzdem mal DANKE - vielleicht bringt mich ja wenigstens die Idee von cloned ein bisschen weiter!

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Firefox lädt Clipping Mask CSS nicht richtig bei Weiterleitung auf HTTPS Seite	TheRiddler1982	CSS	4	10.09.2015 16:29
CSS background-size richtig nutzen	Donaldi	CSS	2	08.08.2015 10:33
CSS - Galerie funktioniert in Chrome nicht richtig	adipics.de	CSS	1	11.05.2011 00:38
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Einbindung von frei erhältlichen Scripten - CSS Problem	DonL	CSS	1	22.01.2011 16:09