Seitenumbruch in Zeile erfolgt nicht

[Anja]

Hallo,

ich habe wenig Ahnung von html, kann aber ganz gut Hilfetexte annehmen. Ich habe eine Tabelle mit mehreren Zeilen. Wenn sie vom Programm zum pdf umgewandelt wird, erfolgt kein Seitenumbruch innerhalb der Zeile. Das sieht bei Zeilen mit viel Text blöd aus. Die erste Seite ist nur halb beschrieben und die komplette nächste Zeile steht auf der zweiten Seite. Das möchte ich nicht. Der Seitenumbruch innerhalb der Zeile wird verhindert, obwohl ich das nirgends festgelegt habe (soweit ich weiß). Bei meiner online-Recherche habe ich nur Beiträge gefunden, die helfen, Seitenumbrüche zu vermeiden. Ich möchte sie aber haben, nämlich dort, wo die Seite zuende ist, egal ob mitten im Satz oder nicht. Der Inhalt der Zeile ist variabel, sodass der Seitenumbruch erfolgen muss, wenn die A4-Seite zuende ist. Ich brauche keine Wiederholung der Überschrift, einfach nur einen Seitenumbruch innerhalb der Zeile. Wie geht das bitte?

Vielen Dank.

[Der Martin]

Hallo Anja,

ich habe wenig Ahnung von html

das ist zunächst mal nicht schlimm ...

kann aber ganz gut Hilfetexte annehmen.

... das ist dagegen sehr gut.

Ich habe eine Tabelle mit mehreren Zeilen. Wenn sie vom Programm zum pdf umgewandelt wird, erfolgt kein Seitenumbruch innerhalb der Zeile. Das sieht bei Zeilen mit viel Text blöd aus. Die erste Seite ist nur halb beschrieben und die komplette nächste Zeile steht auf der zweiten Seite.

Verstehe ich das richtig, dass du eine Tabelle mit sehr viel Text in einer einzelnen Zelle (td-Element) hast? Dann würde ich an dieser Stelle nämlich bezweifeln, dass eine Tabelle hier wirklich das geeignete Element ist. Da du keine Beispielseite verlinkt hast, kann ich das nicht beurteilen.

Das möchte ich nicht. Der Seitenumbruch innerhalb der Zeile wird verhindert, obwohl ich das nirgends festgelegt habe (soweit ich weiß).

Die Festlegung kann auch im Default-Stylesheet des Browsers für tr- oder td-Elemente getroffen worden sein. Möglich, dass ein

tr, td { page-break-inside: auto; }

in deinem Stylesheet schon hilft.

Bei meiner online-Recherche habe ich nur Beiträge gefunden, die helfen, Seitenumbrüche zu vermeiden.

Ja, und vielleicht hat der Hersteller deines Browsers gemeint, es sei generell zu vermeiden, dass eine Tabellenzelle durch einen Seitenumbruch zerrissen wird. Ist ja in den meisten Fällen auch richtig.

Live long and pros healthy,
 Martin

[Anja]

Hallo Martin,

vielen Dank für die Antwort. Es handelt sich um eine browser-basierte Anwendung, ein Vertragsmanagement. Aus den erfassten Daten soll ein Bericht erstellt werden. Dieser Bericht ist ähnlich wie ein Lebenslauf aufgebaut, daher haben wir die Form einer Tabelle gewählt, damit die unterschiedlichen Themen schick untereinander stehen. In dem Dokument-Designer gibt es es paar Optionen. Aber Einstellungen wie die horizontale Textausrichtung, die feste Spaltenbreite usw. geht nur über den Quellcode, also in html. Mit Hilfe des www habe ich auch schon ganz viele Befehle gefunden, die geholfen haben, und dabei schon einiges über html gelernt und das Grundprinzip begriffen. Nur eben das mit dem Seitenumbruch nicht. Da die erfassten Daten teilweise recht umfangreich sind, passt es eben nicht immer auf eine Seite beim generieren des pdf. Und da ausgerechnet in der letzten Zeile manchmal viel Text steht, sieht es dann blöd aus, wenn dort der Seitenumbruch "zu früh" kommt. Das mit dem "Default-Stylesheet des Browsers" geb ich mal an die IT weiter. Damit kann ich nämlich nichts anfangen.

LG

[Der Martin]

Hallo,

Und da ausgerechnet in der letzten Zeile manchmal viel Text steht, sieht es dann blöd aus, wenn dort der Seitenumbruch "zu früh" kommt.

ebenso blöd sieht es aus, wenn nur noch eine Zeile nicht mehr passt und dann auf die nächste Seite kommt. Im Schriftsetzer-Jargon nennt man diese verlorenen Zeilen, die allein auf der Folgeseite stehen, Hurenkinder.
Es gibt auch das Gegenteil, also dass ein neuer Absatz anfängt und nur noch die erste Zeile auf die Seite passt, der Rest des Absatzes dann auf die nächste Seite rutscht. Das nennt man dann Schusterjungen.

Gängige Textverarbeitungssysteme erkennen solche Effekte und sorgen dann dafür, dass wenigstens zwei (manchmal auch drei) Zeilen am unteren oder oberen Seitenrand zusammenbleiben. Eure Browser/PDF-Lösung könnte das nicht, wenn man erlaubt, dass innerhalb einer Zelle ein Umbruch stattfinden darf.

Das mit dem "Default-Stylesheet des Browsers" geb ich mal an die IT weiter. Damit kann ich nämlich nichts anfangen.

Okay. Ich wusste nicht, wie ich deine Kenntnisse einschätzen muss. Jeder Browser hat quasi eingebaute Voreinstellungen für die Formatierung der einzelnen HTML-Elemente. Die bewirken z.B., dass Überschriften (h1 bis h6) anders formatiert sind als Fließtext (meist größer, oft fett und/oder kursiv), oder dass Links blau und unterstrichen sind, oder Listenpunkte (li) eingerückt. All diese Formatierungen gelten auch ohne dass der Autor ein eigenes Stylesheet einbindet, und das nennt man im allgemeinen das Browser-Stylesheet.

Übrigens gibt es weder in HTML noch in CSS Befehle - in HTML gibt es Elemente und Attribute, in CSS Regeln. Aber das ist jetzt Erbsenzählerei.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Martin,

Hurenkinder ... Schusterjungen.

Hurenkinder heißen auch Witwen, weil sie ihren Anschluss verloren haben. Das sind zu wenige Zeilen eines Absatzes, die auf die Folgeseite umbrechen.

Schusterjungen heißen auch Waisenknaben, weil sie vorwitzig eine Seite zu früh erscheinen.

Dementsprechend sind die CSS Eigenschaften benannt, mit denen man das kontrollieren kann: widows für die Hurenkinder und orphans für die Schusterjungen. Sie geben an, wieviele Zeilen mindestens beieinander bleiben sollen. Der Default ist ZWEI, d.h. eine leichte Absatzkontrolle findet automatisch statt. Wenn man den richtigen Browser verwendet - Firefox kennt das nicht. Chrome und Safari schon. Sogar der Internet Explorer kann das. Nur das Füchslein hält nichts davon.

Wenn man ein <td> Element verwendet mit reinem Text darin, muss man widows und orphans auf dem td Element setzen. Ist der Text darin mit anderen Elementen (z.B. p) gegliedert, muss man die Eigenschaften dafür setzen. Sie werden nur auf den innersten Container angewendet. Das ist ein bisschen blöd wenn man eine Liste hat mit einzeiligen <li> Elementen. Da kann ein einzelner Listenpunkt auf die Folgeseite rutschen. DAFÜR nimmt man dann page-break-before: avoid auf dem letzten li Element.

Drucksatz im Browser ist eine Wissenschaft für sich und wurde früher schlecht unterstützt. Es ist schon besser geworden, aber es gibt noch einiges an Arbeit. Vor allem für Füchse und ihre Abkömmlinge…

Rolf

[Der Martin]

Hallo Rolf,

Hurenkinder heißen auch Witwen, weil sie ihren Anschluss verloren haben. Das sind zu wenige Zeilen eines Absatzes, die auf die Folgeseite umbrechen.

Schusterjungen heißen auch Waisenknaben, weil sie vorwitzig eine Seite zu früh erscheinen.

TIL: Widows and Orphans.

Danke, das wusste ich tatsächlich noch nicht.

Live long and pros healthy,
 Martin

[Matthias Scharwies]

Servus!

Hallo Rolf,

Hurenkinder heißen auch Witwen, weil sie ihren Anschluss verloren haben. Das sind zu wenige Zeilen eines Absatzes, die auf die Folgeseite umbrechen.

Schusterjungen heißen auch Waisenknaben, weil sie vorwitzig eine Seite zu früh erscheinen.

TIL: Widows and Orphans.

Danke, das wusste ich tatsächlich noch nicht.

Warum verlinkt niemand auf das Wiki:

CSS/Tutorials/Print-CSS/Seitenformate#Schusterjungen_und_Hurenkinder

bzw. überprüft, ob dort alles aktuell ist.

Herzliche Grüße

Matthias Scharwies

[Der Martin]

Hallo Matthias,

TIL: Widows and Orphans.

Danke, das wusste ich tatsächlich noch nicht.

Warum verlinkt niemand auf das Wiki:

hab ich doch!

CSS/Tutorials/Print-CSS/Seitenformate#Schusterjungen_und_Hurenkinder

Den Beitrag habe ich systematisch-hierarchisch nicht gefunden.

Live long and pros healthy,
 Martin

[Matthias Scharwies]

Servus!

Hallo Matthias,

TIL: Widows and Orphans.

Danke, das wusste ich tatsächlich noch nicht.

Warum verlinkt niemand auf das Wiki:

hab ich doch!

Sorry, brauche Urlaub!

CSS/Tutorials/Print-CSS/Seitenformate#Schusterjungen_und_Hurenkinder

Den Beitrag habe ich systematisch-hierarchisch nicht gefunden.

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

ist es nicht. Ich kaufe das I. (done)

Rolf

[Rolf B]

Hallo Anja,

es gibt außer HTML - was die Struktur des Dokuments beschreibt und die Inhalte mitbringt - auch die Layout-Ebene. Diese wird durch die Stylesheets beschrieben, CSS.

Ich nehme an, Du verwendest HTML Tabellen für's Layout.

<table>
  <tr>
     <td>Erste Spalte</td>
     <td>Zweite Spalte</td>
  </tr>
  <tr>
     <td>Erste Spalte</td>
     <td>Zweite Spalte</td>
  </tr>
</table>

Wenn ich so eine Seite bei mir mache (mit genügend Inhalt drin, natürlich), wird sie so wie von Dir gewünscht dargestellt, d.h. die Seite wird voll gemacht, so weit es geht, und dann geht es auf der nächsten Seite weiter.

Das heißt: Das Verhalten, das Du erlebst, ist kein Standardverhalten von Chrome oder Firefox. Sondern von diesem Vertragsmanagement hinzugefügt.

Wenn ich über das Stylesheet dem table-Element oder dem tr-Element (nicht dem td Element!) die Eigenschaft break-inside:avoid gebe (page-break-inside wurde umbenannt), habe ich den von Dir beschriebenen Effekt: Die komplette Row verschiebt sich auf die Folgeseite, wenn nicht alles passt.

Dem musst Du mit der Einstellung auto entgegen wirken. Zur Sicherheit setzt Du das vier mal: den alten und den neuen Namen für die Eigenschaft, und für table und tr:

table, tr {
   page-break-inside: auto;
   break-inside: auto;
}

Das Komma ist hier sowas wie ein "oder". Diese Regel besagt: Wenn ein HTML Element ein table oder ein tr Element ist, dann wende die Styles an, die in den geschweiften Klammern stehen. Viele Informationen zu CSS und Stylesheets findest Du im Selfhtml Wiki.

Die Frage ist nur, wie Du diese Style-Regel unterbringen kannst. Schreibst Du vollständiges HTML, inclusive <head> Bereich? Dann setzt Du diese Regel in ein <style> Element. Oder hast Du die Möglichkeit, ein eigenes Stylesheet (eine .css Datei) einzubinden? Dann kannst Du das dort machen.

Oder erzeugst Du nur ein Stück vom <body>-Bereich? Dann müsstest Du in den sauren Apfel beißen und die CSS Eigenschaften mit dem style-Attribut direkt an das table-Element oder die tr-Elemente hängen:

<table style="break-inside: auto; page-break-inside: auto">

Ob es in der Variante mit style-Attribut genügt, die Eigenschaften für das table Element zu setzen, weiß ich nicht. Sie werden vom table Element an die tr Elemente vererbt, und wenn irgendein Stylesheet diese Eigenschaften für tr Elemente setzt, hat das Vorrang. Das musst Du selbst herausfinden.

Ein Webentwickler würde sich dafür die Seite im Browser anzeigen, die Entwicklerwerkzeuge öffnen (F12 Taste oder Strg+Umschalt+I) und dann die table- und tr-Elemente inspizieren (in Chrome unter "Elements", im Firefox unter "Inspektor"). Da kann man sehen, welche Styles für die Elemente gesetzt werden, wo sie herkommen und welche überschrieben werden.

Rolf