Comment convertir des pixels en pouces imprimés en JavaScript?

https://stackoverflow.com/questions/159183

03-07-2019
|

Question

Je souhaite redimensionner la police du style d'un élément SPAN jusqu'à ce que le texte du SPAN ait une largeur de 7,5 pouces lorsqu'il est imprimé sur du papier, mais JavaScript n'indique que la propriété clientWidth du SPAN en pixels.

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

Et ensuite:

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

Et ensuite:

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

J'ai déterminé expérimentalement sur un ordinateur qu'elle utilisait environ 90 DPI comme facteur de conversion, car le code ci-dessus enregistre environ 675, au moins sous Firefox 3.

Ce numéro n'est pas nécessairement le même sous différentes configurations de navigateur, imprimante, écran, etc.

Alors, comment trouver le DPI que le navigateur utilise? Que puis-je appeler pour revenir en arrière " 90 " sur mon système?

La solution

Je pense que cela fait ce que vous voulez. Mais je suis d'accord avec les autres affiches, le HTML n'est pas vraiment adapté à ce genre de chose. Quoi qu’il en soit, espérons que cela vous sera 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>

Autres conseils

Pour résumer:

Ce n'est pas un problème que vous pouvez résoudre en utilisant HTML. Hormis les propriétés d'impression CSS2 , les navigateurs ne disposent d'aucun moyen défini ou prévu pour imprimer des éléments. .

Tout d'abord, Un pixel (en CSS) n'est pas nécessairement de la même taille qu'un pixel (sur votre écran) , donc le fait qu’une certaine valeur fonctionne pour vous ne signifie pas qu’elle se traduira par une autre configuration.

Deuxièmement, les utilisateurs peuvent modifier la taille du texte à l'aide de fonctionnalités telles que le zoom de page, etc.

Troisièmement, comme il n’existe aucun moyen précis de mettre en page des pages Web à des fins d’impression, chaque navigateur le fait différemment. Il suffit d’imprimer un aperçu de quelque chose dans firefox vs IE et de voir la différence.

Quatrièmement, l’impression introduit toute une série de variables, telles que le DPI de l’imprimante, le format du papier. En outre, la plupart des pilotes d’imprimante prennent en charge la mise à l’échelle de la sortie définie dans la boîte de dialogue d’impression que le navigateur ne voit jamais.

Enfin, probablement parce que l'impression n'est pas un objectif du code HTML, le "moteur d'impression" du navigateur Web est (dans tous les navigateurs que j'ai vus de toute façon) déconnecté du reste de celui-ci. Votre javascript n'a aucun moyen de "communiquer" avec le moteur d'impression, ou inversement, de sorte que le "numéro DPI que le navigateur utilise pour les aperçus avant impression". n'est exposé en aucune manière.

Je recommanderais un fichier PDF.

J'ai déterminé expérimentalement sur un   machine qu'il utilise environ 90   DPI en tant que facteur de conversion, car   le code ci-dessus enregistre environ 675,   au moins sous Firefox 3.

1) Est-ce la même chose sur tous les   machine / navigateur?

Certainement PAS. Chaque combinaison de résolution d'écran / imprimante / paramètres d'impression sera un peu différente. Il y a vraiment moyen de savoir quelle sera la taille d'impression, sauf si vous utilisez em au lieu de pixels.

Non
vous ne

Cela est en réalité encore plus compliqué par les paramètres de résolution de l'écran.

Bonne chance.

Le Web n’est pas un bon support pour les documents imprimés.

Comme cela ressort clairement des autres réponses, imprimer à partir du Web est une tâche délicate. C'est imprévisible et, malheureusement, tous les navigateurs et toutes les configurations ne réagissent pas de la même manière.

Je voudrais cependant vous indiquer cette direction:

Vous pouvez joindre un CSS à votre document spécialement conçu pour l'impression, comme ceci

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

De cette façon, vous pouvez formater la sortie imprimée de votre page dans une feuille de style distincte et conserver votre feuille de style habituelle pour l'affichage à l'écran. Je l'ai déjà fait auparavant avec des résultats décents, même s'il a fallu faire quelques ajustements pour que le document imprimé sorte comme vous le souhaitez.

Un article intéressant sur le sujet de l'impression à partir du Web:

Une liste à part - À imprimer

Quelques informations du W3C sur le profil d'impression CSS:

W3C - Profil d'impression CSS

Si vous générez un contenu destiné à être conçu de manière spécifique, vous souhaiterez peut-être consulter un format destiné à être imprimé, tel que PDF. HTML / CSS est conçu pour être adaptable à différentes configurations de taille d'écran, résolution, profondeur de couleur, etc. Il n'est pas conçu pour dire qu'une boîte doit faire exactement 7,5 pouces de large.

Avez-vous essayé

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

C’est une réponse fusionnée de ce que j’ai appris des articles d’Orion Edwards (en particulier du lien vers webkit.org) et de Bill.

Il semble que la réponse soit en réalité toujours de 96 DPI, bien que vous soyez libre d’exécuter le code suivant (certes négligeable) et j'aimerais entendre si vous obtenez une réponse différente:

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

Comme le dit l'article de webkit.org, ce nombre est relativement standard et n'est pas affecté par votre imprimante ou votre plate-forme, car celles-ci utilisent un DPI différent.

Même si ce n’est pas le cas, en utilisant le code ci-dessus, vous pourrez trouver la réponse dont vous avez besoin. Ensuite, vous pouvez utiliser le DPI dans votre code JavaScript, en limitant la largeur clientWidth comme l'a fait Bill, combiné à CSS qui utilise des pouces, pour obtenir quelque chose qui s'imprime correctement tant que l'utilisateur ne fait pas de mise à l'échelle géniale comme mentionné par Orion Edwards - ou au moins, après cela, c'est à l'utilisateur qui voudra peut-être faire quelque chose de plus que ce que le programmeur avait en tête, comme imprimer sur du papier 11x17 quelque chose que le programmeur a conçu pour s'intégrer au format 8.5x11, mais cela restera "travailler correctement" pour ce que l'utilisateur veut même alors.

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow