ตัวยกใน CSS เท่านั้น?

ฉันจะใช้ตัวยกได้เฉพาะใน CSS เท่านั้น?

ฉันมีสไตล์ชีทที่ฉันทำเครื่องหมายลิงก์ภายนอกด้วยอักขระตัวยก แต่ฉันมีเวลายากที่จะจัดแนวอักขระให้ถูกต้อง

สิ่งที่ฉันมีในขณะนี้มีลักษณะเช่นนี้:

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

แต่มันไม่ทำงาน

โดยธรรมชาติแล้วฉันจะใช้<sup>-tag เฉพาะในกรณีที่contentจะอนุญาตให้ใช้ HTML ...

คุณสามารถยกด้วย vertical-align: super(รวมถึงการfont-sizeลดที่มาพร้อมกับ)

อย่างไรก็ตามให้แน่ใจว่าได้อ่านคำตอบอื่น ๆที่นี่โดยเฉพาะอย่างยิ่งพวกpaulmurrayและcletusสำหรับข้อมูลที่เป็นประโยชน์

สุจริตฉันไม่เห็นจุดในการทำตัวยก / ตัวห้อยใน CSS เท่านั้น ไม่มีแอตทริบิวต์ CSS ที่ใช้งานง่ายเพียงแค่มีการใช้งานแบบพื้นบ้านมากมายเช่น:

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

หรือใช้การจัดแนวตั้งหรือฉันแน่ใจว่าวิธีอื่น สิ่งที่มันเริ่มซับซ้อน:

• CSS ระยะห่างยกบนความสูงบรรทัด;
• ระวัง CSS สำหรับ Superscript / Subcriptว่าทำไมคุณถึงไม่ควรจัดสไตล์ตัวยก / ตัวห้อยด้วย CSS เลย ;

จุดที่สองคือการเน้นที่คุ้มค่า โดยทั่วไปแล้วตัวยก / ตัวห้อยไม่ใช่ปัญหาในการกำหนดสไตล์ แต่เป็นตัวบ่งชี้ความหมาย

หมายเหตุด้านข้าง:เป็นเรื่องที่ควรค่าแก่การกล่าวถึงรายการเอนทิตีนี้สำหรับนิพจน์ทางคณิตศาสตร์ตัวยกและนิพจน์ตัวห้อยแม้ว่าคำถามนี้จะไม่เกี่ยวข้องกันก็ตาม

แท็กย่อย / sup อยู่ใน HTML และ XHTML ฉันจะใช้มัน

สำหรับส่วนที่เหลือของ CSS นั้น: หลังจากองค์ประกอบหลอกและองค์ประกอบเนื้อหาไม่ได้รับการสนับสนุนอย่างกว้างขวาง หากคุณไม่ต้องการใส่สิ่งนี้ด้วยตนเองใน HTML ฉันคิดว่าโซลูชันที่ใช้ Javascript คือทางออกที่ดีที่สุดของคุณ ด้วย jQuery สิ่งนี้ง่ายเหมือน:

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

เอกสาร CSS ประกอบด้วย CSS มาตรฐานเทียบเท่าอุตสาหกรรมสำหรับการสร้าง HTML ทั้งหมด นั่นคือส่วนใหญ่เว็บเบราเซอร์วันนี้ไม่ชัดเจนจัดการSUB, SUP, B, Iและอื่น ๆ - พวกเขา (นะ sorta) จะถูกแปลงเป็นSPANองค์ประกอบที่มีคุณสมบัติที่เหมาะสม CSS และเครื่องมือการแสดงผลเท่านั้นที่มีข้อตกลงกับ

หน้านี้เป็นภาคผนวก D. สไตล์ชีตเริ่มต้นสำหรับ HTML 4

บิตที่คุณต้องการคือ:

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

ฉันกำลังทำงานบนหน้าเว็บโดยมีจุดประสงค์ในการมีข้อความที่อ่านได้ชัดเจนด้วยองค์ประกอบตัวยกที่ไม่เปลี่ยนระยะขอบบนและล่างของบรรทัดด้วยการสังเกตดังต่อไปนี้:

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;
}

http://htmldog.com/articles/superscript/ เป็นหลัก:

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

ทำงานได้ดีในทางปฏิบัติเท่าที่ฉันสามารถบอกได้

ข้อมูลต่อไปนี้นำมาจาก html.css ภายในของ Mozilla Firefox:

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

ดังนั้นในกรณีของคุณมันจะเป็นสิ่งที่ชอบ:

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

นี่เป็นอีกวิธีที่สะอาด:

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 */

ด้วยวิธีนี้คุณยังคงสามารถใช้แท็กsup / sub ได้แต่คุณแก้ไขพฤติกรรมที่ไม่ดีของมันเพื่อทำให้ความสูงของบรรทัดในย่อหน้าหมดไป

ดังนั้นตอนนี้คุณสามารถทำได้:

  <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">) ดังนั้นฉันจึงไม่ทราบว่าโซลูชันนี้ทำงานได้ดีหรือไม่เมื่อเบราว์เซอร์อยู่ในโหมด quirkmode (หรือไม่ใช่โหมดมาตรฐาน) เนื่องจากไม่มี DOCTYPE หรือ DOCTYPE ที่ไม่เปิดใช้งานโหมดมาตรฐาน / เกือบมาตรฐาน

หากคุณกำลังเปลี่ยนขนาดตัวอักษรคุณอาจต้องการหยุดย่อขนาดด้วยกฎนี้:

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

ฉันไม่แน่ใจว่าสิ่งนี้เกี่ยวข้องหรือไม่ แต่ฉันได้แก้ไขปัญหากับ ²เอนทิตี HTML เนื่องจากฉันไม่สามารถเพิ่มแท็ก html อื่น ๆ ภายใน<label>แท็กได้ ดังนั้นความคิดจึงใช้รหัส ASCII แทน css หรือแท็ก HTML

ชำระเงิน: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

หากดูเหมือนว่าคุณต้องการ "แนวตั้ง: text-top"

คุณสมบัติ CSS font-variant-positionอยู่ระหว่างการพิจารณาและอาจเป็นคำตอบสำหรับคำถามนี้ในที่สุด จนถึงต้นปี 2560 มีเพียง Firefox เท่านั้นที่รองรับ

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

ดูMDN

ที่เกี่ยวข้องหรืออาจจะไม่เกี่ยวข้องโดยใช้ตัวยกเป็นองค์ประกอบ HTML หรือเป็นช่วง + css ในข้อความอาจทำให้เกิดปัญหากับการแปล - ในโปรแกรมการแปล

ตัวอย่างเช่นสมมติว่า "3 ^ถซอฟต์แวร์ของบุคคล":

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

นักแปลสามารถแปล "RD" ได้อย่างไร พวกเขาสามารถเว้นว่างไว้สำหรับภาษาไซริลหลายภาษา แต่ภาษาแปลกใหม่หรือภาษา RTL อื่น ๆ

ในกรณีนี้การหลีกเลี่ยงการใช้ตัวยกและการใช้ถ้อยคำแบบเต็มเช่น "ซอฟต์แวร์บุคคลที่สาม" จะเป็นการดีกว่า หรือตามที่กล่าวไว้ในความคิดเห็นอื่น ๆ เพิ่มเครื่องหมายบวกในตัวยกผ่าน jQuery

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

นี่คือวิธีการใช้ sup ที่แน่นอน:

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

พบสิ่งนี้ผ่านองค์ประกอบการตรวจสอบของ Google Chrome