এইচটিএমএল <সাপ /> ট্যাগ রেখার উচ্চতাকে প্রভাবিত করছে, কীভাবে এটি সামঞ্জস্য করা যায়?

Question

আমার যদি <sup>কোনও মাল্টি-লাইন <p>ট্যাগে একটি ট্যাগ থাকে তবে এর উপরে সুপারস্ক্রিপ্টের সাথে থাকা রেখার উপরের রেখাটি অন্য রেখার তুলনায় তার উপরে একটি বৃহত্তর রেখা রয়েছে, আমি কোন রেখার উচ্চতাটি রেখেছি তা নির্বিশেষে <p>।

স্পষ্টতার জন্য সম্পাদনা করুন : এর অর্থ এই নয় যে আমার কাছে প্রচুর <p>গুলি রয়েছে, প্রতিটিই একটি লাইনে রয়েছে। <p>একাধিক লাইনে মোড়কের কারণ হিসাবে আমার পর্যাপ্ত সামগ্রীর সাথে একটি রয়েছে। পাঠ্যটিতে কোথাও (কোথাও) একটি <sup>বা হতে পারে <sub>। এটি উপরে / নীচে অতিরিক্ত ব্যবধান যুক্ত করে সেই লাইনের লাইন উচ্চতাকে প্রভাবিত করে। যদি আমি এটির চেয়ে বড় লাইন-উচ্চতা নির্ধারণ করি <p>তবে সমস্যার কোনও পার্থক্য নেই। লাইন-উচ্চতা বৃদ্ধি পেয়েছে, তবে অতিরিক্ত ব্যবধান এখনও রয়ে গেছে।

আমি কীভাবে এটি সামঞ্জস্য বানাতে পারি - অর্থাত সমস্ত লাইনের মধ্যে একই ফাঁক রয়েছে সেগুলি রয়েছে কি <sup>না?

আপনার সমাধানগুলি অবশ্যই ক্রস-ব্রাউজার (IE 6+, এফএফ, সাফারি, অপেরা, ক্রোম) হতে হবে

Answer 1

লাইন-উচ্চতা এটি ঠিক করে দেয়, তবে আপনাকে এটি বেশ বড় করতে হতে পারে: আমার বসতি স্থাপনের সময় আমাকে লাইন-উচ্চতা প্রায় 1.8 বাড়াতে <sup>হবে তবে এর সাথে আর কোনও হস্তক্ষেপ না করার আগে , তবে এটি হরফ থেকে ফন্টে পরিবর্তিত হবে।

সামঞ্জস্যপূর্ণ লাইন উচ্চতা পেতে একটি সম্ভাব্য পন্থা হ'ল ডিফল্টের পরিবর্তে আপনার নিজের সুপারস্ক্রিপ্ট স্টাইলিং সেট করা vertical-align: super। আপনি যদি topএটি ব্যবহার করেন তবে লাইন বাক্সে কিছু যুক্ত হবে না, তবে এটি ফিট করার জন্য আপনাকে ফন্টের আকার আরও কমাতে হতে পারে:

sup { vertical-align: top; font-size: 0.6em; }

আপনি চেষ্টা করতে পারেন এমন অন্য একটি হ্যাক হ'ল লাইন বাক্সকে প্রভাবিত না করে কিছুটা উপরে সরিয়ে পজিশনিং ব্যবহার করা:

sup { vertical-align: top; position: relative; top: -0.5em; }

অবশ্যই আপনার যদি পর্যাপ্ত লাইন-উচ্চতা না থাকে তবে উপরের লাইনে ক্রাশ হওয়ার ঝুঁকি রয়েছে।

Comments

উল্লম্ব সারিবদ্ধ এটি স্থির, ধন্যবাদ। এমনকি একটি বিশাল লাইন-উচ্চতা 300% + এটি আই 8, ক্রোম 3 বা এফএফ 3.5 তে ঠিক করে না। আমি এখনও 1-2px পার্থক্য পেয়েছি।

— অ্যান্ড্রু বুলক

উল্লিখিত হিসাবে লাইন উচ্চতা খুব শক্ত হয় যদি এটি সর্বদা কাজ করে না।

— রিক

@ সিমপড: একই অবস্থা, vertical-align: bottom(যদিও এটি আপনাকে ততটা পায় না top) এবং তারপরে position:relative;একটি ইতিবাচক সাথে top।

— ববিনস

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

— সমস্ত বিট

Answer 2

sup {
    line-height: 0;

    /* The following rules (or similar) likely come from browser 
     * style and are not needed
     */
    font-size: 0.83em;
    vertical-align: super;
}

কৌশলটি <sup>'র লাইন-উচ্চতা 0 এ সেট করা হয় @ @ স্কট সাধারণ ব্যবহার করতে বলেছিল, তবে এটি সর্বদা কার্যকর হয় না।

এর অর্থ সুপারসক্রিপ্ট পাঠ্য সংযুক্ত করতে আপনাকে আশেপাশের পাঠ্যের লাইন-উচ্চতা পরিবর্তন করতে হবে না । আমি এটি আই 7 + এবং অন্যান্য বড় ব্রাউজারগুলিতে পরীক্ষা করেছি।

Comments

+1 টি। যেমন উল্লেখ করা হয়েছে, এটি অন্যান্য line-heightবৈশিষ্ট্যগুলির সাথে বিরোধগুলি প্রতিরোধ করে । line-heightঅবশ্যই সামগ্রিকভাবে ছোটতে সেট করা থাকলে এটি পূর্ববর্তী লাইনের সাথে ছেদ তৈরি করতে পারে।

— ক্রিস ক্রাইচো

চমত্কার সমাধান, ক্রোমিয়াম আর খারাপ ব্যবহার করে না! এখনও সহজ উত্তর।

— আকতাউ

কেবল উপলব্ধি হয়ে গেছে যে এটি পার্শ্ববর্তী পাঠ্যের অ-ডিফল্ট লাইন-উচ্চতাগুলিকে প্রভাবিত করবে। line-height: 100%এই ক্ষেত্রে ব্যবহার করুন ।

— ম্যাথিয়াস হাওয়ার্ট

এটি পুরোপুরি কাজ করে। অতিরিক্তভাবে, line-heightআমার জন্য সম্ভাব্য মানগুলি 0, 1, 1 মিম এবং 100% হিসাবে খুঁজে পেয়েছি। এগুলি অবশ্যই ক্রোম এবং ফায়ারফক্সে কাজ করে।

— ক্লারকিবয়

আমি এই ব্যবহারটি আমার ব্যবহারের ক্ষেত্রেও পছন্দ করি: এই উত্তরটি জিমেইলে ইমেলগুলিতে কাজ করে, গৃহীত উত্তরটি তা করে না। stackoverflow.com/questions/21118072/...

— Mshnik

Answer 3

আমার একই সমস্যা ছিল এবং প্রদত্ত উত্তরগুলির কোনওটিই কাজ করে না। তবে আমি একটি গিট কমিট পেয়েছি যা আমার জন্য কাজ করেছিল এমন একটি স্থির সঙ্গে:

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

Answer 4

এটি সহজ রাখুন:

sup { vertical-align: text-top; }

[ আপনার পৃথক টাইপ-মুখের উপর ফন্ট-আকার নির্ভর করে]

Answer 5

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}

Comments

দয়া করে আপনার কোড সহ একটি ব্যাখ্যা সরবরাহ করুন, যাতে ওپی এটি থেকে শিখতে পারে।

— EBH

Answer 6

আমি lengthউল্লম্ব-সারিবদ্ধ উপর ব্যবহার করতে পছন্দ করি । এটি তার পিতামাতার বেসলাইনের উপরে প্রদত্ত দৈর্ঘ্যে মৌলের বেসলাইনটিকে সারিবদ্ধ করে।

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}

Answer 7

যে কারণে <sup>ট্যাগটি দুটি লাইনের মধ্যে ব্যবধানকে প্রভাবিত করছে তা বিভিন্ন কারণের সাথে সম্পর্কিত। কারণগুলি হ'ল: লাইন উচ্চতা, নিয়মিত ফন্টের সাথে সুপারস্ক্রিপ্টের আকার, সুপারসক্রিপ্টের রেখার উচ্চতা এবং শেষ কিন্তু সুপারসক্রিপ্টের নীচে কী থাকে তার সাথে প্রান্তিককরণ ... আপনি যদি সেট করেন ... লাইনের উচ্চতা নিয়মিত পাঠ্যটি 135% এর "টানেল ব্যান্ড" (এটিই আমি বলি) হওয়ার পরে নিয়মিত পাঠ্যটি (100%) সাদা প্যাডে আরও 35% সাদা হয়ে যায়। অনুচ্ছেদের জন্য এটি দেখতে এরকম দেখাচ্ছে:

 p
    {
            line-height: 135%;
    }

যদি আপনি তখন সুপারস্ক্রিপ্টকে সাদা প্যাড না করেন ... (যেমন এর লাইনের উচ্চতা 0 থেকে রাখুন) সুপারসক্রিপ্টটির কেবলমাত্র নিজস্ব পাঠ্যের প্রস্থ থাকবে ... যদি আপনি সুপারসক্রিপ্টটিকে নিয়মিত ফন্টের শতাংশ হিসাবে বলতে চান (তবে উদাহরণস্বরূপ %০%) এবং আপনি এটিকে নিয়মিত পাঠ্যের (পাঠ্য-মধ্যম) মাঝখানে প্রান্তিককরণ করুন, আপনি সমস্যাটি নির্মূল করতে পারেন এবং একটি সুপারস্ক্রিপ্টের মতো দেখতে একটি সুপারস্ক্রিপ্ট পেতে পারেন। এটা এখানে:

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}

Answer 8

আমি এখানে প্রস্তাবিত সমাধানটি পছন্দ করি , যেমন এই জিসফিডেলের উদাহরণ হিসাবে :

সিএসএস:

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.2em;
}

sub {
  top: 0.2em;
}

এইচটিএমএল:

<span>The following equation is perhaps the most well known of all: </span><span id="box">E<sub>a</sub> = mc<sup>2</sup></span><span>.  And it gives an opportunity to try out a superscript and even throw in a superfluous subscript!  I'm sure that Einstein would be pleased.</span>.

এই সমাধানটির সৌন্দর্য হ'ল আপনি সুপারসক্রিপ্ট এবং সাবস্ক্রিপ্টের উল্লম্ব অবস্থানটি তৈরি করতে পারেন, উপরের বা নীচের লাইনের সাথে কোনও সংঘাত এড়াতে ... উপরের দিকে, কেবল 0.2emআপনার প্রয়োজনীয়তা অনুসারে বৃদ্ধি বা হ্রাস করুন ।

Answer 9

সমস্ত লাইন লম্বা করার জন্য , সুপারস্ক্রিপ্টের সাথে রেখার সমান দেখতে, line-heightপুরো অনুচ্ছেদের জন্য বৃহত্তর সংজ্ঞা দিন

<p style='line-height:150%'>

অথবা যে কোনও মান আপনার ইচ্ছাকে প্রভাবিত করে।

এটি দেখতে অদ্ভুত লাগতে পারে তবে আপনি নিজের প্রয়োজনীয়তা বর্ণনা করেছেন described

সম্পাদনা করুন: কেবলমাত্র একজনের যখন অন্যের চেয়ে বেশি উল্লম্ব জায়গার প্রয়োজন হয় তখন সমস্ত লাইন একইরকম দেখতে , অনুচ্ছেদে সমস্ত লাইন লম্বা হতে হবে।

এটি, যেমনটি আমি বলেছি, এটি আকর্ষণীয় সমাধান নাও পারে। সম্ভবত উপ / সুপারসক্রিপ্টের সাথে ছোট ছোট পাঠ্য তৈরি করে স্প্যান দিয়ে কিছু করা যেতে পারে , সেগুলি বাদে আমি বিশ্বাস করি না আপনি কী অর্জন করতে পারেন can তবে আমি অন্য কারও সমাধান দেখতে চাই।

সম্পাদনা 2: প্রসঙ্গক্রমে, আমি একটি ছোট HTML ফাইলযুক্ত ফাইল চেষ্টা করেছি containing

<html>
<head>
<title>line-height</title>
<style>
p {
    line-height : 1.5em;
    width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow, 
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>

এবং লাইনগুলি এফএফ 3.0.14 এবং কনকরার-তে একই উচ্চতা (আমি অন্যান্য ব্রাউজারগুলির পক্ষে কথা বলতে পারি না)

Comments

আমি প্রশ্নে বলেছিলাম যে এটি সমস্যার সমাধান করে না। আইভ স্পষ্টীকরণ যুক্ত করেছে যদি আপনার ভুল বোঝাবুঝি হয়

— অ্যান্ড্রু বুলক

হ্যাঁ আমি বুঝতে পারি যদি আমার এক লাইনের জন্য আরও জায়গা প্রয়োজন হয়, ধারাবাহিকতার জন্য আমাকে অন্যদের জন্য অতিরিক্ত ঘর যুক্ত করা দরকার, এটি স্পষ্ট। আমি যা বলছি তা লাইন-উচ্চতা ঠিক করতে পারে না, এটি স্থান হ্যাঁ বাড়িয়ে তোলে, তবে আরও কিছুটা সাপ দিয়ে আরও জায়গা আছে

— অ্যান্ড্রু বুলক

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

— প্যাভিয়াম

Answer 10

আমি লাইন-উচ্চতা ব্যবহার করেছি: সুপারস্ক্রিপ্টের জন্য স্বাভাবিক, যা সাফারি, ক্রোম এবং ফায়ারফক্সে আমার পক্ষে ভাল কাজ করে তবে আমি IE সম্পর্কে নিশ্চিত নই।

Answer 11

নিউজলেটারে এটি বিশেষভাবে ব্যবহার করুন -

<sup style="font-size:9px; line-height:8px;">&reg;</sup>

Answer 12

আমি মিলুঙ্গু কিলুর সমাধান পছন্দ করি তবে একই আত্মায় আমি পছন্দ করি

sup { vertical-align:top; line-height:100%; }

Answer 13

& সুপার 1, এবং সুপার 2 ইত্যাদি কৌশলটি করতে পারে। এটি সুপারস্ক্রিপ্টের একটি HTML কৌশল

Answer 14

এখান থেকে উত্তর , উভয় ফ্যান্টমজে এবং ইমেল এম্বেড এইচটিএমএল তে কাজ করে:

Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup>