كيف يمكنك تحويل وحدات البكسل إلى بوصة مطبوعة في جافا سكريبت؟

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

  •  03-07-2019
  •  | 
  •  

سؤال

أرغب في تغيير حجم الخط الخاص بأسلوب عنصر Span حتى يكون نص Span عرضه 7.5 بوصة عند طباعته على الورق ، لكن JavaScript تقارير فقط خاصية عميل العميل في SPAN بالبكسل.

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

وثم:

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

وثم:

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

لقد حددت تجريبياً على جهاز واحد أنه يستخدم حوالي 90 نقطة في البوصة كعامل تحويل ، لأن الكود أعلاه يسجل حوالي 675 ، على الأقل تحت Firefox 3.

هذا الرقم ليس بالضرورة هو نفسه ضمن متصفح أو طابعة أو شاشة أو تكوينات مختلفة.

لذا ، كيف أجد DPI المتصفح الذي يستخدمه؟ ما الذي يمكنني الاتصال به للعودة "90" على نظامي؟

هل كانت مفيدة؟

المحلول

أعتقد أن هذا يفعل ما تريد. لكنني أتفق مع الملصقات الأخرى ، HTML ليست مناسبة حقًا لهذا النوع من الأشياء. على أي حال ، أتمنى أن تجد هذا مفيدًا.

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

نصائح أخرى

كي تختصر:

هذه ليست مشكلة يمكنك حلها باستخدام HTML. جزء من ال خصائص طباعة CSS2, ، لا توجد طريقة محددة أو متوقعة للمتصفحات لطباعة الأشياء.

أولاً، بكسل (في CSS) ليس بنفس حجم بكسل (على شاشتك), ، لذا فإن حقيقة أن قيمة معينة تعمل بالنسبة لك لا تعني أنها ستترجم إلى إعدادات أخرى.

ثانياً ، يمكن للمستخدمين تغيير حجم النص باستخدام ميزات مثل تكبير الصفحة ، إلخ.

ثالثًا ، نظرًا لعدم وجود طريقة محددة لكيفية وضع صفحات ويب لأغراض الطباعة ، يقوم كل متصفح بشكل مختلف. فقط طباعة معاينة شيء في Firefox مقابل أي وشاهد الفرق.

رابعا ، تجلب الطباعة مجموعة كاملة من المتغيرات الأخرى ، مثل DPI للطابعة ، حجم الورق. بالإضافة إلى ذلك ، تدعم معظم برامج تشغيل الطابعة تقسيم المستخدمين للإخراج تعيين في مربع الحوار طباعة الذي لا يرى المتصفح أبدًا.

أخيرًا ، على الأرجح لأن الطباعة ليست هدفًا لـ HTML ، فإن "محرك الطباعة" لمتصفح الويب (في جميع المتصفحات التي رأيتها على أي حال) غير متصل عن بقيةها. لا توجد وسيلة لكي "التحدث" إلى محرك الطباعة ، أو العكس ، لذلك لا يتم عرض "رقم DPI الذي يستخدمه المستعرض للمعاينة للطباعة" بأي شكل من الأشكال.

أود أن أوصي ملف PDF.

لقد حددت تجريبياً على جهاز واحد أنه يستخدم حوالي 90 نقطة في البوصة كعامل تحويل ، لأن الكود أعلاه يسجل حوالي 675 ، على الأقل تحت Firefox 3.

1) هل هذا هو نفسه على كل آلة/متصفح؟

بالطبع لا. سيكون كل من دقة الشاشة / إعدادات الطابعة / طباعة التحرير والسرد مختلفًا قليلاً. هناك حقًا في طريقهم لمعرفة ما سيكون حجم الطباعة ما لم تكن تستخدم EM بدلاً من وحدات البكسل.

  1. رقم
  2. لم تكن

هذا في الواقع معقد في إعدادات دقة الشاشة كذلك.

حظا طيبا وفقك الله.

الويب ليس وسيلة جيدة للمواد المطبوعة.

كما تم توضيح الإجابات الأخرى ، فإن الطباعة من الويب هي أعمال صعبة. لا يمكن التنبؤ بها ولا تتفاعل جميع المتصفحات والتكوين.

أود أن أوجهك في هذا الاتجاه:

يمكنك إرفاق CSS بمستندك المستهدف خصيصًا للطباعة مثل ذلك

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

وبهذه الطريقة ، يمكنك تنسيق الإخراج المطبوع لصفحتك في ورقة أنماط منفصلة والحفاظ على ورقة الأنماط العادية لعرضها على الشاشة. لقد قمت بذلك من قبل بنتائج لائقة - على الرغم من أنها تتطلب الكثير من التغيير والتبديل للتأكد من أن المستند المطبوع يخرج بالطريقة التي تريدها.

مقالة مثيرة للاهتمام حول موضوع الطباعة من الويب:

قائمة متباعدة - ذاهب للطباعة

بعض المعلومات من W3C حول ملف تعريف طباعة CSS:

W3C - ملف تعريف الطباعة CSS

إذا كنت تقوم بإنشاء محتوى يهدف إلى أن تبدو بطريقة محددة ، فقد ترغب في النظر في تنسيق يُقصد به الطباعة ، مثل PDF. من المفترض أن تكون HTML/CSS قابلة للتكيف مع تكوينات مختلفة من حجم الشاشة والدقة والتعمق في اللون ، وما إلى ذلك. إنه لا يعني أن قول أن المربع يجب أن يكون بعرض 7.5 بوصة تمامًا.

هل جربت

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

هذه إجابة مدمجة لما تعلمته من منشورات Orion Edwards (وخاصة الرابط إلى webkit.org) و Bill.

يبدو أن الإجابة هي في الواقع 96 نقطة في البوصة ، على الرغم من أنك حرة في تشغيل رمز التالي (قذر من المسلم به) وأحب أن أسمع ما إذا كنت تحصل على إجابة مختلفة:

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

كما تقول مقالة WebKit.org ، فإن هذا الرقم قياسي إلى حد ما ، ولا يتأثر بالطابعة أو النظام الأساسي ، لأن أولئك الذين يستخدمون DPI مختلف.

حتى لو لم يكن كذلك ، باستخدام هذا الرمز أعلاه ، يمكنك معرفة الإجابة التي تحتاجها. بعد ذلك ، يمكنك استخدام DPI في JavaScript الخاص بك ، مما يحد من عرض العميل مثل Bill ، إلى جانب CSS الذي يستخدم بوصة ، للحصول على شيء يطبع بشكل صحيح طالما أن المستخدم لا يقوم بأي تحجيم غير تقليدي مثل Orion Edwards-أو أو على الأقل ، بعد هذه النقطة ، يعود الأمر إلى المستخدم ، الذي قد يرغب في فعل شيء ما وراء ما يدور في ذهن المبرمج ، مثل الطباعة على ورقة 11x17 شيء مصمم للمبرمج لتناسب 8.5x11 ، ولكن لا يزال ، سوف "العمل الصحيح" لما يريده المستخدم حتى ذلك الحين.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top