Von CSS Diskutieren Sie Incutio
TLDR: Seitenumbrüche werden von Browsern schlecht unterstützt (wahrscheinlich mit gutem Grund), daher liegt es meist am Seiten-Designer, sich damit auseinanderzusetzen. Für den Rest können Sie wenig tun, außer vielleicht das Kopieren in ein Dokument. Und C-Net stimmt zu.
Seitenumbrüche
Da die "Druckränder" als Webautor nicht unter Ihrer Kontrolle stehen, können Sie nicht garantieren, wie viel von einem Webdokument auf jeder Seite gedruckt wird und wo sich die Seitenumbrüche befinden. Sie variiert je nach Browser, Browsereinstellungen und Drucker des Benutzers. Auch die Basisschriftgröße und die Briefpapiergröße des Benutzers liegen außerhalb Ihrer Kontrolle. Sie sollten CSS verwenden, um die Position von Seitenumbrüchen zu beeinflussen (nicht zu steuern). CSS2.1 Kapitel 13 Paged Media ist eine wichtige Lektüre. Beachten Sie, dass CSS2.1 in diesem Kapitel einige Funktionen in CSS2 verwirft, die Browser niemals implementiert haben.
Die Unterstützung für die Seitenumbrücheigenschaften (z. B. Seitenumbruch innen) ist selbst in den neuesten Browsern schlecht. Die Hauptausnahme ist Opera (ab Opera 5), dessen Unterstützung sehr gut ist:
Schlimmer noch: Browser neigen dazu, Seiten an eindeutig inakzeptablen Stellen aufzubrechen (siehe auch den nächsten Absatz). Ich habe zum Beispiel Fälle gefunden, in denen Browser ein Bild auf mehreren Seiten zerstören. Tests auf meinen verschiedenen Websites deuten darauf hin, dass die Seitenumbrüche von Opera zwar nicht perfekt sind, jedoch deutlich robuster als die von Firefox oder IE.
Erics Artikel (siehe unten) erwähnt einen Fehler in Gecko (Mozilla) basierten Browsern bezüglich des Druckens von Float-Elementen. Dieser Fehler ist offenbar noch nicht behoben worden [im Juli 2009], dass schwebende Elemente am Ende der gedruckten Seite und manchmal nur auf einer Seite eines Dokuments, das gedruckt wird, abgeschnitten werden [Anmerkung 2]. Ich habe bei älteren Opera-Versionen (z. B. O7.21) ein ähnliches Problem beim Float-Chopping gefunden. In IE wurde ein anderer Fehler gemeldet. Wenn die Spitze eines Floated-Elements zufällig mit einem Seitenumbruch übereinstimmt, wird das Floated-Element überhaupt nicht gedruckt [Bestätigung: Rennan Rieke].
Vorgeschlagene Strategie für Seitenumbrüche
Die beste Richtlinie (sicherlich bis die Browser sich verbessern) besteht darin, ihnen eine Pause zu geben (ha!), Indem sie ihnen so viel Diskretion wie möglich bei der Wahl ihrer Haltepunkte einräumen. Sie haben besondere Probleme mit Side-by-Side-Elementen, z <div>. schwimmt; und Tabellen mit zwei oder mehr Spalten. Geeignete Strategien umfassen daher das Positionieren von Positionen <div>statisch; schwimmende Schwimmkörper; Tabellen, die für das Layout verwendet werden, in kürzere Tabellen aufteilen [Anmerkung 1]. Auch wenn die Seitenumbrücheigenschaften schlecht unterstützt werden, beschränken Sie die Browser nicht zu stark: Verwenden Sie den Wert "Vermeiden" so leicht wie möglich.
Browser mögen Floats beim Drucken wirklich nicht (siehe vorheriger Abschnitt). Die Problemumgehung besteht darin, schwebende Elemente (Float: none und vielleicht width: auto auch) nicht zu schweben. Wenn Sie beim Drucken ein schwebendes Element riskieren, wird möglicherweise über einen Seitenumbruch gedruckt (der Anfang eines schwebenden Elements ist in der aktuellen Zeile verankert). Abhängig von der Art des schwebenden Materials kann dies ein akzeptables Verhalten sein. Wenn nicht, können Sie nur mit Opera eine solche Aufteilung unterdrücken.
Wenn nur auf einer Seite Inhalte gedruckt werden müssen, z. B. in einem Formular, besteht die beste Chance darin, die Anzahl der Seiten deutlich zu verringern, so dass Sie einen guten Fehler (sic) haben. In Bezug auf das Briefpapierformat können Sie das internationale (ISO) A4-Format (für ein internationales Publikum) oder das US-Letter-Format (für ein ausschließlich US-amerikanisches Publikum) annehmen, obwohl es keine Garantie dafür gibt, welche Größe Benutzer verwenden. Fragen Sie sich jedoch, wie Sie reagieren würden, wenn Sie ein einseitiges Formular mit einem Textverarbeitungsprogramm erstellt hätten und ein sehbehinderter Benutzer nach einer Version mit großem Druck gefragt hätte. Wie immer bei Webdesign und CSS wird das Leben viel einfacher, wenn Sie nicht versuchen, mit dem Benutzer zu kämpfen, indem Sie auf Pixel-Perfektion oder garantierten Seitenumbrüchen bestehen. Das fließende Design gilt sowohl für Papier als auch für Bildschirm.