Gitarrenakkorde ohne Tabellen-position absolute drucken und Mozilla

Gitarrenakkorde per CSS sind die Frage von Muckel gewesen. Diesen Gitarrenakkorde per CSS Artikel fand Marko ( ;)) und dann probierte er solche eine Seite auszudrucken.

Der IE machte es, der Mozilla zickte gewaltigst ab der zweiten Druckseite. Er zeigte einfach keine Akkorde mehr an und es schien als packte er alle Akkorde ganz nach Links oben in die erste Druckseite. Nach einigen Versuchen schaffte ich auch hierfür eine Lösung. Die ich jetzt Schritt für Schritt erkläre und mit großen Screenshots zeige. Wer ungeduldig ist, sollte gleich ans Ende des Artikels gehen

»»Dies ist wie immer eine von sicher vielen Lösungen, wenn wer eine andere Lösung hat, bitte mir eine Email senden oder in den Kommentaren zwischen <pre> und </pre> schreiben.

Ursprungslösung ohne extra Angaben in der print.css


.noten{line-height:3.2em;
position:relative;
top:2px;
margin-top:2em;
margin-bottom:3em;}
.noten p{height:3em;}
.hoch {position:absolute;margin-top:-1.7em; }

Ausdruck bei Mozilla mit position absolute Angaben

Gibt man Browsern keine extra CSS für den print, also den Ausdruck, dann nehmen die die Angaben der style.css, die für die Ausgabe auf der Website gedacht sind.

Die Angabe position absolute nehmen die Mozilla Browser beim Ausdruck absolut ernst. Sie setzen diese Angabe in Bezug zur Seite überhaupt. so scheint es zumindest , wenn man sich die Screenshots ansieht. Die erste Seite korrekt, auf der 2. Print Ausgabe keine Akkorde, die mit position absolute gesetzt wurden. Dafür in der Linken oberen Ecke ein Buchstabengewusel der Sonderklasse :zwinker:

Position relative ersetzt position absolute in der print.css


.noten{line-height:3.2em;top:2px;margin-top:2em;margin-bottom:3em;}
.noten p{height:5em;line-height:5em;}
.noten p span.hoch {top:-1em; position:relative;}



Akkorde sichtbar aber der Text fehlt
Akkorde sichtbar aber der Text fehlt

Rasch wurde mir klar, dass man beim Drucken die p – also die Zeilen- nicht relativ setzen muss. Somit kann man dann die spans, die die Akkorde hochschieben, relativ setzen. Nun Mozilla dankte mir dieseÜ berlegung mit Akkorden auf allen Seiten der Printausgabe und auch der IE machte da mit. Jedoch verschluckte Mozilla immer die letzte Textzeile.

Ich lasse mich doch nicht sekkieren und dachte mir – leider VOR einer Tasse Kaffee, dann nehm ich das Hilfsmittel hr. Und erzwinge einen Seitenumbruch nach jedem hr.

Gedacht, getan und dabei ….

Akkorde da aber der Text fehlt immer noch
Akkorde da aber der Text fehlt immer noch

… nicht wirklich das erhoffte Ergebnis. An und für sich logisch, doch vor Kaffee ist dies so eine Logik nicht logisch. Jetzt hatte ich es aber mit page-break-before beim hr.

Position relative bei den spans, keine Positonsangabe bei den p’s und das Hilfsmittel hr mit page-break-before:always

Ausdruck bei Mozilla mit page-break-before

Akkorde und Text nun da CSS passt
Akkorde und Text nun da CSS passt


Löcher im Text: letter-spacing und IE ist ungelöst ?

Löcher im Text beim IE beim Akkorde ausdrucken
Löcher im Text beim IE beim Akkorde ausdrucken


Print.css für die Gitarrenakkorde -meine Lösung

Getestet wurde diese Lösung in folgenden Browsern:

Dass diese meine Lösung auch unter Linux ihr Werk macht, zeigen folgende Screenshots, die mir Marko zur Verfügung stellte.

Die print.css habe ich nach all der Testerei und Irrwege in halbwegs gute Form gebracht.


.noten{line-height:40pt;top:2px;margin-top:2em;margin-bottom:3em;font-size:11pt;}
.noten p{height:50pt;}
.noten p span.hoch {top:-12pt; position:relative;letter-spacing:-0.6em;}
.noten hr{page-break-before: always;}


Die style.css wurde ebenfalls erweitert:

.noten{line-height:5em;position:relative;top:2px;margin-top:2em;margin-bottom:3em;}
.noten p{height:3em;margin:12px 0;}
.hoch {position:absolute;margin-top:-1.7em; }
.noten hr{margin:0.2em 0 1.6em 0;}/* margin ist noetig, damit die Akkorde nicht in Linie hr hineinreichen */


Hier kann man sich den Quelltext ansehen: Gitarrenakkorde und print.css Position absolute Problem beim Ausdruck mit Mozilla Browser. Die Position des hr im Quelltext wäre noch genau auszutüfteln, doch denke ich , dass dies jeder für sich kann. Aktuell steht diese Lösung in der style.css, weil diese auch die print Angaben beinhaltet.

Ungelöst ist das letter-spacing Problem beim IE. Zumindest der IE 7 reagiert nicht auf das negative letter-spacing in der print.css. Wer hierfür eine Lösung hat, dem wäre ich dankbar. 🙂

mts

Ebenfalls informativ und lesenswert