CSS में Superscript ही?

Question

केवल सीएसएस में मैं सुपरस्क्रिप्ट कैसे प्राप्त कर सकता हूं?

मेरे पास एक स्टाइलशीट है जहां मैं बाहरी लिंक को सुपरस्क्रिप्ट वर्ण के साथ चिह्नित करता हूं, लेकिन मुझे एक मुश्किल समय मिल रहा है कि चरित्र सही ढंग से संरेखित हो।

मेरे पास वर्तमान में क्या है, इस तरह दिखता है:

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

लेकिन यह काम नहीं करता है।

स्वाभाविक रूप से, मैं <sup>-tag का उपयोग करूंगा, केवल तभी जब contentHTML की अनुमति होगी ...

Comments

आपको एक विसंगति लगती है: ऊर्ध्वाधर-संरेखित शीर्ष लेकिन <उप>? मान लें कि आपका मतलब <सुप> है?

— क्लेटस

IE9 में "वर्टिकल-अलाइन: टेक्स्ट-टॉप" मेरे काम नहीं आया। लेकिन, यह FireFox 4.0 में किया था। कम से कम एक वर्डप्रेस संदर्भ के भीतर।

— जोसेफ

यदि contentHTML की अनुमति दी जाती है, तो चिंताओं का पृथक्करण होगा।

— ईवा

Answer 1

आप vertical-align: super(साथ में font-sizeकमी) के साथ सुपरस्क्रिप्ट कर सकते हैं ।

हालांकि, के लिए सुनिश्चित हो अन्य उत्तर पढ़ विशेष रूप से उन लोगों के लिए, यहाँ paulmurray और cletus , उपयोगी जानकारी के लिए।

Comments

इसके अलावा, font-sizeवास्तविक सुपरस्क्रिप्ट प्रभाव देने के लिए कम किया जाना चाहिए।

— निर्मल

@ नीचे पल्मुर्रे का उत्तर अधिक सटीक और व्यापक है। IMHO, यह स्वीकृत उत्तर होना चाहिए।

— डग पॉल

जब उत्तर देने के तीन अलग-अलग तरीके होते हैं, तो "नीचे" कहना मदद नहीं करता है। आप सही हालांकि, कर रहे हैं पॉल का जवाब है एक अच्छा वाला है, और यह इस कई वोटों के रूप में पदभार पांच बार है पागल है।

— पीटर बॉटन

Answer 2

ईमानदारी से मैं केवल सीएसएस में सुपरस्क्रिप्ट / सबस्क्रिप्ट करने की बात नहीं देखता। इसके लिए कोई आसान सीएसएस विशेषता नहीं है, बस होमग्रोन कार्यान्वयन का एक गुच्छा शामिल है:

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

या अनुलंब-संरेखित का उपयोग कर या मुझे यकीन है कि अन्य तरीके हैं। बात यह है, यह जटिल होने लगता है:

• सीएसएस सुपरस्क्रिप्ट को लाइन ऊंचाई पर रिक्ति ;
• सुपरस्क्रिप्ट / Subcript के लिए सीएसएस खबरदार पर तुम क्यों यकीनन चाहिए नहीं शैली सुपरस्क्रिप्ट / सीएसएस के साथ सबस्क्रिप्ट सभी को एक ;

दूसरा बिंदु जोर देने योग्य है। आमतौर पर सुपरस्क्रिप्ट / सबस्क्रिप्ट वास्तव में एक स्टाइलिंग मुद्दा नहीं है, लेकिन अर्थ का सूचक है।

साइड नोट: यह सामान्य गणितीय सुपरस्क्रिप्ट और सबस्क्रिप्ट अभिव्यक्तियों के लिए संस्थाओं की इस सूची का उल्लेख करने योग्य है, भले ही यह प्रश्न उस से संबंधित न हो।

सब / सुपर टैग HTML और XHTML में हैं। मैं बस उन का उपयोग करेंगे।

अपने सीएसएस के बाकी हिस्सों के लिए: छद्म तत्व और सामग्री विशेषताओं के बाद व्यापक रूप से समर्थित नहीं हैं। यदि आप वास्तव में इसे मैन्युअल रूप से HTML में नहीं डालना चाहते हैं तो मुझे लगता है कि जावास्क्रिप्ट-आधारित समाधान आपका अगला सर्वश्रेष्ठ दांव है। JQuery के साथ यह उतना ही सरल है:

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

Comments

"व्यापक रूप से समर्थित नहीं" का अर्थ है "आईई में समर्थित नहीं", मुझे लगता है?

— बोल्ड्यूविन

quirksmode.org/css/contents.html IE7 में समर्थित नहीं है और संगतता मोड में कम या IE8 में।

— क्लेटस

... जो मैंने कहा है, बिल्कुल वही है।

— बोल्डवेन

सुपर टैग के साथ एक टैग को लपेटने को सरल बनाने के लिए, निम्नलिखित का उपयोग करें: $ ("a.external")। लपेटें ("<सुप />");

— रसेल

पहले @PeterBoughton द्वारा स्वीकृत समाधान का उपयोग किया, इसे एक के लिए चुना क्योंकि यह लाइन-ऊंचाई को तिरछा नहीं करता है।

— नूरी होजेस

Answer 3

CSS प्रलेखन में सभी HTML कंस्ट्रक्शंस के लिए उद्योग-मानक CSS समतुल्य है। यही कारण है: अधिकांश वेब ब्राउज़रों इन दिनों स्पष्ट रूप से संभाल नहीं है SUB, SUP, B, Iऔर इतने पर - वे (थोड़े sorta) में बदला जाता है SPANउचित सीएसएस गुणों के साथ तत्वों, और प्रतिपादन इंजन ही नहीं की गई है।

पृष्ठ HTML 4 के लिए परिशिष्ट D. डिफ़ॉल्ट शैली पत्रक है

बिट्स आप चाहते हैं:

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

Comments

यह काम करता है, लेकिन यह शिकंजा कसता है line-height। IMHO स्क्रू न करने का एकमात्र तरीका line-heightहै, position:relativeजैसा कि cletus द्वारा सुझाया गया उपयोग करना है : stackoverflow.com/a/501689/260080

— Marco Demaio

Answer 4

मैं स्पष्ट रूप से सुपाठ्य पाठ होने के उद्देश्य से एक पृष्ठ पर काम कर रहा था, जिसमें सुपरस्क्रिप्ट तत्वों के साथ लाइन के ऊपर और नीचे के मार्जिन को नहीं बदल रहा है - निम्नलिखित टिप्पणियों के साथ:

यदि आपके line-height: 1.5emउदाहरण के लिए आपके मुख्य पाठ के लिए है, तो आपको सही ढंग से प्रदर्शित होने के लिए अपने सुपरस्क्रिप्ट पाठ की लाइन-ऊंचाई को कम करना चाहिए। मैंने इस्तेमाल किया line-height: 0.5em।

vertical-align: superअधिकांश ब्राउज़रों में भी अच्छी तरह से काम करता है , लेकिन IE8 में जब आपके पास एक सुपरस्क्रिप्ट तत्व मौजूद होता है, तो उस लाइन के बाकी हिस्सों को नीचे धकेल दिया जाता है। इसलिए इसके बजाय मैंने 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.6em" इतनी छोटी राशि है कि उस लाइन की ऊंचाई के साथ भी उप / उप पाठ फिट होगा और एक दूसरे के ऊपर मत जाओ।

एक विवरण भूल गए जो प्रासंगिक हो सकता है मैं हमेशा अपने पृष्ठ की पहली पंक्ति में DOCTYPE का उपयोग करता हूं (विशेष रूप से मैं HTML 4.01 का उपयोग करता हूं <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">)। इसलिए मुझे नहीं पता कि DOCTYPE की कमी या DOCTYPE या मानक / लगभग मानक मोड को ट्रिगर नहीं करने वाले DOCTYPE की कमी के कारण यह समाधान अच्छी तरह से काम करता है।

Answer 8

यदि आप फ़ॉन्ट आकार बदल रहे हैं, तो आप इस नियम से सिकुड़ते आकार को रोकना चाहते हैं:

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

Answer 9

मुझे यकीन नहीं है कि यह संबंधित है, लेकिन मैंने ²HTML संस्थाओं के साथ अपनी समस्या को हल कर लिया है क्योंकि मैं एक <label>टैग के अंदर किसी अन्य HTML टैग को जोड़ने में सक्षम नहीं था । इसलिए यह विचार css या HTML टैग्स के बजाय ASCII कोड का उपयोग कर रहा था।

Answer 10

देखें: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

यदि आप चाहते हैं कि आप "वर्टिकल-अलाइन: टेक्स्ट-टॉप" चाहते हैं

Answer 11

CSS संपत्ति font-variant-positionविचाराधीन है और अंततः इस प्रश्न का उत्तर हो सकता है। 2017 की शुरुआत में, केवल फ़ायरफ़ॉक्स इसका समर्थन करता है, हालांकि।

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

MDN देखें ।

Comments

यह वसंत 2020 है और अभी भी किसी भी ब्राउज़र लेकिन फ़ायरफ़ॉक्स द्वारा समर्थित नहीं है। आह तो ...

— जेन्स

Answer 12

संबंधित या शायद संबंधित नहीं है, HTML तत्व के रूप में या पाठ में एक स्पैन + सीएसएस के रूप में सुपरस्क्रिप्ट का उपयोग स्थानीयकरण कार्यक्रमों के साथ समस्या का कारण हो सकता है।

उदाहरण के लिए मान लें कि "3 ^rd पार्टी सॉफ़्टवेयर":

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

अनुवादक "rd" का अनुवाद कैसे कर सकते हैं? वे इसे कई सिरिलिक भाषाओं के लिए खाली छोड़ सकते हैं, लेकिन अन्य विदेशी या RTL भाषाओं का क्या?

इस मामले में यह बेहतर है कि सुपरस्क्रिप्ट का उपयोग करने से बचें और "तीसरे पक्ष के सॉफ़्टवेयर" जैसे पूर्ण शब्दांकन का उपयोग करें। या, जैसा कि अन्य टिप्पणियों में यहां बताया गया है, jQuery के माध्यम से सुपरस्क्रिप्ट में प्लस संकेत जोड़ रहा है।

Answer 13

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

Answer 14

यहाँ सुपर तरीका उपयोग किया गया है:

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

यह Google क्रोम निरीक्षण तत्व के माध्यम से मिला।