Wie konvertieren Sie Pixel in gedruckte Zoll in JavaScript?

StackOverflow https://stackoverflow.com/questions/159183

  •  03-07-2019
  •  | 
  •  

Frage

Ich möchte die Schriftart des Stils eines Spannelements ändern, bis der Text der Spannweite 7,5 Zoll breit ist, wenn sie auf Papier ausgedruckt ist, aber JavaScript berichtet nur über die Clientbreiteneigenschaft der Spannweite in Pixel.

<span id="test">123456</span>

Und dann:

#test {
  font-size:1.2in; /* adjust this for yourself until printout measures 7.5in wide */
}

Und dann:

console.log(document.getElementById('test').clientWidth);

Ich habe experimentell an einer Maschine festgelegt, dass es ungefähr 90 dpi als Konvertierungsfaktor verwendet, da die obigen Codes ungefähr 675 log, zumindest unter Firefox 3.

Diese Zahl ist nicht unbedingt gleich unter verschiedenen Browser, Drucker, Bildschirm usw. Konfigurationen.

Wie finde ich den DPI, den der Browser verwendet,? Was kann ich anrufen, um "90" auf mein System zurückzubekommen?

War es hilfreich?

Lösung

Ich denke, das tut, was du willst. Aber ich stimme den anderen Postern zu, HTML ist nicht wirklich für so etwas geeignet. Wie auch immer, ich hoffe, Sie finden das nützlich.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {width: 7in; border: solid 1px red;}
#span {display: table-cell; width: 1px; border: solid 1px blue; font-size: 12px;}
</style>
<script language="javascript" type="text/javascript">
function resizeText() {
  var container = document.getElementById("container");
    var span = document.getElementById("span");

    var containerWidth = container.clientWidth;
  var spanWidth = span.clientWidth; 
    var nAttempts = 900;
    var i=1;
    var font_size = 12;

    while ( spanWidth < containerWidth && i < nAttempts ) {
      span.style.fontSize = font_size+"px";

        spanWidth = span.clientWidth;

        font_size++;
      i++;
    }       
}
</script>
</head>

<body>
<div id="container">
<span id="span">test</span>
</div>
<a href="javascript:resizeText();">resize text</a>
</body>
</html>

Andere Tipps

Zusammenfassen:

Dies ist kein Problem, das Sie mit HTML lösen können. Neben dem CSS2 Druckeigenschaften, Es gibt keinen definierten oder erwarteten Weg für Browser, Dinge zu drucken.

Zuerst, Ein Pixel (in CSS) ist nicht merkwürdig wie ein Pixel (auf Ihrem Bildschirm)., Die Tatsache, dass ein bestimmter Wert für Sie funktioniert, heißt das nicht, dass er auf andere Setups übersetzt wird.

Zweitens können Benutzer die Textgröße mit Funktionen wie Page Zoom usw. ändern.

Drittens, da es keine definierte Möglichkeit gibt, wie Webseiten für Druckzwecke ausgelegt werden können, macht jeder Browser es anders. Drucken Sie einfach eine Vorschau in Firefox gegen IE aus und sehen Sie den Unterschied.

Viertens bringt Druck eine ganze Reihe anderer Variablen ein, wie den DPI des Druckers, die Papiergröße. Darüber hinaus unterstützen die meisten Drucker-Treiber die Benutzeranzeige der Ausgabe Im Dialogfeld Print einstellen was der Browser nie sieht.

Schließlich, wahrscheinlich weil das Drucken kein Ziel von HTML ist, ist die 'Print -Engine' des Webbrowsers (in allen Browsern, die ich sowieso gesehen habe) vom Rest davon getrennt. Es gibt keine Möglichkeit für Ihr JavaScript, mit der Druckmaschine zu sprechen, oder umgekehrt, sodass die "DPI -Nummer, die der Browser für Druckvorschau verwendet", ist in keiner Weise freigelegt.

Ich würde eine PDF -Datei empfehlen.

Ich habe experimentell an einer Maschine festgelegt, dass es ungefähr 90 dpi als Konvertierungsfaktor verwendet, da die obigen Codes ungefähr 675 log, zumindest unter Firefox 3.

1) Ist das für jeden Maschine/jeden Browser dasselbe?

Definitiv nicht. Jede Bildschirmauflösung / Drucker- / Druckeinstellungen Combo wird etwas anders sein. Es gibt wirklich auf der Weg zu wissen, wie die Druckgröße aussehen wird, es sei denn, Sie verwenden EMs anstelle von Pixeln.

  1. Nein
  2. Du nicht

Dies wird auch durch die Einstellungen für Bildschirmauflösungen tatsächlich weiter kompliziert.

Viel Glück.

Das Web ist kein gutes Medium für gedruckte Materialien.

Wie die anderen Antworten deutlich gemacht, ist das Drucken aus dem Web schwierig. Es ist unvorhersehbar und leider nicht alle Browser und Konfiguration reagiert gleich.

Ich würde Sie jedoch in diese Richtung weisen:

Sie können ein CSS an Ihr Dokument anhängen, das speziell zum Drucken vorgesehen ist

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

Auf diese Weise können Sie die gedruckte Ausgabe Ihrer Seite in einem separaten Stilblatt formatieren und Ihr reguläres Stylesheet für das Anzeigen auf dem Bildschirm behalten. Ich habe dies bereits mit angemessenen Ergebnissen gemacht - obwohl es einige Optimierungen erforderte, um sicherzustellen, dass das gedruckte Dokument so herauskommt, wie Sie es möchten.

Ein interessanter Artikel zum Thema Druck aus dem Web:

Eine Liste auseinander - ich werde drucken

Einige Informationen aus dem W3C über das CSS -Druckprofil:

W3C - CSS -Druckprofil

Wenn Sie Inhalte generieren, die auf eine bestimmte Art und Weise aussehen sollen, möchten Sie möglicherweise ein Format untersuchen, das wie PDF gedruckt werden soll. HTML/CSS soll an verschiedene Konfigurationen von Bildschirmgröße, Auflösung, Farbtiefe usw. anpassbar sein. Es ist nicht dafür gedacht, dass eine Box genau 7,5 Zoll breit sein sollte.

Hast du es versucht

@media print { #test { width: 7in; }}

Dies ist eine fusionierte Antwort auf das, was ich aus den Beiträgen von Orion Edwards (insbesondere dem Link zu webkit.org) und bill gelernt habe.

Es scheint, dass die Antwort tatsächlich immer 96 dpi ist, obwohl Sie den folgenden (zugegebenermaßen schlampigen) Code ausführen können, und ich würde gerne hören, ob Sie eine andere Antwort erhalten:

var bob = document.body.appendChild(document.createElement('div'));
bob.innerHTML = "<div id='jake' style='width:1in'>j</div>";
alert(document.getElementById('jake').clientWidth);

Wie im Artikel von webkit.org sagt, ist diese Zahl ziemlich Standard und nicht von Ihrem Drucker oder Ihrer Plattform betroffen, da diese einen anderen DPI verwenden.

Auch wenn dies nicht der Fall ist, können Sie den oben genannten Code verwenden, die Antwort, die Sie benötigen. Dann können Sie den DPI in Ihrem JavaScript verwenden und die Clientbreite wie Bill beschränken, kombiniert mit CSS, das Zoll verwendet Zumindest nach diesem Zeitpunkt liegt es an dem Benutzer, der möglicherweise etwas tun möchte, was der Programmierer im Sinn hatte, wie das Ausdruck auf 11x17 -Papier, das der Programmierer in 8.5x11 entworfen hat, aber trotzdem wird es es tun "Arbeit richtig" für das, was der Benutzer auch damals will.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top