Come si convertono i pixel in pollici stampati in JavaScript?

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

  •  03-07-2019
  •  | 
  •  

Domanda

Voglio ridimensionare il carattere dello stile di un elemento SPAN fino a quando il testo dello SPAN è largo 7,5 pollici quando stampato su carta, ma JavaScript riporta solo la proprietà clientWidth dello SPAN in pixel. 

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

E poi: 

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

E poi: 

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

Ho determinato sperimentalmente su una macchina che utilizza circa 90 DPI come fattore di conversione, perché il codice sopra riportato registra circa 675, almeno in Firefox 3.

Questo numero non è necessariamente lo stesso in diverse configurazioni di browser, stampante, schermo, ecc.

Quindi, come posso trovare il DPI utilizzato dal browser? Cosa posso chiamare per tornare " 90 " sul mio sistema?

È stato utile?

Soluzione

Penso che questo faccia quello che vuoi. Ma sono d'accordo con gli altri poster, HTML non è davvero adatto a questo genere di cose. Comunque, spero che lo trovi utile. 

<!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>

Altri suggerimenti

Per riassumere:

Questo non è un problema che puoi risolvere usando HTML. A parte le Proprietà di stampa CSS2 , i browser non hanno modo di stampare le cose .

In primo luogo, Un pixel (in CSS) non ha necessariamente le stesse dimensioni di un pixel (su il tuo schermo) , quindi il fatto che un determinato valore funzioni per te non significa che si tradurrà in altre configurazioni.

In secondo luogo, gli utenti possono modificare le dimensioni del testo utilizzando funzionalità come lo zoom della pagina, ecc.

In terzo luogo, poiché non esiste un modo definito per disporre le pagine Web a scopo di stampa, ogni browser lo fa in modo diverso. Basta stampare in anteprima qualcosa su Firefox vs IE e vedere la differenza.

In quarto luogo, la stampa comporta un'intera serie di altre variabili, come il DPI della stampante, il formato della carta. Inoltre, la maggior parte dei driver di stampa supporta il ridimensionamento dell'utente dell'output impostato nella finestra di dialogo di stampa che il browser non vede mai.

Infine, molto probabilmente perché la stampa non è un obiettivo dell'HTML, il "motore di stampa" del browser Web è (in tutti i browser che ho visto comunque) disconnesso dal resto. Non c'è modo per il tuo javascript di "parlare" con il motore di stampa, o viceversa, quindi il numero DPI "utilizzato dal browser per le anteprime di stampa" non è esposto in alcun modo.

Consiglierei un file PDF.

  

Ne ho determinato sperimentalmente uno   macchina che utilizza circa 90   DPI come fattore di conversione, perché   il codice sopra riportato registra circa 675,   almeno in Firefox 3.

     

1) È lo stesso per tutti   macchina / browser?

Sicuramente NO. Ogni combinazione di risoluzione dello schermo / stampante / impostazioni di stampa sarà leggermente diversa. C'è davvero modo di sapere quale sarà la dimensione di stampa a meno che tu non stia usando em invece di pixel.

  1. No
  2. Non

Questo è in realtà ulteriormente complicato dalle impostazioni di risoluzione dello schermo.

Buona fortuna.

Il web non è un buon supporto per i materiali stampati.

Come chiarito dalle altre risposte, la stampa dal Web è un affare complicato. È imprevedibile e purtroppo non tutti i browser e le configurazioni reagiscono allo stesso modo.

Vorrei indicarti in questa direzione comunque:

È possibile allegare un CSS al documento che è destinato in modo specifico alla stampa in questo modo 

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

In questo modo puoi formattare l'output stampato della tua pagina in un foglio di stile separato e mantenere il tuo normale foglio di stile per la visualizzazione sullo schermo. L'ho già fatto con risultati decenti, anche se ha richiesto un po 'di modifiche per garantire che il documento stampato esca nel modo desiderato.

Un interessante articolo sull'argomento della stampa dal web:

A List Apart - Going to Print

Alcune informazioni dal W3C sul profilo di stampa CSS:

W3C - Profilo di stampa CSS

Se stai generando contenuti destinati ad apparire in un modo specifico, potresti voler esaminare un formato che deve essere stampato, come PDF. HTML / CSS è pensato per essere adattabile a diverse configurazioni di dimensioni dello schermo, risoluzione, profondità del colore, ecc. Non è pensato per dire che una scatola dovrebbe essere larga esattamente 7,5 pollici.

Hai provato 

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

Questa è una risposta unita a ciò che ho imparato dai post di Orion Edwards (in particolare il link a webkit.org) e Bill.

Sembra che la risposta sia in realtà sempre 96 DPI, anche se sei libero di eseguire il seguente codice (sicuramente sciatto) e mi piacerebbe sapere se ottieni una risposta diversa: 

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

Come dice l'articolo di webkit.org, questo numero è abbastanza standard e non è influenzato dalla tua stampante o piattaforma, perché usano un DPI diverso.

Anche se non lo è, usando quel codice sopra puoi trovare la risposta che cerchi. Quindi puoi utilizzare il DPI nel tuo JavaScript, limitando la larghezza del client, come Bill ha fatto, combinato con CSS che usa i pollici, per avere qualcosa che venga stampato correttamente fintanto che l'utente non fa alcun ridimensionamento funky come menzionato da Orion Edwards - o almeno, dopo quel punto, spetta all'utente, che potrebbe voler fare qualcosa al di là di ciò che il programmatore aveva in mente, come stampare su carta 11x17 qualcosa che il programmatore ha progettato per adattarsi a 8,5x11, ma comunque "funziona correttamente" per quello che l'utente vuole anche allora.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top