शुद्ध सीएसएस अक्षरों की गतिशील राशि के आधार पर फ़ॉन्ट-आकार को उत्तरदायी बनाने के लिए

Question

मुझे पता है कि यह जावास्क्रिप्ट के साथ काफी आसानी से हल किया जा सकता है, लेकिन मुझे केवल शुद्ध सीएसएस समाधान में दिलचस्पी है।

मैं पाठ को गतिशील रूप से आकार देने का एक तरीका चाहता हूं ताकि यह हमेशा एक निश्चित div में फिट हो। यहाँ नमूना मार्कअप है:

<div style="width: 200px; height: 1em; overflow: hidden;">
  <p>Some sample dynamic amount of text here</p>
</div>

मैं सोच रहा था कि हो सकता है कि यह संभव है कि ईम में कंटेनर की चौड़ाई निर्दिष्ट करके, और उस मूल्य को प्राप्त करने के लिए फ़ॉन्ट-आकार प्राप्त किया जाए?

Comments

वाह, रुको। एस चीज़ widthमें निर्दिष्ट करने का emतरीका दूसरे तरीके से होता है। यह widthउस पर निर्भर करता है font-size। @ जोसेफिल्बर वही है जो मैंने सोचा था।

— ऐना

मैं इस सवाल को लेकर उत्सुक हूं। एक साधारण जावास्क्रिप्ट फ़ंक्शन लिखने के बजाय शुद्ध सीएसएस समाधान का उपयोग करने के लिए ड्राइव क्या है?

— ऑस्टिन मुलिंस

ड्राइव सिर्फ इसलिए है क्योंकि समस्या मौजूद है और शुद्ध सीएसएस समाधान अद्भुत होगा। बस कुछ शैलियों को लागू करने की संभावनाओं के बारे में सोचें और यह जानकर कि आपकी गतिशील सामग्री कभी भी डिज़ाइन को नहीं तोड़ेंगी।

— DMTintner

बस अगर कोई इस सवाल पर अड़ जाता है

— DMTintner

fitText की सीमाएँ हैं। उदाहरण के लिए, मैं केवल इसे छोटे स्क्रीन के लिए चलाना चाहता हूं, 500px की चौड़ाई से परे या तो, मैं नहीं चाहता कि मेरी हेडिंग किसी और को उड़ा दें। इसके लिए अधिक जावास्क्रिप्ट लिखने की आवश्यकता है। जब आप लेआउट के लिए जावास्क्रिप्ट का उपयोग करते हैं तो चिंताओं का अलगाव बहुत जल्दी टूट जाता है। यह सिर्फ एक त्वरित एक लाइनर कभी नहीं है।

— कोस्टा

Answer 1

मुझे अभी पता चला है कि यह VW इकाइयों का उपयोग करना संभव है। वे व्यूपोर्ट चौड़ाई सेट करने से जुड़ी इकाइयाँ हैं। कुछ कमियां हैं, जैसे विरासत ब्राउज़र समर्थन की कमी, लेकिन यह निश्चित रूप से उपयोग करने पर गंभीरता से विचार करने के लिए कुछ है। इसके अलावा आप अभी भी पुराने ब्राउज़रों के लिए कमियां प्रदान कर सकते हैं जैसे:

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/ और https://medium.com/design-ux/66bddb327bb1

Comments

यह एक के लिए 2 अप देना होगा। जीत के लिए सीएसएस समाधान!

— मिहकेल एल।

प्रो टिप: आप पाठ को बहुत छोटा होने से रोक सकते हैं और कुछ font-size:calc(100% + 2vw);या ऐसा करके नियंत्रण वापस पा सकते हैं । यह थोड़े है min-font-size। के लिए ब्राउज़र समर्थन calcसमान है vw।

— प्रिंज़ोर्न

अपवित्र, लेकिन अब मैं सोच रहा हूं कि क्या यह वास्तव में मूल प्रश्न का उत्तर देता है। मेरी समझ यह है कि आपकी पाठ की लंबाई गतिशील है और आप अपनी div(200px) की चौड़ाई को हमेशा फिट करने के लिए फ़ॉन्ट आकार बदलना चाहते हैं । यह उस समस्या को कैसे हल करता है?

— फ़्लोरेमिन

मैं @ फ्लोरीन की भावना से सहमत हूं। यह स्केल-ऑफ / व्यू-पोर्ट चौड़ाई / ऊँचाई के आधार पर सभी फ़ॉन्ट आकार देता है, पाठ की चौड़ाई / ऊँचाई के कंटेनर पर नहीं।

— मिकजुइस

@Floremin सही है, यह सवाल को संबोधित नहीं करता है। यह कंटेनर की चौड़ाई के एक फ़ंक्शन के रूप में फ़ॉन्ट-आकार की गणना करता है, न कि स्ट्रिंग की लंबाई के एक फ़ंक्शन के रूप में क्योंकि यह कंटेनर की चौड़ाई से संबंधित है

— हेनरी

Answer 2

CSS3 पोर्ट को देखने के लिए नए आयामों का समर्थन करता है। लेकिन यह एंड्रॉइड <4.4 में काम नहीं करता है

1. व्यूपोर्ट की चौड़ाई का 3.2vw = 3.2%
2. 3.2vh = व्यूपोर्ट की ऊंचाई का 3.2%
3. 3.2vmin = 3.2vw या 3.2vh का छोटा

4. 3.2vmax = 3.2vw या 3.2vh का बड़ा हिस्सा

   body
   {
       font-size: 3.2vw;
   }

देख css-tricks.com / .... और यह भी देखो caniuse.com / ....

या

मीडिया क्वेरी का उपयोग करें। सबसे अच्छा तरीका% या em में आयामों का उपयोग करना है। बस आधार फ़ॉन्ट आकार बदलें सब कुछ बदल जाएगा।

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}


h5{
    font-size: 1.4em;
}

% या em में आयामों का उपयोग करें । बस आधार फ़ॉन्ट आकार बदलें सब कुछ बदल जाएगा। पिछले एक में आप सिर्फ बॉडी फॉन्ट बदल सकते हैं और हर बार h1 नहीं कर सकते या बेस फॉन्ट साइज को डिवाइस के डिफॉल्ट में बदल सकते हैं और सभी को em में आराम दे सकते हैं

देखिए kyleschaeffer.com / .... em, px और% के बारे में अधिक जानकारी के लिए

Comments

प्रश्न कंटेनर के सापेक्ष स्केलिंग के बारे में था, न कि पूरे व्यूपोर्ट के लिए।

— अरनौद वेल

... और प्रश्न वर्णों की मात्रा के आधार पर स्केलिंग के बारे में थे

— ब्रावो

Answer 3

आप calcदृष्टिकोण में रुचि हो सकती है :

font-size: calc(4vw + 4vh + 2vmin);

किया हुआ। आपके स्वाद से मेल खाने तक ट्विक मान।

स्रोत: https://codepen.io/CrocoDillon/pen/fBJxu

Answer 4

एकमात्र तरीका शायद अलग-अलग स्क्रीन आकारों के लिए अलग-अलग चौड़ाई निर्धारित करना होगा, लेकिन यह दृष्टिकोण बहुत ही गलत है और आपको एक समाधान का उपयोग करना चाहिए।

h1 {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    h1 {
        font-size: 18px;
    }
}

@media all and (max-device-width: 640px){
    h1 {
        font-size: 16px;
    }
}

@media all and (max-device-width: 320px){
    h1 {
        font-size: 12px;
    }
}

Answer 5

मुझे पता है कि मैं एक लंबे मृत प्रश्न का पुनर्मूल्यांकन कर रहा हूं, लेकिन मेरे पास एक ही प्रश्न था और मैं कुछ जोड़ना चाहता था। कृपया मुझे इसके लिए मना न करें, मुझे लगा कि इस उत्तर को सही ठहराने के लिए यह काफी महत्वपूर्ण है, यदि आवश्यक हो तो मैं हटा दूंगा। @ जोसेफ सिल्बर गलत है, सभी संभावनाओं को कोड करना वास्तव में ऐसा करने का एक व्यवहार्य तरीका है। इसका कारण यह है कि वास्तव में अनंत संभावनाएं नहीं हैं। ठीक है, तकनीकी रूप से हैं, लेकिन आपके 99% आगंतुक मानक संकल्प का उपयोग कर रहे हैं। यह मोबाइल के लिए दोगुना सच है (उत्तरदायी वेब डिज़ाइन का मुख्य कारण) क्योंकि अधिकांश मोबाइल ओएस पूर्ण विंडो नहीं चलने के साथ ऐप्स चलाते हैं।

साथ ही, स्क्रॉलबार के कारण ऊंचाई बहुत अधिक अप्रासंगिक है (एक बिंदु पर, मैं तुरंत एक वेब पेज छोड़ दूंगा जो 4 या 5 फीट से अधिक लंबा था, लेकिन यह ज्यादातर सच है), इसलिए आपको केवल चौड़ाई के बारे में चिंता करने की आवश्यकता है। और वास्तव में, आपके लिए कोड की एकमात्र चौड़ाई निम्नलिखित हैं: 240, 320, 480 (पुराने iThings के लिए), 640, 800, 1024, 1280, 1440, 1600, 1920, 2048, 2560। 4k, यह आपकी छवियों को बहुत अधिक फूला देगा और 100% चौड़ाई तक फैला हुआ 2560 आकार 4k मॉनीटर पर ठीक लगता है (मैंने यह परीक्षण किया है)। इसके अलावा, पिछले पोस्टर के अनुसार 720 (720x480) से परेशान न हों। इसका रिज़ॉल्यूशन लगभग विशेष रूप से डिजिटल कैमरों द्वारा उपयोग किया जाता है, और तब भी यह बहुत ही असामान्य है।

यदि कोई विदेशी संकल्प का उपयोग कर रहा है, तो पिछले 15 वर्षों में किए गए लगभग किसी भी रेंडरर को बंद कर दिया जाएगा, इसलिए यदि किसी की स्क्रीन की चौड़ाई है, तो कहें। 1100, इसकी 1024 सीएसएस नियम को लोड करने जा रहा है, आपकी साइट को तोड़ना नहीं चाहिए। यह एक उत्तरदायी नियम को अनावश्यक बनाने की कोशिश करके विदेशी प्रस्तावों के लिए लेखांकन प्रस्तुत करता है, और यह विचार कि आपको पिक्सेल द्वारा हर संभव सेटअप पिक्सेल के लिए कोड करने की आवश्यकता है, जब तक कि कोई व्यक्ति वेब ब्राउज़र का उपयोग करने के लिए इतना पुराना न हो कि आपकी साइट पर लोड न हो। वैसे भी सब।

Comments

और अब iPhone

— 6/6

यदि SASS या कम्पास का उपयोग करना और फ़ंक्शंस में प्राप्त करना संभावित रूप से आसान है। एक फ़ंक्शन आपके लिए सीएसएस काम कर सकता है; लिखने-एक बार उपयोग-कई।

— cjbarth

ऊँचाई बहुत अधिक अप्रासंगिक है जब तक कि आप डिवाइस को

— 90re की

हालांकि कंटेनर की चौड़ाई से इसका कोई लेना-देना नहीं है - जिनमें से आसानी से अनंत संभावनाएं हैं।

— mcheah

Answer 6

संदर्भ के लिए, एक गैर-सीएसएस समाधान:

नीचे कुछ जेएस है जो एक कंटेनर के भीतर पाठ की लंबाई के आधार पर फ़ॉन्ट को फिर से आकार देता है।

Codepen थोड़ा संशोधित कोड है, लेकिन नीचे के रूप में एक ही विचार के साथ:

function scaleFontSize(element) {
    var container = document.getElementById(element);

    // Reset font-size to 100% to begin
    container.style.fontSize = "100%";

    // Check if the text is wider than its container,
    // if so then reduce font-size
    if (container.scrollWidth > container.clientWidth) {
        container.style.fontSize = "70%";
    }
}

मेरे लिए, मैं इस फ़ंक्शन को तब कॉल करता हूं जब कोई उपयोगकर्ता ड्रॉप-डाउन में चयन करता है, और फिर मेरे मेनू में एक div पॉपुलेट हो जाता है (यह वह जगह है जहां मेरे पास डायनामिक टेक्स्ट होता है)।

    scaleFontSize("my_container_div");

इसके अलावा, मैं भी अभी तक भी काटना सीएसएस दीर्घवृत्त का उपयोग करें ( "...") लंबे समय तक पाठ भी है, तो जैसे:

#my_container_div {
    width: 200px; /* width required for text-overflow to work */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

तो, अंततः:

• लघु पाठ: उदाहरण के लिए "आवेदन"

  पूरी तरह से गाया हुआ, अच्छे बड़े अक्षर।

• लंबा पाठ: उदाहरण के लिए "APPLES & ORANGES"

  उपरोक्त JS स्केलिंग फ़ंक्शन के माध्यम से, 70% से कम हो जाता है।

• सुपर लंबा पाठ: जैसे "APPLES & ORANGES & BANAN ..."

  70% से कम हो जाता है और सीएसएस नियम के साथ उपरोक्त जेएस स्केलिंग फ़ंक्शन के माध्यम से एक "..." दीर्घवृत्त के साथ छोटा हो जाता है।

आप समान फ़ॉन्ट आकार रखते हुए पाठ को संकरा बनाने के लिए CSS पत्र-रिक्ति के साथ खेल सकते हैं।

Comments

उपयोगकर्ता द्वारा शुद्ध CSS समाधान के लिए पूछे जाने पर वोट दिया गया

— LongUsername

Answer 7

जैसा कि @ DMTinter के पोस्ट में टिप्पणियों में कई उल्लेख किया गया है, OP पात्रों की संख्या ("राशि") के बारे में पूछ रहा था। वह CSS के बारे में भी पूछ रहा था, लेकिन जैसा कि @Alexander ने संकेत दिया, "यह केवल CSS के साथ संभव नहीं है"। जहाँ तक मैं बता सकता हूँ, इस समय यह सच प्रतीत होता है, इसलिए यह भी तर्कसंगत लगता है कि लोग अगली सबसे अच्छी बात जानना चाहेंगे।

मुझे इस पर विशेष गर्व नहीं है, लेकिन यह काम करता है। इसे पूरा करने के लिए अत्यधिक मात्रा में कोड की तरह लगता है। यह कोर है:

function fitText(el){
  var text = el.text();
  var fsize = parseInt(el.css('font-size'));
  var measured = measureText(text, fsize);

  if (measured.width > el.width()){
    console.log('reducing');
    while(true){
      fsize = parseInt(el.css('font-size'));
      var m = measureText(text, fsize );
      if(m.width > el.width()){
        el.css('font-size', --fsize + 'px');
      }
      else{
        break;
      }
    }
  }
  else if (measured.width < el.width()){
    console.log('increasing');
    while(true){
      fsize = parseInt(el.css('font-size'));
      var m = measureText(text, fsize);
      if(m.width < el.width()-4){ // not sure why -4 is needed (often)
        el.css('font-size', ++fsize + 'px');
      }
      else{
        break;
      }
    }
  }
}

यहाँ एक जेएस बिन है: http://jsbin.com/pidavon/edit?html,css,js,console,output
कृपया इसे सुधारने के लिए संभावित सुझाव दें (मैं पाठ को मापने के लिए कैनवास का उपयोग करने में वास्तव में दिलचस्पी नहीं रखता हूं ... ऐसा लगता है) बहुत अधिक उपरि (?) की तरह।

नापसंद फ़ंक्शन के लिए @Pete का धन्यवाद: https://stackoverflow.com/a/4032497/442665

Answer 8

यह समाधान भी मदद कर सकता है:

$(document).ready(function () {
    $(window).resize(function() {
        if ($(window).width() < 600) {
            $('body').css('font-size', '2.8vw' );
        } else if ($(window).width() >= 600 && $(window).width() < 750) {
            $('body').css('font-size', '2.4vw');
        } 
         // and so on... (according to our needs)
        } else if ($(window).width() >= 1200) {
            $('body').css('font-size', '1.2vw');
        }
    }); 
  });

इसने मेरे लिए अच्छा काम किया!

Comments

यह वर्ड-रैप को कैसे ध्यान में रखता है?

— लेईफ नेलैंड

Answer 9

प्रयास करें आरएफएस (उत्तरदायी फ़ॉन्ट आकार के लिए) MartijnCuppens कि शायद हो जाएगा द्वारा पुस्तकालय बूटस्ट्रैप में लागू

Answer 10

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

इस समीकरण का उपयोग करें।

1440 और 768 से बड़े या छोटे किसी भी चीज के लिए, आप या तो इसे स्थिर मूल्य दे सकते हैं, या समान दृष्टिकोण लागू कर सकते हैं।

Vw समाधान के साथ दोष यह है कि आप स्केल अनुपात सेट नहीं कर सकते हैं, स्क्रीन रिज़ॉल्यूशन 1440 पर 5vw कह सकते हैं, 60px फ़ॉन्ट-आकार, आपके विचार फ़ॉन्ट आकार समाप्त हो सकता है, लेकिन जब आप विंडो की चौड़ाई को 768 तक घटाते हैं, तो यह समाप्त हो सकता है 12px होने के नाते, न्यूनतम नहीं जो आप चाहते हैं। इस दृष्टिकोण के साथ, आप अपनी ऊपरी सीमा और निचली सीमा निर्धारित कर सकते हैं, और फ़ॉन्ट बीच में ही स्केल हो जाएगा।

Answer 11

अपने अंदर स्ट्रिंग की लंबाई के आधार पर फ़ॉन्ट-आकार की गणना करने वाली एक लुकअप तालिका बनाएं <div>।

const fontSizeLookupTable = () => {
  // lookup table looks like: [ '72px', ..., '32px', ..., '16px', ..., ]
  let a = [];
  // adjust this based on how many characters you expect in your <div>
  a.length = 32;
  // adjust the following ranges empirically
  a.fill( '72px' ,     );
  a.fill( '32px' , 4 , );
  a.fill( '16px' , 8 , );
  // add more ranges as necessary
  return a;
}

const computeFontSize = stringLength => {
  const table = fontSizeLookupTable();
  return stringLength < table.length ? table[stringLength] : '16px';
}

अनुभवजन्य परीक्षण द्वारा सभी मापदंडों को समायोजित और ट्यून करें।

Comments

मापदंडों के लिए अनुभवजन्य परीक्षण अनिवार्य रूप से समय-जटिलता के साथ एक द्विआधारी खोज है: ओ (लॉग एन)।

— लेट मी टिंक अबाउट इट

आप वास्तव में इस फ़ंक्शन को कॉल करना भूल गए हैं, इसके साथ ही सरणी की लंबाई को संपत्ति तक पहुंचने की आवश्यकता है।

— lukk

@lukk: प्रतिक्रिया के लिए धन्यवाद। अब निश्चित कर दिया।

— आइए मैं इसके बारे में टिंक करता