Superskrip dalam CSS saja?

Bagaimana saya bisa menyelesaikan superskrip, hanya dalam CSS?

Saya memiliki stylesheet di mana saya menandai tautan eksternal dengan karakter superskrip, tetapi saya mengalami kesulitan mendapatkan karakter disejajarkan dengan benar.

Apa yang saya miliki saat ini, terlihat seperti ini:

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

tetapi tidak berhasil.

Secara alami, saya akan menggunakan <sup>-tag, hanya jika contentmemungkinkan untuk HTML ...

Anda dapat melakukan superskrip dengan vertical-align: super, (ditambah font-sizepengurangan yang menyertainya ).

Namun, pastikan untuk membaca jawaban lain di sini, terutama yang oleh paulmurray dan cletus , untuk informasi yang bermanfaat.

Jujur saya tidak melihat gunanya melakukan superskrip / subskrip hanya dalam CSS. Tidak ada atribut CSS yang berguna untuk itu, hanya sekelompok implementasi buatan sendiri termasuk:

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

atau menggunakan vertical-align atau saya yakin cara lain. Masalahnya, itu mulai menjadi rumit:

• Jarak superskrip CSS pada ketinggian baris;
• Waspadalah terhadap CSS untuk Superskrip / Subkrip tentang mengapa Anda seharusnya tidak menggunakan superskrip / subskrip dengan CSS sama sekali ;

Poin kedua patut ditekankan. Biasanya superskrip / subskrip sebenarnya bukan masalah gaya tetapi indikasi makna.

Catatan: Perlu disebutkan daftar entitas ini untuk superskrip matematika dan ekspresi subskrip matematika yang umum meskipun pertanyaan ini tidak berhubungan dengan itu.

Tag sub / sup dalam HTML dan XHTML. Saya hanya akan menggunakan itu.

Adapun sisa CSS Anda, atribut: after pseudo-element dan konten tidak didukung secara luas. Jika Anda benar-benar tidak ingin meletakkan ini secara manual dalam HTML saya pikir solusi berbasis Javascript adalah taruhan terbaik Anda berikutnya. Dengan jQuery ini sesederhana:

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

Dokumentasi CSS berisi padanan standar industri CSS untuk semua konstruksi HTML. Yaitu: kebanyakan browser web hari ini tidak secara eksplisit menangani SUB, SUP, B, Idan sebagainya - mereka (agak agak) diubah menjadi SPANelemen dengan sifat CSS yang sesuai, dan mesin rendering hanya berurusan dengan itu.

Halaman ini adalah Lampiran D. Lembar gaya default untuk HTML 4

Bit yang Anda inginkan adalah:

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

Saya sedang mengerjakan halaman dengan tujuan memiliki teks yang jelas terbaca, dengan elemen superscript TIDAK mengubah margin atas dan bawah garis - dengan pengamatan berikut:

Jika untuk teks utama yang Anda miliki line-height: 1.5emmisalnya, Anda harus mengurangi ketinggian baris teks superscript Anda agar teks tersebut muncul dengan benar. Saya menggunakan line-height: 0.5em.

Juga, vertical-align: superberfungsi dengan baik di sebagian besar browser tetapi di IE8 ketika Anda memiliki elemen superscript, sisa baris tersebut ditekan ke bawah. Jadi alih-alih saya menggunakan vertical-align: baselinebersama-sama dengan negatif topdan position: relativeuntuk mencapai efek yang sama, yang tampaknya berfungsi lebih baik di browser.

Jadi, untuk menambah "implementasi homegrown":

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

http://htmldog.com/articles/superscript/ Intinya:

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

Bekerja dengan baik dalam praktik, sejauh yang saya tahu.

Berikut ini diambil dari html.css internal Mozilla Firefox:

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

Jadi, dalam kasus Anda itu akan menjadi sesuatu, seperti:

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

Ini adalah solusi bersih lainnya:

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

Dengan cara ini Anda masih dapat menggunakan tag dukungan / sub tetapi Anda memperbaiki perilaku buruk mereka untuk selalu mengacaukan ketinggian baris paragraf .

Jadi sekarang Anda bisa melakukannya:

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

Dan tinggi baris paragraf Anda seharusnya tidak kacau.

Diuji pada IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

Saya menguji menggunakan p {line-height: 1.3;}(yang merupakan ketinggian garis yang baik kecuali jika Anda ingin garis Anda tetap terlalu dekat) dan masih berfungsi, karena "-0.6em" adalah jumlah yang sangat kecil yang juga dengan ketinggian garis itu sub / sub teks akan cocok dan jangan saling membahas.

Lupa detail yang mungkin relevan Saya selalu menggunakan DOCTYPE di baris 1 halaman saya (khususnya saya menggunakan HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). Jadi saya tidak tahu apakah solusi ini berfungsi dengan baik ketika browser berada dalam quirkmode (atau bukan mode standar) karena kurangnya DOCTYPE atau DOCTYPE yang tidak memicu mode Standar / Hampir Standar.

Jika Anda mengubah ukuran font, Anda mungkin ingin berhenti menyusut dengan aturan ini:

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

Saya tidak yakin apakah ini terkait tetapi saya telah memecahkan masalah saya dengan ²entitas HTML karena saya tidak dapat menambahkan tag html lain di dalam <label>tag. Jadi idenya menggunakan kode ASCII, bukan css atau tag HTML.

Lihat: http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

jika sepertinya Anda ingin "meluruskan vertikal: teks-atas"

Properti CSS font-variant-positionsedang dipertimbangkan dan mungkin akhirnya menjadi jawaban untuk pertanyaan ini. Pada awal 2017, hanya Firefox yang mendukungnya.

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

Lihat MDN .

Terkait atau mungkin tidak terkait, menggunakan superscript sebagai elemen HTML atau sebagai span + css dalam teks dapat menyebabkan masalah dengan pelokalan - dalam program pelokalan.

Sebagai contoh mari katakan "3 ^rd perangkat lunak pihak":

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

Bagaimana penerjemah menerjemahkan "rd"? Mereka dapat membiarkannya kosong untuk beberapa bahasa cyrrilic, tetapi bagaimana dengan bahasa eksotis atau RTL lainnya?

Dalam hal ini lebih baik untuk menghindari menggunakan superskrip dan menggunakan kata-kata penuh seperti "perangkat lunak pihak ketiga". Atau, seperti yang disebutkan di sini di komentar lain, menambahkan tanda plus dalam superscript melalui jQuery.

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

Berikut cara yang tepat untuk sup:

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

Menemukan ini melalui elemen inspeksi google chrome.