Druckfreundliche Version

Du könntest ein gesondertes Style Sheet für den Druck entwerfen. Das kannst du folgendermaßen im head-Bereich einbinden:

<link rel="stylesheet" media="print" href="druck.css">

In der CSS-Datei kannst du dann eine druckfreundliche Schriftart definieren, bestimmte Elemente ausblenden (z.B. Navigation) etc.

Beim Druck werden die Browser dann dieses Stylesheet berücksichtigen

DAs kommt darauf an, wie das Style Sheet ausschaut.

als erstes müsstest du die Bereiche markieren, die ausgeblendet werden bzw. nicht ausgeblendet werden sollen. Du könntest die Zahlen z.B. in einen span der Klasse "zahl" unterbringen

<span class="zahl">3</span>

dann bindest du zwei Style Sheets ein, eins für den Monitor, eins für den Druck:

<link rel="stylesheet" media="screen" href="monitor.css">
<link rel="stylesheet" media="print" href="druck.css">

in monitor.css definierst du das "normale" Layout

body { font-family:Arial,sans-serif; }
.zahl { font-weight:bold; }

und in druck.css das Layout für den Druck.

body { font-family:'Times New Roman',serif; display:none; }
.zahl { font-weight:bold;display:inline; }

In dem Beispielcode werden über display:none alle Elemente ausgeblendet, über display:inline werden die Zahlen wieder eingeblendet

Ja, das funktioniert auch ohne Java-Script Button - einfach mal ausprobieren, und die Druckvorschau im Browser aufrufen

Ich hab allerdings grad gemerkt, dass das Einblenden bei display:hidden so nicht funktioniert. Besser wäre es in der druck.css mit der CSS-Eigenschaft visibility zu arbeiten:

body { font-family:'Times New Roman',serif;visibility:hidden; }
.zahl { font-weight:bold;visibility:visible; }

dann wird beim Druck nur das span gedruckt