সিএসএসে লাইনের দৈর্ঘ্য সেট করা (এবং একটি ধারকটিতে পাঠ্য ফিটিং)

প্রথমত, লাইন দৈর্ঘ্য কত? রেখার দৈর্ঘ্য এমন একটি ধারকটির দৈর্ঘ্য যা মাল্টি-লাইনের পাঠ্যের একটি দেহ ধারণ করে। “মাল্টি-লাইন” এখানে মূল অংশ, কারণ পাঠ্যের একটি লাইনের শুরুটি পাঠ্যের পূর্বের রেখার শেষ থেকে খুব দূরে থাকলে পাঠ্যটি কম পঠনযোগ্য হয়ে যায়। এটি ব্যবহারকারীদের ভুল করে লাইনগুলি পুনরায় পড়তে এবং সাধারণত পড়ার সময় হারিয়ে যায়।

ভাগ্যক্রমে, ওয়েব সামগ্রী অ্যাক্সেসিবিলিটি গাইডলাইনস (ডাব্লুসিএজি) আমাদের অনুসরণ করার জন্য একটি দুর্দান্ত কঠোর নিয়ম দেয়: একটি লাইনে 80 টির বেশি অক্ষর নেই (40 যদি ভাষাটি চীনা, জাপানি বা কোরিয়ান হয়), যা চরিত্রটি ব্যবহার করে প্রয়োগ করা অত্যন্ত সহজ (ch) ইউনিট:

width: 80ch;

এর প্রস্থ 1ch সংখ্যার প্রস্থের সমান 0 আপনার নির্বাচিত ফন্টে, তাই সঠিক প্রস্থটি ফন্টের উপর নির্ভর করে।

সেট করা অনুকূল রেখার দৈর্ঘ্য

কেবলমাত্র আপনাকে একটি লাইনে 80 টি অক্ষর অনুমতি দেওয়ার কারণে, এর অর্থ এই নয় যে আপনি আছে এই সংখ্যার জন্য লক্ষ্য। একটি গবেষণা দ্বারা বায়মার্ড ইনস্টিটিউট প্রকাশিত হয়েছে যে 50-75 অক্ষরের একটি রেখার দৈর্ঘ্য হ’ল সর্বোত্তম দৈর্ঘ্য-এটি বিবেচনায় নেয় যে ছোট রেখার দৈর্ঘ্যের অর্থ আরও লাইন এবং তাই ব্যবহারকারীদের পড়ার ভুল করার আরও বেশি সুযোগ।

বলা হচ্ছে, আমাদের সম্পর্কে ভাবার জন্য প্রতিক্রিয়াশীল নকশাও রয়েছে, সুতরাং ন্যূনতম প্রস্থ সেট করা (যেমন, min-width: 50ch) একটি ভাল ধারণা নয় কারণ আপনি একটি লাইনে 50 টি অক্ষর ফিট করার সম্ভাবনা কম, উদাহরণস্বরূপ, একটি স্ক্রিন/উইন্ডো আকার যা 320 পিক্সেল প্রশস্ত। সুতরাং, এখানে কিছুটা উপদ্রব জড়িত রয়েছে এবং এটি পরিচালনা করার সর্বোত্তম উপায় হ’ল এর সংমিশ্রণ clamp() এবং min() ফাংশন:

• clamp():: শতাংশ, ভিউপোর্ট বা ধারক ক্যোয়ারী ইউনিট ব্যবহার করে কোনও ধারক সম্পর্কিত একটি তরল মান সেট করুন, তবে ন্যূনতম এবং সর্বাধিক সীমাবদ্ধতার সাথে।
• min():: কমা-বিচ্ছিন্ন মানগুলির তালিকা থেকে ক্ষুদ্রতম মান সেট করুন।

এর সাথে শুরু করা যাক min()। যুক্তিগুলির একটি হ’ল 93.75vw। ধরে নিই যে ধারকটি পুরো ভিউপোর্ট জুড়ে প্রসারিত, এটি সমান হবে 300px যখন ভিউপোর্টের প্রস্থ হয় 320px (অনুমতি দেওয়া 20px আপনি উপযুক্ত হিসাবে দেখানোর সাথে সাথে বিতরণ করা হবে) এবং 1350px যখন ভিউপোর্টের প্রস্থ হয় 1440px। যাইহোক, যতক্ষণ অন্য যুক্তি হিসাবে (50ch) দুটি মানের মধ্যে সবচেয়ে ছোট, এটিই মান min() সমাধান হবে।

min(93.75vw, 50ch);

পরবর্তী clamp()যা নিম্নলিখিত ক্রমে তিনটি যুক্তি গ্রহণ করে: সর্বনিম্ন, পছন্দসই এবং সর্বোচ্চ মান। এভাবেই আমরা লাইনের দৈর্ঘ্য সেট করব।

ন্যূনতম জন্য, আপনি আপনার প্লাগ ইন করতে চান min() ফাংশন, যা সেট করে 50ch রেখার দৈর্ঘ্য তবে কেবল শর্তাধীন। সর্বাধিক জন্য, আমি পরামর্শ 75chপূর্বে উল্লিখিত হিসাবে। পছন্দসই মানটি সম্পূর্ণ আপনার উপর নির্ভর করে – সর্বনিম্ন বা সর্বাধিক আঘাত না করার সময় এটি আপনার ধারকটির প্রস্থ হবে।

width: clamp(min(93.75vw, 50ch), 70vw, 75ch);

এছাড়াও, আপনি ব্যবহার করতে পারেন min(), max()এবং calc() আরও উপদ্রব যুক্ত করার জন্য সেই যুক্তিগুলির যে কোনও একটিতে।

যদি ধারকটি খুব সংকীর্ণ মনে হয় তবে font-size খুব বড় হতে পারে। যদি এটি খুব প্রশস্ত মনে হয় তবে font-size খুব ছোট হতে পারে।

কনটেইনারটিতে ফিট টেক্সট (জাভাস্ক্রিপ্ট সহ)

আপনি কি জানেন যে ডিজাইনের প্রবণতা যেখানে একটি ধারকটির প্রস্থে ফিট করার জন্য পাঠ্য তৈরি করা হয়? সাধারণত, যতটা সম্ভব উপলভ্য স্থানটি ব্যবহার করতে? আপনি প্রায়শই এটি বিপণনের পৃষ্ঠা এবং ব্লগ পোস্টগুলিতে শিরোনামগুলিতে প্রয়োগ করতে দেখবেন। ভাল, ক্রিস এটি সম্পর্কে লিখেছেন দুর্ভাগ্যক্রমে সীমাবদ্ধতার সাথে জাভাস্ক্রিপ্ট বা jQuery এর সাথে প্রভাব অর্জনের জন্য বেশ কয়েকটি উপায়কে গোল করে 2018 সালে ফিরে। যাইহোক, শেষটি প্রকাশ করে যে আপনি যতক্ষণ জানেন আপনি কেবল এসভিজি ব্যবহার করতে পারেন viewBox মানগুলি, এবং সেগুলি পাওয়ার জন্য আমার আসলে একটি কৌশল রয়েছে।

যদিও এটি এখনও জাভাস্ক্রিপ্টের 3-5 লাইন প্রয়োজন, এটি আমি খুঁজে পেয়েছি সবচেয়ে সংক্ষিপ্ত পদ্ধতি। এটি এইচটিএমএল এবং সিএসএসে পুরোপুরি স্লাইড হয়, বিশেষত যেহেতু এসভিজি অনেকগুলি সিএসএস বৈশিষ্ট্য (রঙ সহ, ধন্যবাদ সহ ধন্যবাদ জানায় fill: currentColor):

<h1 class="container">
  <svg>
    <text>Fit text to container</text>
  </svg>
</h1>

h1.container {
  /* Container size */
  width: 100%;

  /* Type styles (<text> will inherit most of them) */
  font: 900 1em system-ui;
  color: hsl(43 74% 3%);

  text {
    /*
      We have to use fill: instead of color: here
      But we can use currentColor to inherit the color
    */
    fill: currentColor;
  }
}

/* Select all SVGs */
const svg = document.querySelectorAll("svg");

/* Loop all SVGs */
svg.forEach(element => {
  /* Get bounding box of <text> element */
  const bbox = element.querySelector("text").getBBox();
  /* Apply bounding box values to SVG element as viewBox */
  element.setAttribute("viewBox", (bbox.x, bbox.y, bbox.width, bbox.height).join(" "));
});

কনটেইনারটিতে ফিট টেক্সট (খাঁটি সিএসএস)

আপনি যদি খাঁটি-সিএসএস পদ্ধতিতে নরক-বাঁক হন তবে আপনি হয় ভাগ্য। তবে, আজকাল আমরা সিএসএসের সাথে যে উন্মাদ জিনিসগুলি করতে পারি তা সত্ত্বেও, রোমান কোমারভের ফিট-টু প্রস্থ হ্যাক কিছুটা জটিল (যদিও চিত্তাকর্ষক হলেও)। এখানে এর সংক্ষিপ্তসার:

• পাঠ্যটি কয়েকবার নকল করা হয়েছে (যদিও অ্যাক্সেসযোগ্যভাবে লুকানো aria-hidden এবং আক্ষরিক সঙ্গে লুকানো visibility: hidden) যাতে আমরা লুকানোগুলির সাথে গণিত করতে পারি এবং তারপরে ফলাফলটি দৃশ্যমানটিতে প্রয়োগ করতে পারি।
• কনটেইনার ক্যোয়ারী/কনটেইনার ক্যোয়ারী ইউনিটগুলি ব্যবহার করে, গণিতে একটি স্কেলিং ফ্যাক্টর পেতে ধারকটির ইনলাইন আকার দ্বারা পাঠ্যের ইনলাইন আকারকে ভাগ করে নেওয়া জড়িত, যা আমরা তখন দৃশ্যমান পাঠ্যের উপর ব্যবহার করি font-size এটি বাড়তে বা সঙ্কুচিত করতে।
• স্কেলিং ফ্যাক্টরটি ইউনিটলেস করতে, আমরা এটি ব্যবহার করি tan(atan2()) টাইপ-কাস্টিং ট্রিক।
• কিছু কাস্টম বৈশিষ্ট্য ব্যবহার করে নিবন্ধিত করতে হবে @property এট-বিধি (অন্যথায় তারা উদ্দেশ্য হিসাবে কাজ করে না)।
• ফাইনাল font-size মান ব্যবহার করে clamp() সর্বনিম্ন এবং সর্বাধিক ফন্ট আকার সেট করতে, তবে এগুলি al চ্ছিক।

<span class="text-fit">
  <span>
    <span class="text-fit">
      <span><span>fit-to-width text</span></span>
      <span aria-hidden="true">fit-to-width text</span>
    </span>
  </span>
  <span aria-hidden="true">fit-to-width text</span>
</span>

.text-fit {
  display: flex;
  container-type: inline-size;

  --captured-length: initial;
  --support-sentinel: var(--captured-length, 9999px);

  & > (aria-hidden) {
    visibility: hidden;
  }

  & > :not((aria-hidden)) {
    flex-grow: 1;
    container-type: inline-size;

    --captured-length: 100cqi;
    --available-space: var(--captured-length);

    & > * {
      --support-sentinel: inherit;
      --captured-length: 100cqi;
      --ratio: tan(
        atan2(
          var(--available-space),
          var(--available-space) - var(--captured-length)
        )
      );
      --font-size: clamp(
        1em,
        1em * var(--ratio),
        var(--max-font-size, infinity * 1px) - var(--support-sentinel)
      );
      inline-size: var(--available-space);

      &:not(.text-fit) {
        display: block;
        font-size: var(--font-size);

        @container (inline-size > 0) {
          white-space: nowrap;
        }
      }

      /* Necessary for variable fonts that use optical sizing */
      &.text-fit {
        --captured-length2: var(--font-size);
        font-variation-settings: "opsz" tan(atan2(var(--captured-length2), 1px));
      }
    }
  }
}

@property --captured-length {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

@property --captured-length2 {
  syntax: "<length>";
  initial-value: 0px;
  inherits: true;
}

নতুন জন্য দেখুন text-grow/text-shrink সম্পত্তি

ন্যায়বিচারে একটি পাত্রে ফিটিং পাঠ্য তৈরি করা সম্ভব এক সিএসএসের লাইন, বেশ কয়েকটি সমাধান নিয়ে আলোচনা করা হয়েছে। অনুকূল সমাধান দুটি নতুন বলে মনে হচ্ছে text-grow এবং text-shrink সম্পত্তি। ব্যক্তিগতভাবে, আমি মনে করি না আমাদের দুটি পৃথক সম্পত্তি দরকার। আসলে, আমি সহজ বিকল্প পছন্দ করি, font-size: fit-widthকিন্তু যেহেতু text-grow এবং text-shrink ইতিমধ্যে টেবিলে রয়েছে (ক্রোম প্রোটোটাইপ করতে চায় এবং আপনি পারেন এটি ট্র্যাক), আসুন তারা কীভাবে কাজ করতে পারে তা একবার দেখে নেওয়া যাক।

আপনার প্রথম যে বিষয়টি জানতে হবে তা হ’ল প্রস্তাবিত হিসাবে, দ্য text-grow এবং text-shrink বৈশিষ্ট্যগুলি একটি ধারকটির মধ্যে মোড়ানো পাঠ্যের একাধিক লাইনে প্রয়োগ করতে পারে এবং এটি বিশাল কারণ আমরা আমার জাভাস্ক্রিপ্ট কৌশল বা রোমানের সিএসএস কৌশল (যেখানে প্রতিটি লাইনের নিজস্ব ধারক থাকা দরকার) দিয়ে এটি করতে পারি না।

উভয়েরই একই সিনট্যাক্স রয়েছে এবং আপনি যদি উভয়কে বাড়ানোর অনুমতি দিতে চান তবে আপনাকে উভয়ই ব্যবহার করতে হবে এবং সঙ্কুচিত:

text-grow: <fit-target> <fit-method>? <length>?;
text-shrink: <fit-target> <fit-method>? <length>?;

• <fit-target>
  • per-line: জন্য text-growধারকটির চেয়ে কম পাঠ্যের লাইনগুলি এটি ফিট করতে বাড়বে। জন্য text-shrinkপাঠ্যের লাইন দীর্ঘ ধারক ইচ্ছার চেয়ে সঙ্কুচিত এটি ফিট।
  • consistent: জন্য text-growসংক্ষিপ্ততম লাইনটি ধারকটি ফিট করার জন্য বৃদ্ধি পাবে যখন অন্যান্য সমস্ত লাইন একই স্কেলিং ফ্যাক্টর দ্বারা বৃদ্ধি পায়। জন্য text-shrinkদ্য দীর্ঘতম লাইন উইল সঙ্কুচিত ধারকটি ফিট করার জন্য যখন অন্যান্য সমস্ত লাইন একই স্কেলিং ফ্যাক্টর দ্বারা সঙ্কুচিত হয়।
• <fit-method> (al চ্ছিক)
  • scale: পরিবর্তনের পরিবর্তে গ্লাইফগুলি স্কেল করুন font-size।
  • scale-inline: পরিবর্তনের পরিবর্তে গ্লাইফগুলি স্কেল করুন font-sizeতবে কেবল অনুভূমিকভাবে।
  • font-size: সেই অনুযায়ী ফন্টের আকার বাড়ুন বা সঙ্কুচিত করুন। (আমি জানি না ডিফল্ট মানটি কী হবে তবে আমি কল্পনা করি এটি এটি হবে))
  • letter-spacing: চিঠির ব্যবধানটি পরিবর্তে বৃদ্ধি/সঙ্কুচিত হবে font-size।
• <length> (al চ্ছিক): সর্বাধিক ফন্ট আকার text-grow বা ন্যূনতম ফন্টের আকার text-shrink।

আবার, আমি মনে করি আমি পছন্দ করি font-size: fit-width এটি বাড়ার সাথে সাথে যোগাযোগ করুন এবং সিএসএসের মাত্র এক লাইনে ধারকটি ফিট করার জন্য সমস্ত লাইন সঙ্কুচিত করুন। উপরের প্রস্তাবটি আমি যা চাই তার চেয়ে বেশি কিছু করে এবং ইতিমধ্যে রয়েছে বেশ কয়েকটি রোডব্লক কাটিয়ে উঠতে (যার মধ্যে অনেকগুলি অ্যাক্সেসযোগ্যতা সম্পর্কিত)। যদিও এটি কেবল আমি, এবং আমি মন্তব্যগুলিতে আপনার মতামত জানতে আগ্রহী হব।

উপসংহার

কয়েক বছর আগের তুলনায় এখন সিএসএসের সাথে লাইন দৈর্ঘ্য সেট করা সহজ। এখন আমাদের চরিত্রের ইউনিট রয়েছে, clamp() এবং min() (এবং max() এবং calc() আপনি যদি সেগুলিও এগুলিতে ফেলে দিতে চান), এবং একটি পাত্রে পাঠ্য ফিট করার জন্য আমরা এসভিজি এবং সিএসএসের সাথে করতে পারি এমন খারাপ জিনিসগুলি। এটা দেখতে মত মনে হয় text-grow এবং text-shrink (বা একটি সমতুল্য সমাধান) কমপক্ষে কিছু পরিস্থিতিতে আমাদের সত্যিকারের প্রয়োজন।

যতক্ষণ না আমরা সেখানে পৌঁছাচ্ছি, এটি ওজন-ইন করার জন্য এটি একটি ভাল সময়, যা আপনি আপনার প্রতিক্রিয়া, পরীক্ষা এবং ব্যবহার-কেসগুলি যুক্ত করে করতে পারেন গিটহাব ইস্যু।