কেবল সিএসএসে সুপারস্ক্রিপ্ট?

Question

কেবলমাত্র সিএসএসে আমি কীভাবে সুপারস্ক্রিপ্ট করব?

আমার স্টাইলশীট রয়েছে যেখানে আমি সুপারস্ক্রিপ্টের চরিত্রের সাথে বাহ্যিক লিঙ্কগুলি চিহ্নিত করি, তবে চরিত্রটি সঠিকভাবে সারিবদ্ধ করতে আমার বেশ কষ্ট হচ্ছে।

আমার কাছে বর্তমানে যা আছে তা দেখতে এটির মতো দেখাচ্ছে:

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

কিন্তু এটি কাজ করে না।

স্বাভাবিকভাবেই, আমি- <sup>ট্যাগটি ব্যবহার করতাম, যদি কেবল contentএইচটিএমএলকে অনুমতি দেয় ...

Comments

আপনার কাছে কোনও তাত্পর্য আছে বলে মনে হচ্ছে: উল্লম্ব-সারিবদ্ধ শীর্ষ কিন্তু <সাব>? অনুমান করা আপনার মানে <আপ>?

— ক্লিটাস

IE9 এ "উল্লম্ব-সারিবদ্ধ: পাঠ্য-শীর্ষ "টি আমার পক্ষে কাজ করে নি। তবে, এটি ফায়ারফক্স ৪.০ এ করেছে। কমপক্ষে একটি ওয়ার্ডপ্রেস প্রসঙ্গে।

— জোসেফবি

যদি contentএইচটিএমএলকে অনুমতি দেওয়া হয় তবে উদ্বেগের পৃথকীকরণ ক্ষতিগ্রস্থ হবে।

— ইভা

Answer 1

আপনি এর সাথে সুপারস্ক্রিপ্ট করতে পারেন vertical-align: super, (প্লাস সহ font-sizeহ্রাস)।

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

Comments

এছাড়াও, font-sizeপ্রকৃত সুপারস্ক্রিপ্ট প্রভাব দেওয়ার জন্য হ্রাস করতে হবে।

— নির্মল

নীচে @ পলমুরের উত্তর আরও সঠিক এবং বিস্তৃত। আইএমএইচও, এটি গ্রহণযোগ্য উত্তর হওয়া উচিত।

— ডগ পল

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

— পিটার বুটন

Answer 2

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

.superscript { position: relative; top: -0.5em; font-size: 80%; }

বা উল্লম্ব-সারিবদ্ধ ব্যবহার বা আমি নিশ্চিত অন্যান্য উপায় নিশ্চিত। বিষয়টি হ'ল, এটি জটিল হতে শুরু করে:

• লাইন উচ্চতায় সিএসএস সুপারস্প্রিপ্ট ব্যবধান ;
• সুপারস্ক্রিপ্ট / Subcript জন্য CSS থেকে সাবধান উপর কেন তুমি তর্কসাপেক্ষে করা উচিত নয় শৈলী সুপারস্ক্রিপ্ট / CSS এর সঙ্গে সাবস্ক্রিপ্ট এ সব ;

দ্বিতীয় বিষয়টি জোর দেওয়ার মতো। সাধারণত সুপারসক্রিপ্ট / সাবস্ক্রিপ্ট আসলে স্টাইলিংয়ের সমস্যা নয় তবে এটি অর্থের সূচক।

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

সাব / সুপার ট্যাগগুলি এইচটিএমএল এবং এক্সএইচটিএমএলতে রয়েছে। আমি কেবল সেগুলি ব্যবহার করব।

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

$(function() {
  $("a.external").append("<sup>+</sup>");
};

Comments

"ব্যাপকভাবে সমর্থিত নয়" এর সাথে আপনি বোঝাতে চাইছেন "আইই সমর্থিত নয়", আমি মনে করি?

— বোল্ডউইন

quirksmode.org/css/contents.html আই 7 এবং নিম্ন বা আই 88 তে সামঞ্জস্যতা মোডে সমর্থিত নয়।

— ক্লিটাস

... যা আমি ঠিক বলেছিলাম, হ্যাঁ।

— বোল্ডউইন

একটি এসইউপি ট্যাগ সহ একটি ট্যাগ মোড়ানো সহজ করার জন্য, নিম্নলিখিতটি ব্যবহার করুন: $ ("a.external") .েকে নিন ("<সুপার />");

— রাসেল

প্রথমে @ পিটারবুটন দ্বারা গৃহীত সমাধানটি ব্যবহার করুন, এটির জন্য বেছে নেওয়া হয়েছে কারণ এটি লাইন-উচ্চতা স্কু করে না।

— নুরি হজেস

Answer 3

সিএসএস ডকুমেন্টেশনে সমস্ত এইচটিএমএল কনস্ট্রাক্টসের জন্য শিল্প-মানের সিএসএস সমতুল্য রয়েছে। যে: বেশিরভাগ ওয়েব ব্রাউজার এই দিন স্পষ্টভাবে হ্যান্ডেল না SUB, SUP, B, Iইত্যাদি - তারা (ধরণ sorta) রূপান্তরিত হয় SPANউপযুক্ত সিএসএস বৈশিষ্ট্য সঙ্গে উপাদান, এবং রেন্ডারিং ইঞ্জিন শুধু তাই নিয়ে কাজ করে।

পৃষ্ঠাটি এইচটিএমএল 4 এর জন্য পরিশিষ্ট ডি। ডিফল্ট স্টাইল শীট

আপনি যে বিটগুলি চান তা হ'ল:

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

Comments

এটি কাজ করে, তবে এটি স্ক্রু আপ হয় line-height। এই প্রোগ্রামটিতে একমাত্র উপায় স্ক্রু আপ না line-heightব্যবহার করা position:relative: যেমন দ্বারা cletus প্রস্তাব stackoverflow.com/a/501689/260080

— মার্কো Demaio

Answer 4

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

line-height: 1.5emউদাহরণস্বরূপ যদি আপনার মূল পাঠ্যের জন্য আপনার কাছে থাকে তবে আপনার সুপারসক্রিপ্ট পাঠ্যের সঠিকভাবে প্রকাশের জন্য আপনার লাইনের উচ্চতা হ্রাস করা উচিত। আমি ব্যবহৃত line-height: 0.5em।

এছাড়াও, vertical-align: superবেশিরভাগ ব্রাউজারগুলিতে ভাল কাজ করে তবে IE8 এ যখন আপনার কাছে একটি সুপারস্ক্রিপ্ট উপাদান উপস্থিত থাকে, তখন line লাইনের বাকি অংশটি নিচে চাপ দেওয়া হয়। সুতরাং পরিবর্তে আমি vertical-align: baselineএকই সাথে একটি নেতিবাচক topএবং position: relativeএকই প্রভাব অর্জন করেছি, যা ব্রাউজারগুলিতে আরও ভাল কাজ করে বলে মনে হচ্ছে।

সুতরাং, "হোমগ্রাউন বাস্তবায়নগুলি" যুক্ত করতে:

.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

Comments

ডিভ পাত্রে রাখলে এটি বন্ধ হয়ে যায়

— অ্যালেক্স জি

Answer 5

http://htmldog.com/articles/superscript/ মূলত:

position: relative;
bottom: 0.5em;
font-size: 0.8em;

অনুশীলনে ভাল কাজ করে, যতদূর আমি বলতে পারি।

Answer 6

নিম্নলিখিতটি মজিলা ফায়ারফক্সের অভ্যন্তরীণ html.css থেকে নেওয়া হয়েছে:

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

সুতরাং, আপনার ক্ষেত্রে এটি এমন কিছু হবে যেমন:

.superscript {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

Answer 7

এটি অন্য একটি পরিষ্কার সমাধান:

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

এই উপায়ে আপনি এখনও সুপার / সাব ট্যাগ ব্যবহার করতে পারেন তবে আপনি অনুচ্ছেদের লাইনের উচ্চতা স্ক্রু করতে সর্বদা তাদের অলস আচরণটি স্থির করেছেন ।

সুতরাং এখন আপনি এটি করতে পারেন:

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

এবং আপনার অনুচ্ছেদের লাইনের উচ্চতা স্ক্রু করা উচিত নয়।

IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9 এ পরীক্ষিত

আমি একটি ব্যবহার করে পরীক্ষা করেছি p {line-height: 1.3;}(যদি না আপনার লাইনগুলি খুব কাছেই আঁকতে চান তবে এটি একটি ভাল লাইনের উচ্চতা) এবং এটি এখনও কাজ করে, কারণ "-0.6 মিমি" এমন একটি সামান্য পরিমাণ যা সেই লাইনের উচ্চতার সাথেও সাব / সাব টেক্সট ফিট হবে এবং একে অপরের উপর যেতে না।

প্রাসঙ্গিক হতে পারে এমন একটি বিবরণ ভুলে গিয়েছি আমি সবসময় আমার পৃষ্ঠার প্রথম লাইনে ডক্টইপিই ব্যবহার করি (বিশেষত আমি এইচটিএমএল 4.01 ব্যবহার করি <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">)। সুতরাং আমি জানি না যে ডক্টইপির অভাবের কারণে ব্রাউজারটি কিরকমোডে (বা স্ট্যান্ডার্ড মোডে নয়) অথবা স্ট্যান্ডার্ড / প্রায় স্ট্যান্ডার্ড মোডকে ট্রিগার না করে এমন একটি ডক্টইপিইতে এই সমাধানটি ভালভাবে কাজ করে কিনা I

Answer 8

আপনি যদি ফন্টের আকার পরিবর্তন করে থাকেন তবে আপনি এই নিয়মের সাহায্যে আকার সঙ্কুচিত করা বন্ধ করতে চাইতে পারেন:

sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}

Answer 9

এটি সম্পর্কিত কিনা আমি নিশ্চিত নই তবে আমি ²কোনও <label>ট্যাগের মধ্যে অন্য কোনও এইচটিএমএল ট্যাগ যুক্ত করতে সক্ষম না হওয়ায় আমি এইচটিএমএল সত্তা নিয়ে আমার সমস্যাটি সমাধান করেছি । সুতরাং ধারণাটি CSS বা HTML ট্যাগগুলির পরিবর্তে ASCII কোডগুলি ব্যবহার করছে।

Answer 10

চেক আউট করুন: http://www.cssdesignpatterns.com/ChaPoint%2012%20-%20ALIGNING%20CONTENT/ ভার্চিয়াল- স্বাক্ষরিত হয়েছে ২০২০ বিষয় / উদাহরণ নমুনা html

যদি মনে হয় আপনি "উল্লম্ব-সারিবদ্ধ: পাঠ্য-শীর্ষ" চান

Answer 11

সিএসএস সম্পত্তি font-variant-positionবিবেচনাধীন এবং অবশেষে এই প্রশ্নের উত্তর হতে পারে। 2017 এর প্রথমদিকে কেবল ফায়ারফক্স এটি সমর্থন করে।

.super {
    font-variant-position: super;
}

এমডিএন দেখুন ।

Comments

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

— জেনস

Answer 12

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

উদাহরণস্বরূপ বলা যাক "3 ^ডি পার্টির সফ্টওয়্যার":

3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software

অনুবাদকরা কীভাবে "আরডি" অনুবাদ করতে পারেন? তারা এটি বেশ কয়েকটি সিরিলিক ভাষার জন্য খালি রেখে দিতে পারে, তবে অন্যান্য বিদেশী বা আরটিএল ভাষার কী হবে?

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

Answer 13

.superscript {
  position: relative;
  top: 5px;
  font-size: 90%;
  vertical-align: super;
}

Answer 14

সহায়তার সঠিক উপায়টি এখানে:

.superscript{
    vertical-align:super;
    font-size:smaller;
}

গুগল ক্রোম পরিদর্শন উপাদানটির মাধ্যমে এটি পাওয়া গেছে।