Gitarrenakkorde ohne Tabellen-position absolute drucken und Mozilla
Gitarrenakkorde ohne Tabellen mit reiner CSS Lösung war einmal die Frage. Gut, dafür fand ich eine Lösung, doch ich vergaß auf die Print Ausgabe, also die print.css Angaben. Markus fragte per Email nach und hier eine von sicher vielen Lösungen.
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 ohne print.css Angaben
- Beim Klick auf das Bild kommt
der große Screenshot, die Retourtaste des Browsers bringt
einem wieder hier her zum Artikel,
dies ist bei allen folgenden Bildern
in diesem Artikel gleich.
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
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;}
- Position relative in der print.css
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 ….
- hr mit page-break-after
in der print.css 
… 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
- hr im Quelltext und mit
page-break-before in der print.css 
- Löcher im Text:
letter-spacing und IE ist ungelöst ? 
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.
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. 
Rechtliches
Impressum
