كيف تجد أكبر حجم خط لا يكسر نصًا معينًا؟

Question

أحاول استخدام CSS (تحت @media print) و javaScript لطباعة مستند من صفحة واحدة مع نص معين من النص مصنوع بأكبر قدر ممكن مع الاستمرار في العرض داخل عرض معين. طول النص غير معروف مسبقًا ، لذا فإن ببساطة استخدام خط عرض ثابت ليس خيارًا.

بعبارة أخرى ، أنا أبحث عن تغيير حجم مناسب ، بحيث ، على سبيل المثال ، "IIIII" سيصدر بحجم خط أكبر بكثير من "wwwww" لأن "أنا" أكثر نحافة من "W" في متغير خط العرض.

الأقرب الذي تمكنت من الحصول عليه مع هذا هو استخدام JavaScript لتجربة أحجام الخطوط المختلفة حتى clientWidth صغير بما فيه الكفاية. هذا يعمل بشكل جيد بما يكفي لوسائط الشاشة ، ولكن عندما تقوم بالتبديل إلى الوسائط, ، هل هناك أي ضمان بأن 90 نقطة في البوصة يبدو أنني أحصل على نظامي (أي ، وضعت الهوامش إلى 0.5 في كلا الجانبين ، ولإصدار نص يغير بحيث يناسب ذلك فقط ، أحصل على حوالي 675 clientWidth) سيكون هو نفسه في أي مكان آخر؟ كيف يقرر المتصفح ما هو DPI الذي يجب استخدامه عند التحويل من قياسات البكسل؟ هل هناك أي طريقة يمكنني من خلالها الوصول إلى هذه المعلومات باستخدام JavaScript؟

أحب ذلك إذا كانت هذه مجرد ميزة CSS3 (font-size:max-for-width(7.5in)) ولكن إذا كان الأمر كذلك ، لم أتمكن من العثور عليه.

Answer 1

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

function make_big(id) // must be an inline element inside a block-level element
{
    var e = document.getElementById(id);
    e.style.whiteSpace = 'nowrap';
    e.style.textAlign = 'center';
    var max = e.parentNode.scrollWidth - 4; // a little padding
    e.style.fontSize = (max / 4) + 'px'; // make a guess, then we'll use the resulting ratio
    e.style.fontSize = (max / (e.scrollWidth / parseFloat(e.style.fontSize))) + 'px';
    e.style.display = 'block'; // so centering takes effect
}

Answer 2

تقبل خاصية حجم الخط CSS وحدات الطول تتضمن قياسات مطلقة بالبوصة أو سنتيمترات:

تعتمد وحدات الطول المطلقة بشكل كبير على وسط الإخراج ، وكذلك أقل فائدة من الوحدات النسبية. الوحدات المطلقة التالية متوفرة:

• في (بوصة ؛ 1in = 2.54 سم)
• سم (سنتيمترات ؛ 1 سم = 10 مم)
• مم (ملليمتر)
• PT (النقاط ؛ 1pt = 1/72in)
• الكمبيوتر (PICAS ؛ 1pc = 12pt)

نظرًا لأنك لا تعرف عدد الأحرف التي يتمتع بها نصك بعد ، فقد تحتاج إلى استخدام مجموعة من JavaScript و CSS من أجل تعيين خاصية حجم الخط بشكل صحيح. على سبيل المثال ، خذ طول السلسلة بالأحرف ، وقسّم 8.5 (على افتراض أنك تتوقع من ورق الحرف الأمريكي) من خلال عدد الأحرف وهذا يمنحك الحجم في بوصة لتعيين حجم الخط على هذا الجزء نص. اختبر حجم الخط مع قياسات مطلقة في Firefox و Safari و IE6 لذلك يجب أن يكون محمولًا جدًا. امل ان يساعد.

تعديل: لاحظ أنك قد تحتاج أيضًا إلى اللعب مع إعدادات مثل خاصية تباعد الحروف وكذلك تجربة الخط الذي تستخدمه ، لأن إعداد حجم الخط ليس حقًا عرض الحروف ، والذي سيكون مختلفًا على أساس على تباعد الحروف ، والخط ، يتناسب مع الطول. أوه ، واستخدام خط monospace يساعد ؛)

Answer 3

لا أعرف طريقة للقيام بذلك في CSS. أعتقد أن أفضل رهان لك هو استخدام JavaScript:

1. ضع النص في Div
2. احصل على أبعاد Div
3. اجعل النص أصغر إذا لزم الأمر
4. عد إلى الخطوة 2 حتى يصبح النص صغيرًا بما يكفي

هنا بعض نموذج رمز للكشف عن حجم div.