Linkergebnis mit print.css formatieren?

[Nick7]

Hallo liebe Leute,

Ich steh auf dem Schlauch. Ich habe eine Seite erstellt, die auf Klick als Druckversion formatiert und angezeigt werden soll.

Ein externes stylesheet für screen und eines für print sind im head angegeben.
Am Fuss jeder Seite befindet sich ein Link "Druckversion anzeigen". Dieser soll eine Seite öffnen, die ausschliesslich mit den Definitionen des stylesheets print.css fomatiert wird.

Wie sage ich dem Link

<a href="seite1.html" target="_blank">Druckversion anzeigen</a>

dass er nur das Stylesheet für Druckausgabe nutzen soll? Ich möchte nicht zwei Versionen jeder Seite erstellen müssen.

Danke für Eure Mühe.
Nick7

[MudGuard]

Hi,

Ein externes stylesheet für screen und eines für print sind im head angegeben.

Soweit ok.

Am Fuss jeder Seite befindet sich ein Link "Druckversion anzeigen".

wozu das? Die Druckvorschau ist doch im Browser sowieso schon eingebaut.

cu,
Andreas

[Nick7]

Am Fuss jeder Seite befindet sich ein Link "Druckversion anzeigen".

wozu das? Die Druckvorschau ist doch im Browser sowieso schon eingebaut.

Ich weiss. Nicht alle nutzen und finden die. Deshalb suche ich eine Lösung für genau diese Anforderung.

Danke.
Nick7

[Beat]

Am Fuss jeder Seite befindet sich ein Link "Druckversion anzeigen".
wozu das? Die Druckvorschau ist doch im Browser sowieso schon eingebaut.
Ich weiss. Nicht alle nutzen und finden die. Deshalb suche ich eine Lösung für genau diese Anforderung.

DAUs kann man nicht helfen, indem man sich auf ihr Niveau zu begeben versucht.

mfg Beat

[Der Martin]

Hi,

DAUs kann man nicht helfen, indem man sich auf ihr Niveau zu begeben versucht.

nein, DAUs zwingen dich auf ihr Niveau und schlagen dich dann aufgrund ihrer Erfahrung.

Ciao,
 Martin

[Nick7]

Eine kurze Anleitung von jemandem, der sich damit auskennt, würde es auch tun. DAU bin ich selber.

Danke.
Nick7

[Cheatah]

Hi,

Eine kurze Anleitung von jemandem, der sich damit auskennt, würde es auch tun. DAU bin ich selber.

"Eine Druckvorschau erhalten Sie über den gleichnamigen Eintrag im Menü 'Datei'".

Cheatah

[Nick7]

"Eine Druckvorschau erhalten Sie über den gleichnamigen Eintrag im Menü 'Datei'".

Ja. Danke. Meine Frage ist aber, wie ich in einen Link konfiguriere, dass ein externes Stylesheet die verlinkte Seite formatiert.

Nick7

[Beat]

Ja. Danke. Meine Frage ist aber, wie ich in einen Link konfiguriere, dass ein externes Stylesheet die verlinkte Seite formatiert.

Was eine Seite formatiert, hängt von von den href Attributen in den <link rel="stylesheet"> Elementen ab. Du willst also einfach eine Seite mit deinem <a> Link referenzieren, welche geeignete <link> Notizen enthält.

mfg Beat

[Nick7]

Was eine Seite formatiert, hängt von von den href Attributen in den <link rel="stylesheet"> Elementen ab. Du willst also einfach eine Seite mit deinem <a> Link referenzieren, welche geeignete <link> Notizen enthält.

Ah, danke. Das ist hilfreich. Ich kann also innerhalb des Links solch ein Attribut setzen? Das Stylesheet ist ja schon im head verlinkt.

Nick7

[Cheatah]

Hi,

Ich kann also innerhalb des Links solch ein Attribut setzen?

wie bereits mehrmals gesagt wurde: Nein, das kannst Du nicht. *Alles*, was Du erreichen kannst, muss auch möglich sein, indem Du die URL manuell in den Browser eintippst. Der Link hat *keine* Bedeutung.

Cheatah

[Nick7]

wie bereits mehrmals gesagt wurde: Nein, das kannst Du nicht. *Alles*, was Du erreichen kannst, muss auch möglich sein, indem Du die URL manuell in den Browser eintippst. Der Link hat *keine* Bedeutung.

Ok. Gibt es eine andere Möglichkeit, eine Seite _auf Klick_ mit einem Stylesheet für Printausgabe formatieren zu lassen? Solchen Seiten begegnet man ja immer wieder.

Danke.
Nick7

[apsel]

Om nah hoo pez nyeetz, Nick7!

Ok. Gibt es eine andere Möglichkeit, eine Seite auf Klick mit einem Stylesheet für Printausgabe formatieren zu lassen? Solchen Seiten begegnet man ja immer wieder.

Liest du eigentlich die Antworten, die du bekommst?

Matthias

[Nick7]

Liest du eigentlich die Antworten, die du bekommst?

Tu ich. Aber ich habe Schwierigkeiten mit dem Verstehen.

- Die Information, dass es mit dem Setzen eines Attributs im Link nicht funktioniert, ist angekommen.
 - Die Behauptung, dass es auch keine andere Methode gibt, halte ich für unrichtig.
 - Der Hinweis auf die Druckvorschau im Browser hilft nicht, weil die Usability-Anforderung heisst:
Wenn der Nutzer am Ende des Textes auf den Link "Druuckversion" klickt, öffnet sich in einem neuen Fenster eine HTML-Seite, die für den Druck, also anders formatiert ist als die Urspungsseite.

Für Tipps, Snippets, Links, wie sich so etwas umsetzen lässt, bin ich dankbar.

Nick7

[apsel]

Om nah hoo pez nyeetz, Nick7!

Lies und Antwort auf deine Frage. Erstere verlinkt zu einer serverseitigen Lösung, letztere enthält eine clientseitige Lösung. Beide brauchst du nur abzuschreiben*.

• und das, obwohl hier nicht gethtml ist.

Matthias

[Nick7]

Wow, vielen herzlichen Dank, Matthias! Das hilft mir tatsächlich endlich weiter.

Ich hatte diese Hinweise tatsächlich nicht gelesen, weil ich mit der Navigation im Thread nicht zurechtkomme. Mir werden nach einem Klick auf einen Beitrag nur die direkten Antworten dazu angezeigt.

Nick7

[Deus Figendi]

Ich hatte diese Hinweise tatsächlich nicht gelesen, weil ich mit der Navigation im Thread nicht zurechtkomme. Mir werden nach einem Klick auf einen Beitrag nur die direkten Antworten dazu angezeigt.

Ja das nervt mich auch wenn ich nicht eingeloggt bin ^^
Wenn du dich registrierst, kannst du das nämlich in der "Benutzerspeziefischen Ansicht" (oder so) ändern.
Ich behelfe mir das mit viel Vor- und Zurück in den Browser-Funktionen, d.h. ich rufe das OP auf und klicke auf den Beitrag, den ich lesen will, dann lese ich ihn und drücke dann auf "zurück" (bzw. 4. Maustaste) und dann wieder von vorn :)

[Cheatah]

Hi,

• Die Behauptung, dass es auch keine andere Methode gibt, halte ich für unrichtig.

dies hat niemand behauptet. Es existiert lediglich keine Methode, die alleinig in der Manipulation des Links auf die Seite besteht. Die Seite selbst muss verändert werden - dies wurde Dir *mehrmals* gesagt.

• Der Hinweis auf die Druckvorschau im Browser hilft nicht, weil die Usability-Anforderung heisst:

Manche Anforderungen sind mehr als nur diskussionswürdig. Diese ist nicht umsetzbar.

Wenn der Nutzer am Ende des Textes auf den Link "Druuckversion" klickt, öffnet sich in einem neuen Fenster eine HTML-Seite, die für den Druck, also anders formatiert ist als die Urspungsseite.

Diese Darstellung *muss* von einer Druckvorschau abweichen, weil meines Wissens kein Browser es implementiert hat, innerhalb des Browserfensters eine Seitenaufteilung zu visualisieren. Die Darstellung ist also falsch und somit aus Usability-Sicht zu vermeiden.

Für Tipps, Snippets, Links, wie sich so etwas umsetzen lässt, bin ich dankbar.

*Noch* mehr? Reichen Dir die bestehenden nicht? Du solltest vielleicht dazu übergehen, den Preis zu nennen, den Du zu zahlen bereit bist.

Cheatah

[NIck7]

dies hat niemand behauptet. Es existiert lediglich keine Methode, die alleinig in der Manipulation des Links auf die Seite besteht. Die Seite selbst muss verändert werden - dies wurde Dir *mehrmals* gesagt.

Gibt es eine dynamische Möglichkeit, die
 - ohne Scripting funktioniert
 - und für die es nicht notwendig ist, für jede Seite eine extra erstellte Druckversion auf dem Server bereitzuhalten?

Diese Darstellung *muss* von einer Druckvorschau abweichen, weil meines Wissens kein Browser es implementiert hat, innerhalb des Browserfensters eine Seitenaufteilung zu visualisieren. Die Darstellung ist also falsch und somit aus Usability-Sicht zu vermeiden.

Das ist ein Argument. Akzeptiert.

*Noch* mehr? Reichen Dir die bestehenden nicht?

Nein, ich dachte eher an lösungsorientierte Vorschläge in verständlicher Sprache.

Du solltest vielleicht dazu übergehen, den Preis zu nennen, den Du zu zahlen bereit bist.

Die Grundlage jeden Geschäfts ist gegenseitiger Respekt und Professionalität.

Danke.
Nick7

[Beat]

• Der Hinweis auf die Druckvorschau im Browser hilft nicht, weil die Usability-Anforderung heisst:
  Wenn der Nutzer am Ende des Textes auf den Link "Druuckversion" klickt, öffnet sich in einem neuen Fenster eine HTML-Seite, die für den Druck, also anders formatiert ist als die Urspungsseite.

Es gibt keine etablierte Konvention, dass am Ende des Textes (was immer das sei) ein Link für eine Druckvorschau steht.

Es ist denkbar, dass gewünscht ist, dass eine Seite, die mehrere Texteinheiten enthält, für jeden dieser Einheiten eine eigene Funktion bereitstellen soll, um nur diesen Text zu drucken.

Das, was man mit einem Stylesheet-Zwitscher erreichen kann, ist etwas anderes, als die Druckvorschau leistet.

Die Frage ist, was soll eine Druckversion darstellen.
Im Normalfall soll die Druckvorschau soll im Unterschied zur Screen-Version

• keine Navigationselemente und
• keinen unnötigen Zierrat enthalten,
• Punkt statt Pixel Einheiten verwenden,
• Paging anwenden,
• eventuell ein anderes Layout für Beigaben verwenden,
• URIs bei Links sichtbar machen und
• mit overflow auto/scroll begrenzte Bereiche befreien.

All dies ist mit einem normalen print-CSS zu erreichen. Es braucht keinen CSS-Switcher.

Das ändert sich erst, wenn ich spezifische Dinge als Option ändern will.
Wenn ich eine Version bereitstellen will, die wirklich nur noch den Hauptinhalt enthält, so muss für media print und media screen jeweils ein anderes CSS aktiviert werden.
Falls es sich um so schwierige Darstellungen wie Bahnfahrpläne handelt, kann eventuell gefordert sein, dass ein anderes Markup für den Druck angewendet wird.

Deine Usability-Anforderung kann definieren:

• Dies muss auf jeden Fall auch ohne Javascript möglich sein.
  Deshalb führt dies zum Request eines Dokuments beim Server, der ein entsprechendes Dokument ausliefert.

mfg Beat

[Nick7]

Es gibt keine etablierte Konvention, dass am Ende des Textes (was immer das sei) ein Link für eine Druckvorschau steht.

Es gibt einen dringenden Wunsch von Leuten, die die Seite benutzen. Dem komme ich nach.

Der Rest war viel Text, der in etwa zusammenfasste, worum es geht.

Danke.
Nick7

[Beat]

DAUs kann man nicht helfen, indem man sich auf ihr Niveau zu begeben versucht.
nein, DAUs zwingen dich auf ihr Niveau und schlagen dich dann aufgrund ihrer Erfahrung.

Weiche Satan, Du hast mich geschlagen!

mfg Beat

[cygnus]

Hallo :)

Weiche Satan, Du hast mich geschlagen!

Weiche Sahne, Du hast mich geschlagen!

mfg
cygnus

[Cheatah]

Hi,

Wie sage ich dem Link
<a href="seite1.html" target="_blank">Druckversion anzeigen</a>
dass er nur das Stylesheet für Druckausgabe nutzen soll?

dem Link? Wenn ich Dich richtig verstanden habe, ist es nicht der Link, den Du ausdrucken möchtest, sondern die verlinkte Seite. Und der sagst Du es über die entsprechenden <link>-Elemente und deren media-Attribute.

Ich möchte nicht zwei Versionen jeder Seite erstellen müssen.

Das brauchst Du auch nicht. Abgesehen davon, dass es mit serverseitigen Mechanismen ein Leichtes ist, dermaßen winzige Unterschiede im HTML-Code zu organisieren, besitzen alle aktuellen Browser über eine recht brauchbare Druckvorschau-Funktion, die zudem den Vorteil hat, die für den Bildschirm unübliche Aufteilung auf verschiedene Blätter zu visualisieren.

Cheatah

[Nick7]

dem Link? Wenn ich Dich richtig verstanden habe, ist es nicht der Link, den Du ausdrucken möchtest, sondern die verlinkte Seite. Und der sagst Du es über die entsprechenden <link>-Elemente und deren media-Attribute.

Wie kann ich das Link-Element in den Link einfügen? Das stylesheet ist ja bereits in allen Siten im head referenziert. Bei gewöhnlichem Seitenaufruf soll screen.css zur Formatierung benutzt werden. Nur bei Klick auf den Druckversions-Link soll die Seite mit print.css formatiert werden. Also stelle ich mir vor, dass das innerhalb des [a href]-Tags angegeben werden muss.

Danke.
Nick7

[apsel]

Om nah hoo pez nyeetz, Nick7!

http://www.perun.net/2007/12/16/druckvorschau-css-und-die-nutzer/

Matthias

[Cheatah]

Hi,

Wie kann ich das Link-Element in den Link einfügen?

der Link interessiert Dich nicht. Er vermittelt einen Ort, nicht mehr. An diesem Ort muss sich das Richtige befinden - und dieses Richtige wiederum ist absolut unabhängig davon, ob es irgendwo verlinkt ist oder nicht.

Also stelle ich mir vor, dass das innerhalb des [a href]-Tags angegeben werden muss.

Wenn Du Dir vorstellst, dass in dem Überraschungsei, dass Du kaufen willst, ein Happy Hippo drin steckt, schreibst Du dann auch "Happy Hippo" auf Deinen Einkaufszettel und gehst davon aus, dass Du es erhältst? Nein, das Ding muss sich im Ei befinden, sonst kriegst Du's nicht. Der Link hat keine Bedeutung. Alles was Du erwartest, musst Du auch durch manuelle Eingabe der URL in die Adressleiste des Browsers erhalten können.

Cheatah

[Deus Figendi]

apsel und Cheatah haben dich schon darauf hingewiesen, dass man das prima mit serverseitiger Technik lösen kann.
Ich hab' jetzt noch 'ne clientseitige Lösung gebaut:

<!DOCTYPE html>  
<html>  
 <head>  
  <title>Druckvorschau-Test</title>  
 <link id="screen_css" rel="stylesheet" type="text/css" href="screensheet.css" media="screen" />  
 <link id="print_css" rel="stylesheet" type="text/css" href="printsheet.css" media="print" />  
 <script type="text/javascript">[code lang=javascript]  
  function druckvorschau () {  
   document.getElementById('screen_css').setAttribute("media","none");  
   document.getElementById('print_css').setAttribute("media","all");  
  }  
  function browseransicht () {  
   document.getElementById('screen_css').setAttribute("media","screen");  
   document.getElementById('print_css').setAttribute("media","print");  
  }

</script>
 </head>
 <body>
  <div>
   <input class="noprint" type="button" value="Druckvorschau" onclick="druckvorschau();" />
   <span class="noscreen" onclick="browseransicht();">[X]</span>
  </div>
  <p>Absatz</p>
 </body>
</html>
[/code]

screensheet.css

p {  
 background-color:#f00;  
}  
p:before {  
 content:"screen ";  
}  
.noscreen {  
 display:none;  
}

printsheet.css

p {  
 background-color:#0f0;  
}  
p:before {  
 content:"print ";  
}  
.noprint {  
 display:none;  
}

Getestet in:
Opera 9.80    Presto 2.6.30  funktioniert
Firefox 3.6.8 Gecko 20100722 funktioniert
K-Meleon 1.02 Gecko 20060917 funktioniert nicht.
Iron 5.0.382  WebKit ??????? funktioniert
(konnte nicht die Info finde welche WebKit-Version da läuft)
Funktioniert also in allen relevanten Browsern/Engines, andere hab ich nicht getestet.