¿Cómo convertir píxeles a pulgadas impresas en JavaScript?

https://stackoverflow.com/questions/159183

03-07-2019
|

Pregunta

Quiero cambiar el tamaño de la fuente del estilo de un elemento SPAN hasta que el texto del SPAN tenga un ancho de 7.5 pulgadas cuando se imprima en papel, pero JavaScript solo informa la propiedad clientWidth del SPAN en píxeles.

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

Y luego:

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

Y luego:

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

Determiné experimentalmente en una máquina que utiliza aproximadamente 90 DPI como factor de conversión, porque el código anterior registra aproximadamente 675, al menos en Firefox 3.

Este número no es necesariamente el mismo en configuraciones de navegador, impresora, pantalla, etc. diferentes.

Entonces, ¿cómo puedo encontrar el DPI que está usando el navegador? ¿A qué puedo llamar para volver " 90 " en mi sistema?

Solución

Creo que esto hace lo que quieres. Pero estoy de acuerdo con los otros carteles, HTML no es realmente adecuado para este tipo de cosas. De todos modos, espero que encuentres esto útil.

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

Otros consejos

Para resumir:

Este no es un problema que puedas resolver usando HTML. Aparte de las propiedades de impresión CSS2 , no hay una forma definida o esperada para que los navegadores impriman cosas .

Primero, Un píxel (en CSS) no es necesariamente del mismo tamaño que un píxel (en su pantalla) , por lo que el hecho de que un determinado valor funcione para usted no significa que se traduzca a otras configuraciones.

En segundo lugar, los usuarios pueden cambiar el tamaño del texto usando características como el zoom de la página, etc.

En tercer lugar, debido a que no existe una forma definida de cómo diseñar las páginas web para fines de impresión, cada navegador lo hace de manera diferente. Simplemente imprima la vista previa en Firefox vs IE y vea la diferencia.

En cuarto lugar, la impresión aporta una gran cantidad de otras variables, como el DPI de la impresora, el tamaño del papel. Además, la mayoría de los controladores de impresora admiten la escala de usuario de la salida establecida en el diálogo de impresión que el navegador nunca ve.

Finalmente, lo más probable es que la impresión no sea un objetivo de HTML, el 'motor de impresión' del navegador web está (en todos los navegadores que he visto) desconectado del resto. Su javascript no tiene forma de "hablar" con el motor de impresión, o viceversa, por lo que el " número de DPI que usa el navegador para las vistas previas de impresión " no está expuesto de ninguna manera.

Recomendaría un archivo PDF.

He determinado experimentalmente en uno   Máquina que utiliza aproximadamente 90.   DPI como factor de conversión, porque   el código anterior registra aproximadamente 675,   al menos bajo Firefox 3.

1) ¿Es esto lo mismo en cada   máquina / navegador?

Definitivamente NO. Cada combinación de resolución de pantalla / impresora / configuración de impresión será un poco diferente. Realmente hay una manera de saber cuál será el tamaño de impresión a menos que esté utilizando em's en lugar de píxeles.

No
No lo haces

Esto también se complica aún más con la configuración de resolución de pantalla.

Buena suerte.

La web no es un buen medio para materiales impresos.

Como lo demuestran las otras respuestas, la impresión desde la web es un asunto delicado. Es impredecible y, lamentablemente, no todos los navegadores y configuraciones reaccionan de la misma manera.

Sin embargo, te señalaría en esta dirección:

Puede adjuntar un CSS a su documento destinado específicamente para la impresión, por lo tanto,

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

De esa manera, puede dar formato a la salida impresa de su página en una hoja de estilo separada y mantener su hoja de estilo regular para mostrarla en la pantalla. He hecho esto antes con resultados decentes, aunque requirió un poco de ajuste para garantizar que el documento impreso salga como lo desea.

Un artículo interesante sobre el tema de impresión desde la web:

A List Apart - Going To Print

Alguna información del W3C sobre el perfil de impresión CSS:

W3C - CSS Print Profile

Si está generando contenido destinado a verse de una manera específica, es posible que desee ver un formato que debe imprimirse, como PDF. HTML / CSS está destinado a ser adaptable a diferentes configuraciones de tamaño de pantalla, resolución, profundidad de color, etc. No está pensado para decir que un cuadro debe tener exactamente 7,5 pulgadas de ancho.

Has intentado

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

Esta es una respuesta combinada de lo que he aprendido de las publicaciones de Orion Edwards (especialmente el enlace a webkit.org) y Bill.

Parece que la respuesta es en realidad siempre de 96 ppp, aunque eres libre de ejecutar el siguiente código (aunque admito que es descuidado) y me encantaría escucharlo si recibes una respuesta diferente:

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

Como dice el artículo de webkit.org, este número es bastante estándar y no se ve afectado por su impresora o plataforma, ya que utilizan un DPI diferente.

Incluso si no lo es, utilizando el código anterior, puede encontrar la respuesta que necesita. Luego puede usar el DPI en su JavaScript, limitando el Ancho del cliente como lo hizo Bill, combinado con el CSS que usa pulgadas, para tener algo que se imprima correctamente siempre que el usuario no haga ninguna escala extraña como lo mencionó Orion Edwards, o al menos, después de ese punto, depende del usuario, que puede querer hacer algo más allá de lo que el programador tenía en mente, como imprimir en papel 11x17 algo que el programador diseñó para que encajara en 8.5x11, pero aún así, lo hará. " trabajo correcto " por lo que el usuario quiere incluso entonces.

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow