সিএসএস: কিছু পাঠকের ধারকের আকার পরিবর্তন না করেই সাহসী করা

Question

আমার একটি অনুভূমিক নেভিগেশন মেনু রয়েছে, যা মূলত <ul>পাশাপাশি রয়েছে পাশাপাশি থাকা উপাদানগুলি a আমি প্রস্থটি সংজ্ঞায়িত করি না, তবে কেবল প্যাডিং ব্যবহার করি, কারণ আমি চাই মেনু আইটেমটির প্রস্থ দ্বারা প্রস্থগুলি সংজ্ঞায়িত করা হোক। আমি বর্তমানে নির্বাচিত আইটেমটি সাহসী।

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

সম্ভব হলে আমি ভবিষ্যতে এন্ট্রিগুলিকে সহজ পরিবর্তন করতে, প্রতিটি প্রবেশের উপর একটি স্থির প্রস্থ স্থাপন করা এবং তারপরে আমার কাছে থাকা প্যাডিং সমাধানটির বিপরীতে কেন্দ্রীভূত করা এড়াতে চাই।

Comments

আকার পরিবর্তন কেন একটি সমস্যা? এটি কি কোনওভাবে লেআউটটি গোলমাল করছে?

— চৌলকি

আমার মনে হয় স্ট্যাক ওভারফ্লোতে ওয়েব প্রোগ্রামিংয়ের প্রশ্নটি সবচেয়ে ভাল জিজ্ঞাসা করা হয়। হয়তো কোনও মোড এটি সেখানে স্থানান্তরিত করবে।

— সিআরান

চাউলকি: কারণ কিছু জিনিস আমি বেশি ঘৃণা করি, লেআউট-ভিত্তিক, যখন আপনি যে বোতামগুলির চারপাশে জাম্প ক্লিক করার চেষ্টা করবেন বলে মনে করছেন

— মালা

doejo.com/blog/… হ'ল একটি সমাধান আমি খুঁজে পেয়েছি যা জন এবং ব্লোস্কি jscript সম্পর্কে ঠিক যা বলেছিল তা করে।

— দ্যুলবুলফ্রোগ

— বালথাজার

Answer 1

আমার একই সমস্যা ছিল, তবে কিছুটা আপস করে একইরকম প্রভাব পেয়েছি, আমি পরিবর্তে পাঠ্য-ছায়া ব্যবহার করেছি।

li:hover {text-shadow:0px 0px 1px black;}

এখানে একটি কার্যকারী উদাহরণ:

body {
  font-family: segoe ui;
}

ul li {
  display: inline-block;
  border-left: 1px solid silver;
  padding: 5px
}

.textshadow :hover {
  text-shadow: 0px 0px 1px black;
}

.textshadow-alt :hover {
  text-shadow: 1px 0px 0px black;
}

.bold :hover {
  font-weight: bold;
}

<ul class="textshadow">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li><code>text-shadow: 0px 0px 1px black;</code></li>
</ul>

<ul class="textshadow-alt">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li><code>text-shadow: 1px 0px 0px black;</code></li>
</ul>

<ul class="bold">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li><code>font-weight: bold;</code></li>
</ul>

jsfiddle উদাহরণ

Comments

আমি এই সমাধানটি পছন্দ করি, যদিও আমি এটিতে 1px 0px 0px ফ্লিপ করার পরামর্শ দিই। দেখতে আরও কিছুটা সাহসী-মত লাগছে।

— এম হেরল্ড

আমার একটি সিএসএস-সলিউশন দরকার এবং এটিই উত্তর।

— জে ক্যাসো

আপনার একটি সত্য প্রতিভা! সরলতা এটিকে সুন্দর করে তোলে!

— লুফি

কেবলমাত্র li:hover {text-shadow: 1px 0 0 black;}অক্ষরগুলির মধ্যে খুব সামান্য ব্যবধান সহ পাঠ্য যুক্ত করার ফলে। এটি আবার উন্নত করতে আমরা সেটও করেছিli {letter-spacing: 1px;}

— প্যাট্রিক হামার

আমি ব্যবহার করেছি -0.5px 0 #fff, 0.5px 0 #fff, কারণ আমরা টেক্সট নিজেই এবং ছায়ার মধ্যে সামান্য ফাঁক দেখতে পেয়েছি। এবং যখন পাঠ্য সাহসী হয়, এটি উভয় পক্ষের ওজন যুক্ত করে।

— atorscho

Answer 2

:: এর পরে ব্যবহার করে সর্বাধিক কার্যক্ষম সমাধান

এইচটিএমএল

<li title="EXAMPLE TEXT">
  EXAMPLE TEXT
</li>

সিএসএস

li::after {
  display: block;
  content: attr(title);
  font-weight: bold;
  height: 1px;
  color: transparent;
  overflow: hidden;
  visibility: hidden;
}

এটি গুনী পাঠ্যের প্রস্থ সহ অদৃশ্য সিউডো-উপাদান যুক্ত করে, titleগুণাবলী অনুসারে।

text-shadowসমাধান Mac এ অপ্রাকৃত দেখায় এবং সব সৌন্দর্য যে পাঠ্য ম্যাক অফার রেন্ডারিং কাজে লাগাতে না .. :)

http://jsfiddle.net/85LbG/

ক্রেডিট: https://stackoverflow.com/a/20249560/5061744

Comments

এটি সর্বাধিক নির্ভরযোগ্য এবং পরিষ্কার সমাধান, এটি কেবল উপাদানটিতে গা bold় পাঠ্যের জন্য স্থান সংরক্ষণ করে। আমার ক্ষেত্রে, অতিরিক্ত ছদ্ম-উপাদানগুলির কারণে উচ্চতা পরিবর্তিত হয়েছিল। ব্লকে নেতিবাচক যুক্ত margin-topকরা এটি ::afterসমাধান করেছে।

— ভ্যাক্লাভ নভটনি

এই সমাধান মহান! আমি জেএসকে একটি "ডেটা-সামগ্রী" বৈশিষ্ট্য যুক্ত করতে ব্যবহার করেছি যাতে উপাদানটির পাঠ্য থাকে তাই আমি এইচটিএমএল পরিবর্তন এড়াতে পারি।

— mistykristie

অসাধারণ. এটি সেরা উত্তর হওয়া উচিত। নোট করুন যে লির চেয়ে আলাদা উপাদান আপনাকে প্রদর্শন ব্যবহার করতে হতে পারে: ব্লক; উপর: পিতামাতার উপাদান পরে।

— ব্ল্যাকব্যাম

দুর্দান্ত সমাধান! এর আগেও :: এর সাথে সূক্ষ্মভাবে কাজ করে, আমার ক্ষেত্রে এটি নীচে অতিরিক্ত মার্জিন প্রতিরোধ করে।

— টমাস চ্যাম্পিয়ন

এই সমাধানের জন্য আপনাকে ধন্যবাদ। আমি প্রথমে পাঠ্য-ছায়া ব্যবহার করেছি তবে এটি সাফারিতে কাজ করে না কারণ এটি দশমিক মানকে ছাড়িয়ে যায়। যেহেতু আমি ০.০ পিক্স ব্যবহার করছিলাম, এটি 0 থেকে শেষ করে দেওয়া হচ্ছে Your আপনার সমাধানটি নির্বিঘ্নে কাজ করেছে। আমি কেবল নামের সাথে শিরোনামের বৈশিষ্ট্যটি প্রতিস্থাপন করেছি কারণ আমি চাইনি যে

— টুলটিপসটি প্রদর্শিত হোক

Answer 3

সর্বাধিক পোর্টেবল এবং দৃষ্টি আকর্ষণীয় সমাধানটি হ'ল ব্যবহার করা text-shadow। এটি থেক্সেরির উত্তরের উদাহরণগুলিকে সংশোধন করে এবং আলেক্সকলির এবং আমার নিজের টুইটগুলি ব্যবহার করে :

  li:hover { text-shadow: -0.06ex 0 black, 0.06ex 0 black; }

এটি blackপ্রতিটি অক্ষরের উভয় পাশে ছোট ছোট "ছায়াগুলি" কালো রঙে রাখবে (ফন্টের রেন্ডারিং দিয়ে সঠিকভাবে স্কেল করবে এমন একক ব্যবহার করে)

সতর্কতা: px মানগুলি দশমিক মানগুলিকে সমর্থন করে, তবে ফন্টের আকার পরিবর্তিত হলে এগুলি এত দুর্দান্ত লাগবে না (যেমন ব্যবহারকারী Ctrl+ এর সাথে ভিউ স্কেল করে +)। পরিবর্তে আপেক্ষিক মান ব্যবহার করুন।

এই উত্তরটি exইউনিটগুলির ভগ্নাংশ ব্যবহার করে যেহেতু তারা ফন্টের সাথে স্কেল করে।
ইন ~ সবচেয়ে ব্রাউজার ডিফল্ট * , আশা 1ex≈ 8pxএবং সেইজন্য 0.025ex≈ 0.1px।

নিজের জন্য দেখুন:

li             { color: #000; } /* set text color just in case */
.shadow0       { text-shadow: inherit; }
.shadow2       { text-shadow: -0.02ex 0 #000, 0.02ex 0 #000; }
.shadow4       { text-shadow: -0.04ex 0 #000, 0.04ex 0 #000; }
.shadow6       { text-shadow: -0.06ex 0 #000, 0.06ex 0 #000; }
.shadow8       { text-shadow: -0.08ex 0 #000, 0.08ex 0 #000; }
.bold          { font-weight: bold; }
.bolder        { font-weight: bolder; }
.after span        { display:inline-block; font-weight: bold; } /* workaholic… */
.after:hover span  { font-weight:normal; }
.after span::after { content: attr(title); font-weight: bold; display:block; 
                     height: 0; overflow: hidden; }
.ltrsp         { letter-spacing:0; font-weight:bold; } /* @cgTag */
li.ltrsp:hover { letter-spacing:0.0125ex; }
li:hover       { font-weight: normal!important; text-shadow: none!important; }

<li class="shadow0">MmmIii123 This line tests shadow0 (plain)</li>
<li class="shadow2">MmmIii123 This line tests shadow2 (0.02ex)</li>
<li class="shadow4">MmmIii123 This line tests shadow4 (0.04ex)</li>
<li class="shadow6">MmmIii123 This line tests shadow6 (0.06ex)</li>
<li class="shadow8">MmmIii123 This line tests shadow8 (0.08ex)</li>
<li class="after"><span title="MmmIii123 This line tests [title]"
                   >MmmIii123 This line tests [title]</span> (@workaholic…)</li>
<li class="ltrsp"  >MmmIii123 This line tests ltrsp (@cgTag)</li>
<li class="bold"   >MmmIii123 This line tests bold</li>
<li class="bolder" >MmmIii123 This line tests bolder</li>
<li class="shadow2 bold">MmmIii123 This line tests shadow2 (0.02ex) + bold</li>
<li class="shadow4 bold">MmmIii123 This line tests shadow4 (0.04ex) + bold</li>
<li class="shadow6 bold">MmmIii123 This line tests shadow6 (0.06ex) + bold</li>
<li class="shadow8 bold">MmmIii123 This line tests shadow8 (0.08ex) + bold</li>

রেন্ডার করা রেখাগুলি কীভাবে স্ট্যান্ডার্ড পাঠ্য থেকে পৃথক হয় তা ধরে রাখুন।

আপনার ব্রাউজারের জুম স্তর ( Ctrl+ +এবং Ctrl+ -) কীভাবে পরিবর্তিত হয় তা পরিবর্তন করুন।

তুলনার জন্য আমি এখানে আরও দুটি সমাধান যুক্ত করেছি: @ সিজিটাগের চিঠি স্পেসিং ট্রিক , এটি এত ভাল কাজ করে না যেহেতু এটিতে ফন্টের প্রস্থের ব্যাপ্তি অনুমান করা জড়িত, এবং @ ওয়ার্কহোলিক_গ্যাংস্টার911 এর :: অঙ্কনের কৌশলটি , যা বিশ্রী অতিরিক্ত স্থান ছেড়ে দেয় যাতে সাহসী পাঠ প্রসারিত হতে পারে প্রতিবেশী পাঠ্য আইটেমগুলিতে ঝাঁকুনি না দিয়ে (আমি সাহসী পাঠ্যের পরে এট্রিবিউশনটি রেখেছি যাতে আপনি দেখতে পারেন যে এটি কীভাবে নাড়ায় না)।

---

ভবিষ্যতে, আমাদের কাছে আরও ভেরিয়েবল ফন্টগুলি হ'ল ফন্ট গ্রেডের মাধ্যমে পরিবর্তনের মতো জিনিসে সক্ষম font-variation-settings। ব্রাউজার সমর্থন র‌্যাম্পিং করছে (ক্রোম 63৩+, ফায়ারফক্স +২+) তবে এটি এখনও কেবল স্ট্যান্ডার্ড ফন্টগুলির চেয়ে বেশি প্রয়োজন এবং কয়েকটি বিদ্যমান ফন্ট এটি সমর্থন করে।

আপনি যদি কোনও ভেরিয়েবল ফন্ট এম্বেড করেন তবে আপনি এই জাতীয় CSS ব্যবহার করতে সক্ষম হবেন:

/* Grade: Increase the typeface's relative weight/density */
@supports (font-variation-settings: 'GRAD' 150) {
  li:hover { font-variation-settings: 'GRAD' 150; }
}
/* Failover for older browsers: tiny shadows at right & left of the text
 * (replace both instances of "black" with the font color) */
@supports not (font-variation-settings: 'GRAD' 150) {
  li:hover { text-shadow: -0.06ex 0 black, 0.06ex 0 black; }
}

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

Comments

এত সহজ, এত সুন্দর।

— রেন্ডি হল

Answer 4

আমি দেখতে পেয়েছি যে আপনি 1px দ্বারা অক্ষরের ব্যবধান সামঞ্জস্য করলে বেশিরভাগ ফন্টগুলি একই আকার হয়।

a {
   letter-spacing: 1px;
}

a:hover {
   font-weight: bold;
   letter-spacing: 0px;
}

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

Comments

এটি সেরা এবং সর্বাধিক আন্ডাররেটেড সমাধান, যদিও আমি এটি পরিবর্তন করেছি যাতে এটি 0 দিয়ে শুরু হয় এবং সাহসী হলে নেতিবাচক বর্ণের ব্যবধানে যায়। এছাড়াও প্রতিটি ফন্ট এবং ফন্ট-আকারের জন্য আপনাকে এটি সূক্ষ্ম-টিউন করতে হবে। আমি এটি অন্তর্ভুক্ত করার জন্য @ থুরগেরের ফিডেলও আপডেট করেছি (দ্বিতীয় সমাধান হিসাবে) jsfiddle.net/dJcPn/50/

— রোবোটিক

আধুনিক ব্রাউজারগুলি এখন সাব-পিক্সেল যথার্থতা সমর্থন করে। সুতরাং আপনি ব্যবধান 0.98pxবা আরও ছোট ভগ্নাংশ ব্যবহার করে সুর করতে পারেন ।

— সংঘবদ্ধ

এটি কিছুটা অদ্ভুত দেখাচ্ছে যেহেতু ব্যবধান অ্যালগরিদম হুবহু এক নয় (কিছু অক্ষর কিছুটা নাচে নাচায়) এবং আরও গুরুত্বপূর্ণ, ফন্টগুলি ছোট করে দেওয়ার সময় এটি কার্যকর হয় না, এমনকি যদি আপনি বা এর 1pxমতো আপেক্ষিক মানগুলিতে রূপান্তর করেন তবেও । লাইভ প্রদর্শনের জন্য আমার উত্তর দেখুন । 0.025ex0.0125ex

— অ্যাডাম কাটজ

@ অ্যাডামকাটজ আমার সন্দেহ হয় যে উত্তরটি পোস্ট হওয়ার পরে ফন্টের রেন্ডারিং বদলেছে এবং আপনি কোন ফন্ট ব্যবহার করছেন তার উপর এটি অনেকটাই নির্ভর করে।

— সংঘবদ্ধ

Answer 5

আরও আপ-টু-ডেট উত্তরের জন্য, আপনি ব্যবহার করতে পারেন -webkit-text-stroke-width:

.element {
  font-weight: normal;
}

.element:hover {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

এটি কোনও ছদ্ম-উপাদানগুলি এড়িয়ে যায় (যা স্ক্রিন পাঠকদের জন্য একটি প্লাস) এবং পাঠ্য-ছায়া (যা অগোছালো দেখাচ্ছে এবং এখনও কিছুটা 'লাফ' প্রভাব তৈরি করতে পারে) বা কোনও স্থির প্রস্থ (যা অবৈজ্ঞানিক হতে পারে) সেট করে।

এটি আপনাকে 1px এর চেয়েও সাহসী হতে কোনও উপাদান সেট করার অনুমতি দেয় (তাত্ত্বিকভাবে, আপনি নিজের পছন্দমতো একটি ফন্ট তৈরি করতে পারেন এবং কোনও ফন্টের সাহসী সংস্করণ তৈরি করার জন্য একটি স্বল্প-ইশ ওয়ার্কআউটও হতে পারে যা সাহসী নয় বৈকল্পিক, কাস্টম ফন্টগুলির মতো ( সম্পাদনা: ভেরিয়েবল ফন্টগুলি এই পরামর্শটিকে হ্রাস করে ) যদিও এটি এড়ানো উচিত কারণ এটি সম্ভবত কিছু ফন্টকে স্ক্র্যাচ এবং দাগযুক্ত করে তুলবে)

আমি এটি অবশ্যই এজ, ফায়ারফক্স, ক্রোম এবং অপেরা (পোস্ট করার সময়) এবং সাফারিতে ( সম্পাদনা করুন: @ লার্স ব্লামবার্গ এটি নিশ্চিত করার জন্য ধন্যবাদ ) তে কাজ করে। এটি IE11 বা নীচে কাজ করে না।

এছাড়াও খেয়াল করুন, এটি -webkitউপসর্গটি ব্যবহার করে , তাই এটি মানক নয় এবং ভবিষ্যতে সমর্থনও বাদ পড়তে পারে, সুতরাং নির্ভর করবেন না সাহসী সত্যিই গুরুত্বপূর্ণ - এটি কেবলমাত্র নান্দনিক না হলে এই কৌশলটি এড়ানো ভাল।

Comments

সাফারি 13.0.5 এও কাজ করে। এখনও পর্যন্ত আমার পক্ষে সবচেয়ে পরিষ্কার সমাধান।

— লার্স ব্লামবার্গ

Answer 6

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

আমি কেবলমাত্র কয়েকটি জাভাস্ক্রিপ্ট ব্যবহার করতে পারি যা ট্যাবটির সাহসী হওয়ার আগে প্রস্থের গণনা করে, এবং তারপরে সাহসী প্রয়োজনীয়তার সাথে প্রস্থটি প্রয়োগ করে (হয় যখন আপনি ঘোরাবেন বা ক্লিক করবেন)।

Comments

এইচএম, আমি এটি নিয়ে পরীক্ষা-নিরীক্ষা করব, যদিও আমি এটি নন-জেএস ব্যবহারকারীদের জন্য কমপক্ষে যুক্তিসঙ্গত (অর্থাত্ সাহসী) দেখতে চাই। হতে পারে আমি এটিকে সাহসী পাঠাতে পারি, জেএসটো এটি আনবোল্ড ব্যবহার করতে পারি, প্রস্থটি গণনা করতে পারি এবং তারপরে আবার সাহসী করতে পারি? নাকি ঠিক নির্বোধ?

— মালা

হ্যাঁ, জাভাস্ক্রিপ্টহীন ব্যবহারকারীদের থাকার জন্য এটি সর্বোত্তম উপায় বলে মনে হচ্ছে।

— আজ

Answer 7

আনবোল্ডেড সামগ্রীর উপর ভিত্তি করে লি এর একটি নির্দিষ্ট প্রস্থ নির্ধারণ করতে জাভাস্ক্রিপ্ট ব্যবহার করুন, তারপরে ট্যাগটিতে স্টাইল প্রয়োগ করে কন্টেন্টটি গা bold় <a>করুন (বা <li>কোনও সন্তান না থাকলে স্প্যান যোগ করুন )।

Comments

ওফস - পুনরাবৃত্তি করার জন্য দুঃখিত: $

— ড্যান ব্লোজেস 13

যাইহোক আপনার উত্তরের জন্য ধন্যবাদ :)

— মালালা

@ মালা আপনি কি সমাধান খুঁজে পেয়েছেন? বেশ মজার, আমারও একই সমস্যা।

— ড্যান ব্লাউস

Answer 8

এটি একটি খুব পুরানো প্রশ্ন, তবে আমি এটি পুনর্বিবেচনা করছি কারণ আমি যে অ্যাপ্লিকেশনটি বিকাশ করছি তার মধ্যে আমার এই সমস্যাটি ছিল এবং আমি এখানে সমস্ত উত্তর পেয়েছি।

(টিএল এর জন্য এই অনুচ্ছেদটি এড়িয়ে যান; ডিআর ...)আমি ক্লাউড.টিপোগ্রাফি ডটকম থেকে গথাম ওয়েবফন্টটি ব্যবহার করছি এবং আমার কাছে বোতাম রয়েছে যা ফাঁকা শুরু হয় (একটি সাদা বর্ডার / পাঠ্য এবং একটি স্বচ্ছ পটভূমি সহ) এবং হোভারে একটি পটভূমি রঙ অর্জন করে। আমি দেখতে পেলাম যে আমি যে পটভূমির রঙগুলি ব্যবহার করছিলাম তার মধ্যে সাদা টেক্সটের সাথে খুব ভাল বিপরীত হয়নি, তাই আমি এই বোতামগুলির জন্য পাঠ্যটি কালোতে পরিবর্তন করতে চেয়েছিলাম, তবে - ভিজ্যুয়াল ট্রিক বা সাধারণ অ্যান্টি-আলিয়াজিং পদ্ধতির কারণে - অন্ধকার হালকা পটভূমিতে পাঠ্যটি অন্ধকার পটভূমিতে সাদা পাঠ্যের চেয়ে সর্বদা হালকা ওজনের বলে মনে হয়। আমি দেখতে পেয়েছি যে অন্ধকার পাঠ্যের জন্য ওজন 400 থেকে 500 পর্যন্ত বাড়ানো প্রায় একই "ভিজ্যুয়াল" ওজন বজায় রাখে। যাইহোক, এটি একটি ছোট অঙ্কের বোতামের প্রস্থকে বাড়িয়ে দিচ্ছিল - একটি পিক্সেলের একটি ভগ্নাংশ - তবে এটি বোতামগুলিকে "জিটার" সামান্য প্রদর্শিত করার জন্য যথেষ্ট ছিল, যা আমি মুক্তি পেতে চেয়েছিলাম।

সমাধান:

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

ক্রোম ডিভলটুলগুলিতে বোতামটি পরিদর্শন করে আমি দেখতে পেলাম যে আমার বোতামটির ডিফল্ট প্রস্থটি ছিল ১5৫..47px এবং হোভারে ১5৫.9৯ পিএক্স, 0.22px এর পার্থক্য। বোতামটিতে 9 টি অক্ষর ছিল, তাই:

0.22 / 9 = 0.024444px

এটিকে ইউনিটগুলিতে রূপান্তরিত করে আমি সামঞ্জস্য হরফ-আকারের অজগনোস্টিক করতে পারি। আমার বোতামটি 16px এর ফন্ট আকার ব্যবহার করছিল, তাই:

0.024444 / 16 = 0.001527 মিমি

সুতরাং আমার নির্দিষ্ট ফন্টের জন্য, নিম্নলিখিত সিএসএস বোতামগুলি ঠিক একই প্রস্থে হোভারে রাখে :

.btn {
  font-weight: 400;
}

.btn:hover {
  font-weight: 500;
  letter-spacing: -0.001527em;
}

উপরে কিছু সূত্র পরীক্ষা করে এবং সূত্রটি ব্যবহার করে আপনি letter-spacingআপনার অবস্থার জন্য ঠিক সঠিক মান খুঁজে পেতে পারেন এবং এটি ফন্টের আকার নির্বিশেষে কাজ করা উচিত।

একটি সতর্কতা হ'ল বিভিন্ন ব্রাউজারগুলি কিছুটা পৃথক সাব-পিক্সেল গণনা ব্যবহার করে, তাই আপনি যদি এই ওসিডি স্তরটির উপ-পিক্সেল-নিখুঁত নির্ভুলতার জন্য লক্ষ্য রাখছেন তবে আপনাকে পরীক্ষার পুনরাবৃত্তি করতে হবে এবং প্রতিটি ব্রাউজারের জন্য আলাদা মান নির্ধারণ করতে হবে। ব্রাউজার-লক্ষ্যযুক্ত সিএসএস শৈলীগুলি সাধারণত সঙ্গত কারণেই নষ্ট করা হয় তবে আমি মনে করি এটি ব্যবহারের ক্ষেত্রে এটি কেবলমাত্র একমাত্র বিকল্প যা বোধগম্য হয়।

Answer 9

আকর্ষণীয় প্রশ্ন। আমি মনে করি আপনি ভাসা ব্যবহার করছেন, তাই না?

ঠিক আছে, এই ফন্টটি প্রসারিত করে ছাড়ানোর জন্য আপনি যে কৌশলটি ব্যবহার করতে পারেন তা আমি জানি না, অতএব তারা প্রয়োজনীয় ন্যূনতম প্রস্থে ফিট করার চেষ্টা করবে - এবং হরফের দৈর্ঘ্যের দৈর্ঘ্য এই মানটিকে পরিবর্তন করবে।

এই পরিবর্তনটি এড়াতে আমি যে অনন্য সমাধানটি জানি তা হ'ল আপনি যা বলেছেন তা নয়: লি'র স্থির আকার নির্ধারণ করা।

Answer 10

আপনি এটি আমাজন ডটকমের মতো বাস্তবায়ন করতে পারেন "বিভাগ দ্বারা শপিং করুন" মেনু মেনু। এটি প্রশস্ত ডিভ ব্যবহার করে। আপনি প্রশস্ত ডিভি তৈরি করতে এবং এর ডান অংশটি গোপন করতে পারেন

Answer 11

আপডেট: শিরোনামের জন্য বি ট্যাগটি ব্যবহার করতে হয়েছিল কারণ আইইডিতে সিউডো ক্লাস i: পরে যখন দেখলাম না তখন আমার দৃশ্যমানতা ছিল: লুকানো।

আমার ক্ষেত্রে আমি লেবেল পাঠ্যের সাথে একটি (কাস্টম নকশাযুক্ত) ইনপুট চেকবক্স / রেডিও সারিবদ্ধ করতে চাই যেখানে ইনপুট চেক করা হয় তখন পাঠ্যটি সাহসী হয়।

এখানে প্রদত্ত সমাধানটি ক্রোমে আমার পক্ষে কার্যকর হয়নি। ইনপুট এবং লেবেলের উল্লম্ব প্রান্তিককরণটি এইগুলির সাথে মিশে গেল: স্যুয়েডো ক্লাস এবং -মারজিনগুলির পরে এটি ঠিক করা হয়নি।

এখানে একটি স্থির জায়গা যেখানে আপনি উল্লম্ব সারিবদ্ধতাগুলির সাথে সমস্যা না পান।

/* checkbox and radiobutton */
label
{
    position: relative;
    display: inline-block;
    padding-left: 30px;
    line-height: 28px;
}

/* reserve space of bold text so that the container-size remains the same when the label text is set to bold when checked. */
label > input + b + i
{
    font-weight: bold;
    font-style: normal;
    visibility: hidden;
}

label > input:checked + b + i
{
    visibility: visible;
}

/* set title attribute of label > b */
label > input + b:after
{
    display: block;
    content: attr(title);
    font-weight: normal;
    position: absolute;
    left: 30px;
    top: -2px;
    visibility: visible;
}

label > input:checked + b:after
{
    display: none;
}

label > input[type="radio"],
label > input[type="checkbox"]
{
    position: absolute;
    visibility: hidden;
    left: 0px;
    margin: 0px;
    top: 50%;
    transform: translateY(-50%);
}

    label > input[type="radio"] + b,
    label > input[type="checkbox"]  + b
    {
        display: block;
        position: absolute;
        left: 0px;
        margin: 0px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background-color: #00a1a6;
        border-radius: 3px;
    }

    label > input[type="radio"] + b
    {
        border-radius: 50%;
    }

    label > input:checked + b:before
    {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        content: '';
        border-width: 0px 3px 3px 0px;
        border-style: solid;
        border-color: #fff;
        width: 4px;
        height: 8px;
        border-radius: 0px;
    }

    label > input[type="checkbox"]:checked + b:before
    {
        transform: translate(-50%, -60%) rotate(45deg);
    }

    label > input[type="radio"]:checked + b:before
    {
        border-width: 0px;
        border-radius: 50%;
        width: 8px;
        height: 8px;
    }

<label><input checked="checked" type="checkbox"/><b title="Male"></b><i>Male</i></label>
<label><input type="checkbox"/><b title="Female"></b><i>Female</i></label>