অক্ষরের গতিশীল পরিমাণের ভিত্তিতে ফন্ট-আকারকে প্রতিক্রিয়াশীল করতে খাঁটি সিএসএস CSS

Question

আমি জানি যে এটি জাভাস্ক্রিপ্টের সাথে মোটামুটি সহজেই সমাধান করা যেতে পারে তবে আমি কেবল খাঁটি সিএসএস সমাধানে আগ্রহী।

আমি পাঠ্যের গতিশীল আকার পরিবর্তন করার একটি উপায় চাই যাতে এটি সর্বদা একটি নির্দিষ্ট ডিভের সাথে ফিট করে। নমুনা মার্কআপটি এখানে:

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

আমি ভাবছিলাম যে EMS এ ধারকটির প্রস্থ উল্লেখ করে এবং ফন্ট-আকারকে সেই মানটি পাওয়ার জন্য এটি সম্ভব হতে পারে?

Comments

বাহ, অপেক্ষা করুন। widthইন emজিনিসটির নির্দিষ্টকরণ অন্যদিকে চলে other এটি widthযে উপর নির্ভর করে font-size। @ জোসেফসিলবার ঠিক এটিই আমি ভেবেছিলাম।

— আনা

আমি এই প্রশ্ন সম্পর্কে উত্সাহী। একটি সাধারণ জাভাস্ক্রিপ্ট ফাংশন লেখার পরিবর্তে খাঁটি সিএসএস সমাধান ব্যবহার করার ড্রাইভ কী?

— অস্টিন মুলিনস

ড্রাইভটি কেবল কারণ সমস্যাটি রয়েছে এবং একটি খাঁটি সিএসএস সমাধান আশ্চর্যজনক হবে। মাত্র কয়েকটি স্টাইল প্রয়োগ করার সম্ভাবনাগুলি সম্পর্কে চিন্তা করুন এবং জেনে রাখুন যে আপনার গতিশীল সামগ্রী কখনই ডিজাইনটি ভঙ্গ করবে না।

— ডিএমটিন্টনার

এই ক্ষেত্রে কেউ যদি হোঁচট খায় এবং জেএস ব্যবহার করে কিছু মনে করেন না, ফিটটেক্সটজএস ডটকম

— ডিএমটিন্টনার

ফিট টেক্সটের সীমাবদ্ধতা রয়েছে। উদাহরণস্বরূপ, আমি এটি কেবল 500 পিক্স বা প্রস্থের বাইরেও ছোট পর্দার জন্য চালাতে চাই, আমি চাই না যে আমার শিরোনামগুলি আরও ফুটিয়ে উঠবে। এর জন্য আরও জাভাস্ক্রিপ্ট লেখা দরকার। আপনি যখন বিন্যাসের জন্য জাভাস্ক্রিপ্ট ব্যবহার করেন তখন উদ্বেগের বিভাজন খুব দ্রুত ভেঙে যায়। এটি কখনই কেবল একটি দ্রুত লাইনার নয়।

— কোস্টা

Answer 1

আমি সবেমাত্র জানতে পেরেছি যে এটি ভিডাব্লু ইউনিট ব্যবহার করে সম্ভব। তারা ভিউপোর্টের প্রস্থ নির্ধারণের সাথে যুক্ত ইউনিট। লিগ্যাসি ব্রাউজার সমর্থনের অভাবের মতো কিছু ত্রুটি রয়েছে, তবে এটি অবশ্যই ব্যবহারকে গুরুত্ব সহকারে বিবেচনা করার মতো। এছাড়াও আপনি এখনও পুরানো ব্রাউজারগুলির জন্য ফলব্যাকগুলি সরবরাহ করতে পারেন:

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) প্রস্থের সাথে মাপসই ফন্টের আকার পরিবর্তন করতে চান । এটি কীভাবে এই সমস্যার সমাধান করবে?

— ফ্লোরমিন

আমি @ ফ্লোরমিনের অনুভূতির সাথে একমত এই পাঠ্যটির প্রস্থ / উচ্চতার ধারক নয়, ভিউ-পোর্ট প্রস্থ / উচ্চতার উপর ভিত্তি করে সমস্ত ফন্টের আকারকে স্কেল করে।

— মিকজুইস

@ ফ্লোরমিন সঠিক, এটি প্রশ্নের সমাধান করে না। এটি ধারক প্রস্থের ফাংশন হিসাবে ফন্ট-আকার গণনা করে, স্ট্রিং দৈর্ঘ্যের কোনও ফাংশন হিসাবে এটি ধারক প্রস্থের সাথে সম্পর্কিত নয়

— হেনরি

Answer 2

সিএসএস 3 নতুন মাত্রা সমর্থন করে যা পোর্ট দেখার সাথে সম্পর্কিত relative তবে এটি অ্যান্ড্রয়েড <4.4 এ কাজ করে না

1. 3.2vw = ভিউপোর্টের প্রস্থের 3.2%
2. ৩.২vh = ভিউপোর্টের উচ্চতার ৩.২%
3. 3.2vmin = 3.2vw বা 3.2vh এর ছোট

4. 3.2vmax = 3.2vw বা 3.2vh এর বড়

   body
   {
       font-size: 3.2vw;
   }

দেখতে css-tricks.com / .... এবং তাকান caniuse.com / ....

অথবা

মিডিয়া ক্যোয়ারী ব্যবহার করুন .তম উপায় হল% বা ইমের মধ্যে মাত্রা ব্যবহার করা। শুধু বেস ফন্টের আকার পরিবর্তন করুন সবকিছু পরিবর্তন হবে।

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

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


h5{
    font-size: 1.4em;
}

% বা em এ মাত্রা ব্যবহার করুন । শুধু বেস ফন্টের আকার পরিবর্তন করুন সবকিছু পরিবর্তন হবে। পূর্বের একটিতে আপনি কেবল প্রতিবারের জন্য বডি ফন্ট পরিবর্তন করতে পারেন এবং প্রতিবার এইচ 1 নয় বা বেস ফন্টের আকারটিকে ডিভাইসের ডিফল্টে রেখে সমস্তকে এমতে রেখে দিতে পারেন

দেখতে kyleschaeffer.com / .... ই.এম. সম্পর্কে আরো তথ্য, px আকারে এবং% জন্য

Comments

প্রশ্নটি কন্টেইনারটির সাথে সম্পর্কিত, পুরো ভিউপোর্টের সাথে নয়।

— আরনাউড ওয়েল

... এবং প্রশ্নগুলি চরিত্রের পরিমাণের ভিত্তিতে স্কেলিং সম্পর্কে ছিল

— ব্র্যাভো

Answer 3

আপনি calcপদ্ধতির প্রতি আগ্রহী হতে পারেন :

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

সম্পন্ন. আপনার স্বাদের সাথে ম্যাচ হওয়া পর্যন্ত সাময়িক মানগুলি।

সূত্র: https://codepen.io/CocoDillon/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 (পুরানো আইটিংসের জন্য), 640, 800, 1024, 1280, 1440, 1600, 1920, 2048, 2560. এমনকি বিরক্ত করবেন না 4 কে, এটি আপনার চিত্রগুলি খুব বেশি প্রস্ফুটিত করবে এবং 100% প্রস্থে প্রসারিত 2560 মাপ 4k মনিটরে (ঠিক আছে আমি এটি পরীক্ষা করে দেখেছি) দেখতে খুব সুন্দর দেখায়। এছাড়াও, আগের পোস্টারটির পরামর্শ মতো 720 (720x480) নিয়ে বিরক্ত করবেন না। এটির রেজোলিউশনটি ডিজিটাল ক্যামেরাগুলি দ্বারা প্রায় একচেটিয়াভাবে ব্যবহৃত এবং তারপরেও এটি খুব অস্বাভাবিক।

কেউ যদি বহিরাগত রেজোলিউশন ব্যবহার করে থাকেন, বিগত 15 বছরে তৈরি প্রায় কোনও রেন্ডারার গোল হয়ে যাবে, সুতরাং কারও পর্দার প্রস্থ যদি হয়, বলুন। 1100, এটি 1024 সিএসএস নিয়মটি লোড করতে চলেছে, আপনার সাইটটি ভাঙা উচিত নয়। এটি অযৌক্তিক প্রতিক্রিয়াশীল নিয়ম তৈরি করার চেষ্টা করে বহিরাগত রেজোলিউশনের জন্য অ্যাকাউন্টিংকে রেন্ডার করে এবং পিক্সেল অনুসারে আপনার প্রতিটি সেটআপ পিক্সেলের জন্য কোডিং করা ধারণাটি হাস্যকর, যদি না কোনও ওয়েব ব্রাউজার ব্যবহার করে এত পুরানো হয় যে আপনার সাইট সম্ভবত লোড হবে না যাইহোক।

Comments

এবং এখন আইফোন

— 6/6

SASS বা কম্পাস ব্যবহার করে এবং কার্যক্রমে প্রবেশ করা সম্ভব হলে আরও সহজ। কোনও ফাংশন আপনার জন্য সিএসএসের সমস্ত কাজ করতে পারে; লেখা-একবার ব্যবহারযোগ্য অধিকের।

— সিজেবার্থ

আপনি ডিভাইসটিকে 90º দিকে না লাগিয়ে দেওয়া পর্যন্ত উচ্চতাটি অনেকটা অপ্রাসঙ্গিক, এটি

— কারভো লোকো

এটি কোনও ধারক প্রস্থের সাথে কোনও সম্পর্ক রাখে না - যার মধ্যে সহজেই অসীম সম্ভাবনা রয়েছে।

— mcheah

Answer 6

রেফারেন্সের জন্য, একটি নন-সিএসএস সমাধান:

নীচে কিছু জেএস রয়েছে যা কোনও ধারকের মধ্যে পাঠ্যের দৈর্ঘ্যের উপর নির্ভর করে একটি ফন্টকে আবার আকার দেয়।

সামান্য পরিবর্তিত কোড সহ কোডপেন , তবে নীচের মত একই ধারণা:

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%";
    }
}

আমার জন্য, আমি যখন এই ফাংশনটি কল করি যখন কোনও ব্যবহারকারী একটি ড্রপ-ডাউনে একটি নির্বাচন করে, এবং তারপরে আমার মেনুতে একটি ডিভ পপুলেটে যায় (এখানেই আমার ডায়নামিক পাঠ্য সংঘটিত হয়)।

    scaleFontSize("my_container_div");

তদতিরিক্ত, আমি আরও দীর্ঘতর পাঠ্যকে ছাঁটাই করতে সিএসএস উপবৃত্তগুলি ("...") ব্যবহার করি, যেমন:

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

সুতরাং, শেষ পর্যন্ত:

• সংক্ষিপ্ত পাঠ্য: যেমন "অ্যাপল"

  সম্পূর্ণরূপে রেন্ডার, দুর্দান্ত বড় অক্ষর।

• দীর্ঘ পাঠ্য: যেমন "অ্যাপল এবং কমলা"

  উপরের জেএস স্কেলিং ফাংশনটির মাধ্যমে 70% কে কমিয়ে আনা হবে।

• অত্যন্ত দীর্ঘ পাঠ্য: যেমন "অ্যাপল এবং কমলা এবং বন ..."

  সিএসএস নিয়মের সাথে উপরের জেএস স্কেলিং ফাংশনটির মাধ্যমে 70০% কে কমিয়ে আনা হবে এবং "..." উপবৃত্তের সাহায্যে কেটে যায়।

আপনি একই ফন্টের আকারটি রেখে পাঠ্য সংকীর্ণ করতে সিএসএস লেটার-স্পেসিংয়ের সাথে খেলতেও অন্বেষণ করতে পারেন।

Comments

ব্যবহারকারী খাঁটি সিএসএস সমাধানের জন্য জিজ্ঞাসা করার সাথে সাথে ভোট দিয়েছেন

— আরেকটি লং

Answer 7

অনেকে @ ডিএমটিন্টারের পোস্টে মন্তব্যে উল্লিখিত হিসাবে, ওপি অক্ষর পরিবর্তনের সংখ্যা ("পরিমাণ") সম্পর্কে জিজ্ঞাসা করছে। তিনি সিএসএস সম্পর্কেও জিজ্ঞাসা করছিলেন, তবে @ আলেকজান্ডার ইঙ্গিত হিসাবে, "কেবল সিএসএস দিয়ে এটি সম্ভব নয়"। আমি যতদূর বলতে পারি, এই মুহূর্তে এটি সত্য বলে মনে হচ্ছে, তাই এটি যুক্তিযুক্তও বলে মনে হয় যে লোকেরা পরবর্তী সেরা জিনিসটি জানতে চায়।

আমি এটি নিয়ে বিশেষভাবে গর্বিত নই, তবে এটি কাজ করে। এটি সম্পাদন করার জন্য অতিরিক্ত পরিমাণের কোড বলে মনে হচ্ছে। এটি মূল:

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 , আউটপুট
দয়া করে এটির সম্ভাব্য উন্নতির পরামর্শ দিন (আমি পাঠ্যটি মাপার জন্য ক্যানভাস ব্যবহার করতে সত্যই আগ্রহী নই ... মনে হচ্ছে অনেক বেশি ওভারহেডের মতো (?)।

পরিমাপ পাঠের ফাংশনের জন্য @ পেটকে ধন্যবাদ: 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

মার্টিজানক্যাপেনগুলি দ্বারা আরএফএস (প্রতিক্রিয়াশীল ফন্ট আকারের জন্য) লাইব্রেরি চেষ্টা করুন যা সম্ভবত বুটস্ট্র্যাপে প্রয়োগ করা হবে

Answer 10

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

এই সমীকরণটি ব্যবহার করুন।

1440 এবং 768 এর চেয়ে বড় বা ছোট যেকোনো কিছুর জন্য আপনি একে স্থিতিশীল মান দিতে পারেন বা একই পদ্ধতির প্রয়োগ করতে পারেন।

ভিডাব্লু সলিউশনটির অপূর্ণতা হ'ল আপনি স্কেল রেশিও সেট করতে পারবেন না, বলুন পর্দার রেজোলিউশন 145-এ 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

@ লুক্ক: মতামতের জন্য ধন্যবাদ এটি এখনই স্থির করুন।

— আমার সম্পর্কে এটি শুরু করুন