Druck-Style :: automatischer Umbruch eines Elements

NetBull

NetBull

Erfahrenes Mitglied
Hi,

ich sitze an einer Aufgabe die mir Kopfzerbrechen macht und möchte mich hier nur inspirieren lassen wie andere es angehen würden.

Das Problem: Ein Benutzer eines Web-Frontends soll in der Lage sein ein Schriftstück im Charakter eines Briefes aus drucken zu können. Der Briefkopf war recht einfach aber:

a) ich stelle die Größe eines Dokumentes mit margin-top von 2cm ein und wenn ich das mit einem Lineal nachmesse, dann ist das Margin nicht eingehalten.

b) Absolute Positionieriung eines Elementes von top 19cm ist auf dem Papier eher 20.3 cm.

c) das grösste Problem habe ich mit dem Umbruch. Ich möchte das ein Div Element bei einer bestimmten Größe unterbrochen wird, ein neues erstellt wird, das dann auf der Folgeseite wieder zwischen einem Header und einem Footer platziert wird. Auch bei dynamischer Länge des Textes.

Geht das überhaupt mit CSS?
Geht es mit JavaScript/Jquery?
Gibt es ein Framework das mich da optimal unterstützt?

Das Beispiel:

HTML: 
<doctype>
<html>
<head>
    <style>
       
        #LayOutWrapper{           
        }
       
        body {
            margin: 0px;
            padding: 0px;           
        }
       
        body, table{
            font-family: Verdana, Geneva, sans-serif;
            font-size: 12px;
        }
       
        .bordered{
            border: solid 1px black;   
        }
       
        .wrapper.left{
            float: left;
            width: 8cm;
            margin-left: 15mm;           
        }
       
        .wrapper.right{
    width: 7cm;
    padding-top: 20mm;
    margin-right: 15mm;
    float: right;
        }
       
        #DocumentTitle{
    text-align: center;
    font-size: x-large;
    line-height: 2cm;
    vertical-align: middle;
    padding-top: 17mm;
    padding-bottom: 3mm;
    font-weight: bolder;
    color: #999;
        }
       
        #DocumentSender{
    padding-top: 9mm;
    margin-bottom: 1mm;
    font-size: 10px;
    text-align:center;
    border-bottom: 1px solid #999;
        }
       
        #DocumentAddress{
            padding-top: 3mm;
            padding-left: 1cm;
        }
       
        #DocumentAddress p{
            padding: 0px;
            margin: 0px;
        }
       
        #DocumentAddress p.special{
            padding-top: 3mm;
        }
       
        #DocumentSubject{
            font-weight: bold;
            vertical-align: text-bottom;
            padding-left: 20mm;
            padding-top: 17mm;
            padding-bottom: 3mm;
        }
           
        #DocumentContent{
            padding-left: 20mm;
            padding-right: 20mm;
        }
       
        #DocumentContent p:first-of-type{
            padding-bottom: 4mm;
        }
       
        #DocumentContent p:last-of-type{
            padding-top: 4mm;
        }
       
        #DocumentContent p{
            padding-bottom: 1mm;
            text-align: justify;
        }
           
        .SmallLine{
            width: 5mm;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            border-bottom-color: #999;
            margin-left: 10mm;
        }
       
        #UpperSmallLine {           
        }
       
        #BottomSmallLine{
            z-index: 100;
            position: absolute;
            top: 19cm;
        }
       
        .endFloat{
            clear: both;
            height: 0px;
            width: 0px;
            padding: 0px;
            margin: 0px;
            border: none 0px;
        }
    </style>
   
</head>
<body>

<div id="LayOutWrapper">
    <div id="LayoutHeader">
        <div class="wrapper left">
            <div id="DocumentTitle"> Das Document</div>
          <div id="DocumentSender">Hans Muster, Test-Strasse 123, 12345 Irgendwo</div>
            <div id="DocumentAddress"><p>Kompletter Name</p><p>z.Hd.: </p><p>Strasse & Nummer</p><p class="special">PLZ Wohnort</p></div>
        </div>
        <div class="wrapper right"><table width="100%">
            <tr><td>Datum</td><td>:</td><td align="right">01.02.2013</td></tr>
            <tr><td>Unser Zeichen</td><td>:</td><td align="right">DX-A6R-GH1Z</td></tr>
            <tr><td></td><td></td><td align="right"></td></tr>
            <tr><td>Ihre Zeichen</td><td>:</td><td align="right">12/345-999</td></tr>
            <tr><td></td><td></td><td align="right">13/345-321</td></tr>
            <tr><td></td><td></td><td align="right">A/1C1-666</td></tr>
            <tr><td></td><td></td><td align="right"></td></tr>           
            <tr><td colspan="3"><b>Meine Bankverbindung</b></td></tr>
            <tr><td>Inhaber</td><td></td>
            <td align="right">Hans Muster</td></tr>
            <tr><td>IBAN</td><td></td>
            <td align="right">DE-1234567890</td></tr>
            <tr><td>BIC</td><td></td>
            <td align="right">BICXX123</td></tr>
        </table></div>
        <div class="endFloat"></div>
  </div>
  <div id="DocumentSubject">Der Betreff des Schriftst&uuml;ckes</div>
  <div id="UpperSmallLine" class="SmallLine"></div>
  <div id="BottomSmallLine" class="SmallLine"></div>
  <div id="DocumentContent"><p>Sehr geehrte Damen und Herren,</p>
    <p>das ist dann der Inhalt des Schriftst&uuml;ckes der mir Probleme macht. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean feugiat cursus lacinia. In laoreet nisi ligula, non luctus nibh pretium et. Quisque et augue massa. Sed non laoreet tellus, ut blandit nisl. Phasellus rutrum tincidunt volutpat. Nam ullamcorper imperdiet eros eget sagittis. Aenean et tristique augue. Nunc molestie fermentum est, eu faucibus ex molestie vel. Sed libero nisi, feugiat sit amet nibh eget, lobortis scelerisque dolor. Mauris porta augue eros, eu posuere elit semper ac.</p>
<p> Ut vel venenatis ligula, a condimentum lacus. Sed ac mauris nec mi consequat ullamcorper. Nunc sagittis ex libero, sed euismod sem lobortis et. Quisque nec ullamcorper libero, at auctor purus. Nullam hendrerit sit amet diam blandit consequat. Pellentesque risus nunc, euismod et sapien et, hendrerit lobortis lectus. In ultricies dignissim lobortis. Integer ut porta nisi, eleifend convallis nibh. Aliquam erat volutpat. Nunc vel ullamcorper nibh.</p>
    <p> Duis eget enim non erat hendrerit condimentum. In hac habitasse platea dictumst. Fusce ornare turpis in mi dignissim, condimentum euismod urna vehicula. In accumsan dignissim lorem, sed interdum augue malesuada vitae. Quisque metus arcu, congue et tincidunt sed, dapibus eleifend purus. Pellentesque sodales velit tellus, mollis mollis diam malesuada at. Cras vestibulum orci quis ex euismod, vel ultricies elit dictum. Aenean egestas magna eu ligula vestibulum scelerisque. Proin ullamcorper ligula vitae egestas sagittis. Nullam lobortis quam quis enim porttitor cursus. Aenean sit amet dolor odio. Aliquam et purus eu felis cursus gravida in non tellus. Maecenas id eleifend dui.</p>
    <p> Proin a nisi eget nisi hendrerit bibendum. Integer bibendum, elit ac commodo lobortis, turpis tellus gravida nisi, a pulvinar orci elit tincidunt felis. Pellentesque ut felis sit amet urna ornare imperdiet vitae eget augue. Vivamus non est vehicula, accumsan justo sed, lobortis metus. Sed vitae tortor suscipit, commodo lorem at, imperdiet nulla. Sed semper ligula in felis vehicula sagittis. Aenean ultrices accumsan lectus in aliquam. Vestibulum malesuada urna vel faucibus imperdiet. Donec ac nunc nulla. Integer auctor consectetur quam, sed dapibus diam tristique sit amet. Nullam mollis pellentesque ante quis dapibus. In tempor est purus, vehicula pretium ipsum placerat sed. Morbi efficitur fringilla quam, quis lobortis orci interdum a. Nulla eu erat non nulla mattis mollis. Nunc vitae lorem vitae dui iaculis cursus ac eu augue. Morbi non egestas lorem.</p>
    <p>Duis eget enim non erat hendrerit condimentum. In hac habitasse platea dictumst. Fusce ornare turpis in mi dignissim, condimentum euismod urna vehicula. In accumsan dignissim lorem, sed interdum augue malesuada vitae. Quisque metus arcu, congue et tincidunt sed, dapibus eleifend purus. Pellentesque sodales velit tellus, mollis mollis diam malesuada at. Cras vestibulum orci quis ex euismod, vel ultricies elit dictum. Aenean egestas magna eu ligula vestibulum scelerisque. Proin ullamcorper ligula vitae egestas sagittis. Nullam lobortis quam quis enim porttitor cursus. Aenean sit amet dolor odio. Aliquam et purus eu felis cursus gravida in non tellus. Maecenas id eleifend dui.</p>
    <p> Proin a nisi eget nisi hendrerit bibendum. Integer bibendum, elit ac commodo lobortis, turpis tellus gravida nisi, a pulvinar orci elit tincidunt felis. Pellentesque ut felis sit amet urna ornare imperdiet vitae eget augue. Vivamus non est vehicula, accumsan justo sed, lobortis metus. Sed vitae tortor suscipit, commodo lorem at, imperdiet nulla. Sed semper ligula in felis vehicula sagittis. Aenean ultrices accumsan lectus in aliquam. Vestibulum malesuada urna vel faucibus imperdiet. Donec ac nunc nulla. Integer auctor consectetur quam, sed dapibus diam tristique sit amet. Nullam mollis pellentesque ante quis dapibus. In tempor est purus, vehicula pretium ipsum placerat sed. Morbi efficitur fringilla quam, quis lobortis orci interdum a. Nulla eu erat non nulla mattis mollis. Nunc vitae lorem vitae dui iaculis cursus ac eu augue. Morbi non egestas lorem.</p>
    <p>Duis eget enim non erat hendrerit condimentum. In hac habitasse platea dictumst. Fusce ornare turpis in mi dignissim, condimentum euismod urna vehicula. In accumsan dignissim lorem, sed interdum augue malesuada vitae. Quisque metus arcu, congue et tincidunt sed, dapibus eleifend purus. Pellentesque sodales velit tellus, mollis mollis diam malesuada at. Cras vestibulum orci quis ex euismod, vel ultricies elit dictum. Aenean egestas magna eu ligula vestibulum scelerisque. Proin ullamcorper ligula vitae egestas sagittis. Nullam lobortis quam quis enim porttitor cursus. Aenean sit amet dolor odio. Aliquam et purus eu felis cursus gravida in non tellus. Maecenas id eleifend dui.</p>
    <p> Proin a nisi eget nisi hendrerit bibendum. Integer bibendum, elit ac commodo lobortis, turpis tellus gravida nisi, a pulvinar orci elit tincidunt felis. Pellentesque ut felis sit amet urna ornare imperdiet vitae eget augue. Vivamus non est vehicula, accumsan justo sed, lobortis metus. Sed vitae tortor suscipit, commodo lorem at, imperdiet nulla. Sed semper ligula in felis vehicula sagittis. Aenean ultrices accumsan lectus in aliquam. Vestibulum malesuada urna vel faucibus imperdiet. Donec ac nunc nulla. Integer auctor consectetur quam, sed dapibus diam tristique sit amet. Nullam mollis pellentesque ante quis dapibus. In tempor est purus, vehicula pretium ipsum placerat sed. Morbi efficitur fringilla quam, quis lobortis orci interdum a. Nulla eu erat non nulla mattis mollis. Nunc vitae lorem vitae dui iaculis cursus ac eu augue. Morbi non egestas lorem.</p>
<p> Nullam lacus tortor, molestie vel justo vel, elementum egestas velit. Sed vitae ligula id turpis mollis mollis. Nunc elementum felis risus, in porta nisi efficitur quis. Maecenas semper est quis mauris imperdiet vulputate. Nulla accumsan arcu nec diam vehicula tristique. Curabitur posuere blandit ante sit amet ornare. Nam semper elit et purus lacinia scelerisque. Pellentesque tincidunt pretium turpis, at sollicitudin magna congue in. Aenean laoreet ac mi in volutpat. Quisque laoreet sit amet tellus a sollicitudin. Phasellus tempor, tellus et laoreet volutpat, nulla nisl molestie orci, sit amet ultrices lorem metus eu dui. Etiam laoreet ac lectus id suscipit. Sed in nisi rutrum neque vehicula elementum. Aenean consectetur eros quis nisi posuere cursus. Sed sed justo ornare, pulvinar velit vitae, ultricies risus. Sed pellentesque orci id ultricies pharetra und so verbleibe ich </p>
    <p>mit freundlichen Gr&uuml;&szlig;en  </p>
  </div>
 
</div>
   
</body>
</html>

Wer hat so was schon mal gemacht?

CU NetBu||
 
Hi,
grundsätzlich, die meisten Drucker sind so eingestellt dass das Dokument in die Druckseite eingepasst wird.
Heißt 2cm sind nicht mehr 2cm. Arbeite am besten damit das du dir zum Testen PDFs erstellst welche du dann z.B. über dein original Briefkopf legst um zu schauen ob die Abstände stimmen.

Wirklich ein Framework gibt es für die Aufgabe nicht. Natürlich haben gewisse CSS Framworks Printtemplates der einfacheren Art oft mit dabei wie z.B. CSS Blueprint. Aber das hilft dir bei deinem Problem nicht wirklich.
Schau dir das heir mal an: https://github.com/kursion/jsprint

Grüße
 
Bei einem PDF habe ich das gleiche Problem, das es keine Umbrüche macht, oder? Ich habe den Text-Block der zu lang werden kann und umgebrochen werden muss.....
 
Hi,
klar das Problem ist mit nem PDF nicht gelöst. Mir ging es da nur darum das du erstmal die Abstände für das Drucktemplate richtig hinbekommst.
Das kannst du so am leichtesten ohne Skalierung übrprüfen da du ja die Druckränder nicht hast. Die sind so oder so nicht berücksichtigbar da auch bei jedem Drucker anders.

Wenn ich mich richtig erinnere hat aber das jsprint plugin eine Möglichkeit auf Umbrüche zu reagieren.
 
Zum zweiten Problem, wenn ich es richtig verstanden habe, hast du da zum Beispiel einen langen Text und willst einen Umbruch forcieren.
Was du zum Beispiel machen könntest wäre in diesem Text ein span verstecken:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <span class="umbruch"></span>sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam

und dann im Druck-CSS der Klasse umbruch zB display= block; height=40px; So kannst du da Abstand rein bringen.

Allerdings weiss ich nicht ob ich das wirklich richtig verstanden habe
 
Hmm... prinzipiell habe ich solche und Ähnliche Resultate schon erfahren. Denke das ich das in jQuery/JavaScript lösen muss, wenn ich es sauber gelöst haben will. Hab nur gehofft hier weis jemand was das ich nicht gesehen habe.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück