* অক্ষরগুলিতে প্রস্থ নির্দিষ্ট করুন


108

যখন একটি ব্যবহার নির্দিষ্ট প্রস্থের ফন্ট , আমি একটি HTML উপাদান প্রস্থ উল্লেখ করতে চাই অক্ষর

"এম" ইউনিটটি এম অক্ষরের প্রস্থ হতে পারে বলে মনে করা হয়, তাই আমার প্রস্থ নির্দিষ্ট করতে এটি ব্যবহার করতে সক্ষম হওয়া উচিত। এটি একটি উদাহরণ:

<html>
  <head>
    <style>
      div {
        font-family: Courier;
        width: 10em;
      }
    </style>
  </head>
  <body>
    <div>
      1 3 5 7 9 1 3 5 7 9 1
    </div>
  </body>
</html>

ব্রাউজার লাইন 10 কলামের পরে কলাম 15 পরে ব্রেক হওয়ার সাথে সাথে ফলাফলটি আমি চাইনি:

1 3 5 7 9 1 3 5
7 9 1

(উবুন্টু উভয়তেই ফায়ারফক্স এবং ক্রোমিয়ামে ফলাফল))

উইকিপিডিয়ায় নিবন্ধ বলেছে যে একটি "এম" সর্বদা একটি এম এর প্রস্থ নয়, সুতরাং অবশ্যই এটি দেখতে "এম" ইউনিটকে বিশ্বাস করা যায় না।


আমি বিশ্বাস করি যে "এন" একটি আইনী প্রস্থও; এটি টাইপোগ্রাফিতে একটি অঙ্কের প্রস্থ। যে পারে আপনার জন্য আরো ভালোভাবে কাজ করে।
পিট উইলসন

6
'Em' বৈশিষ্ট্য হরফের প্রস্থ নয়, ফন্টের ফন্টের আকার বা উচ্চতা ব্যবহার করে । @ পিট: এটি নয়, সিএসএসের মান এবং ইউনিটগুলির মডিউল স্তর 3 দেখুন
animuson

আপনি যদি একটি নির্দিষ্ট-প্রস্থের ফন্ট ব্যবহার না করেন তবে বিভিন্ন অক্ষরের আলাদা প্রস্থ রয়েছে। সুতরাং দেখানো অক্ষরের সংখ্যার দিক দিয়ে প্রস্থ নির্ধারণ করা কার্যত অসম্ভব।
এমিলি


"এই প্রশ্নটি বন্ধ করার জন্য এখনও অন্য ব্যবহারকারীদের 4 টি ভোটের প্রয়োজন" - আরে, এটি আমার প্রশ্ন! আমাকে এটি বন্ধ করুন!
মার্টিন ভিলকান্স

উত্তর:


23

1 ম প্রস্থের চেয়ে এম এর উচ্চতা। প্রাক্তন হিসাবে একই ধরে, যা একটি এক্স এর উচ্চতা। আরও সাধারণভাবে বলতে গেলে এগুলি হ'ল বড় হাতের অক্ষর এবং ছোট হাতের অক্ষরের উচ্চতা।

প্রস্থ একটি সম্পূর্ণ ভিন্ন ইস্যু ....

উপরে আপনার উদাহরণ পরিবর্তন করুন

<div>
    <span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>

এবং আপনি স্প্যানের প্রস্থ এবং উচ্চতা পৃথক দেখতে পাবেন। ক্রোমে 20px এর ফন্টের আকারের জন্য স্প্যানটি 12x22 পিক্সেল হয়, যেখানে 20px হরফের উচ্চতা এবং 2px লাইন উচ্চতার জন্য।

এখন যেহেতু এখানে এবং প্রাক্তনদের কোনও ব্যবহার নেই, তাই সিএসএস-কেবলমাত্র সমাধানের জন্য একটি সম্ভাব্য কৌশল হ'ল

  1. মাত্র একটি & nbsp সমন্বিত একটি উপাদান তৈরি করুন;
  2. এটি নিজেই স্বয়ংক্রিয় করতে দিন
  3. আপনার ডিভটি এবং এর মধ্যে রাখুন
  4. এটিকে আশেপাশের উপাদান হিসাবে 10 গুণ বড় করুন।

আমি যাইহোক এটি কোড করতে পরিচালনা করিনি। আমি সন্দেহ করি যে এটি সত্যই সম্ভব।

একই যুক্তি জাভাস্ক্রিপ্টে প্রয়োগ করা যেতে পারে। আমি এখানে সর্বব্যাপী jQuery ব্যবহার করছি:

<html>
  <head>
    <style>
      body { font-size: 20px; font-family: Monospace; }
    </style>
    <script 
      type="text/javascript" 
      src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
  </head>
  <body>
    <div>1 3 5 7 9 1 3 5 7 9 1</div>
    <script>
      $('body').append('<div id="testwidth"><span>&nbsp;</span></div>');
      var w = $('#testwidth span').width();
      $('#testwidth').remove();
      $('div').css('width', (w * 10 + 1) + 'px');       
    </script>
  </body>
</html> 

রাউন্ড সমস্যাগুলি পরিচালনা করতে +1 ইন (ডাব্লু * 10 + 1)।


1
আমি একটি খাঁটি সিএসএস সমাধানের জন্য আশা করছিলাম, যা কেবল তখনই সম্ভব যদি আপনি কোনও চরিত্রের উচ্চতা এবং প্রস্থের মধ্যে অনুপাত জানতে ( স্ট্যাকওভারফ্লো . com/ প্রশ্নগুলি / 1255281/… দেখুন )। এটি একটি শক্তিশালী সমাধান বলে মনে হচ্ছে বলে আমি এটি উত্তর হিসাবে গ্রহণ করছি।
মার্টিন ভিলকান্স

এখানে উত্তরগুলি অনুসারে 1 এম কোনও এম এর উচ্চতা নয়, গ্রাফিকডিজাইন.স্ট্যাকেক্সেঞ্জঞ্জ / প্রশ্নগুলি / 4035/… "|" চরিত্রটি 1 মিনিটের কাছাকাছি হওয়া উচিত।
সোগারটার

1
সুগার্টার, স্পষ্টতার জন্য: টাইপোগ্রাফিতে যথাযথ 1 এমএম একটি নির্দিষ্ট-প্রস্থের অক্ষরের দৈর্ঘ্য (পাশাপাশি তাদের উচ্চতা)। তবে এটি "টাইপোগ্রাফি যথাযথ" এবং আমাদের অনেকগুলি ফ্লাইট বাই নাইট লোকেরা সেখানে ফন্ট ফাইল তৈরি করে যা টাইপোগ্রাফিক বিধি মেনে চলে না - বিশেষত ওয়েব ফন্টের ক্ষেত্রে সত্য। আমার মন্তব্যের মূল বক্তব্যটি (নিছক) কুঁকড়ে যাওয়া গ্র্যান্ডস্ট্যান্ডিং নয়। আমার বক্তব্য হ'ল পরীক্ষা, পরীক্ষা, পরীক্ষা। (এবং তারপরে আরও কিছু পরীক্ষা করুন))
প্যারাপ্লুয়ে

217

ch একক

আপনি যে ইউনিটটি অনুসন্ধান করছেন তা হ'ল chএমডিএন ডক্স অনুসারে :

ch: উপাদানটির গ্লাইফ "0" (শূন্য, ইউনিকোড অক্ষর ইউ + 0030) এর প্রস্থ বা আরও স্পষ্টভাবে অগ্রিম পরিমাপের প্রতিনিধিত্ব করে font

এটি প্রধান ব্রাউজারগুলির বর্তমান সংস্করণগুলিতে সমর্থিত ( ক্যানিউজ )।

উদাহরণ

pre {
    width: 80ch; /* classic terminal width for code sections */
}

3
এর রয়েছে চিত্রে স্থান , যা অবিকল "এক অঙ্ক প্রস্থ সমান" হয় উইকিপিডিয়ার বর্ণনা অনুযায়ী স্থান (যতিচিহ্ন) নিবন্ধ। এটির ইউনিকোড মান ইউ + 2007 এবং এটি HTML ব্যবহার করে &#x2007;বা ব্যবহার করে প্রবেশ করা যেতে পারে &#8199;। এটি কার্যত chসিএসএসের ইউনিটের সমতুল্য , তবে এটি ব্যাপকভাবে সমর্থিত না হলেও এটি এইচটিএমএল (কুৎসিত হ্যাক, তবে কাজ করা উচিত) হিসাবে কাজ হিসাবে ব্যবহার করা যেতে পারে।
ওয়াল্ডরিয়াস

2
প্রকৃতপক্ষে, এই ক্রোমিয়াম ইস্যু অনুসারে , ক্রোম v27 সাল থেকে এটি সমর্থন করে, তাই এখনই সমস্ত বড় ব্রাউজারগুলির সর্বশেষতম সংস্করণ (আই, ক্রোম এবং ফায়ারফক্স)
চি

2
একটিকে লক্ষ্য করা উচিত যে উপাদানটির ফন্টের গ্লাইফ '0' এর আকার হ'ল অক্ষরের আকার। আপনি 'মি' বা মত বৃহত্তর অক্ষর আশা যদি 'W' আপনার সেই অনুযায়ী এর প্রসারণ (যেমন এটি প্রসারিত হিসাবে প্রয়োজন থাকার কথা বিবেচনা করতে পারে stackoverflow.com/questions/7168727/... )
user420667

1
হ্যাঁ, মনসপাসড ফন্টগুলির সাথে কোনও সমস্যা নেই।
উইলেজে

2
আইই 11 এটি ভুল সমর্থন করে। stackoverflow.com/questions/17825638/…
আলেহা
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.