Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 06.07.2019, 12:12
2U1C1D3 2U1C1D3 ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.07.2019
Beiträge: 3
2U1C1D3 befindet sich auf einem aufstrebenden Ast
Standard CSS-Stylesheet für mpdf richtig konfigurieren

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!
Mit Zitat antworten
Sponsored Links