Tag HTML <sup /> memengaruhi ketinggian garis, bagaimana membuatnya konsisten?

Jika saya memiliki <sup>tag dalam tag multi-line <p>, baris dengan superscript di atasnya memiliki spasi lebih besar di atasnya daripada baris lain, terlepas dari apa ketinggian garis yang saya letakkan pada <p>.

Sunting untuk klarifikasi : Maksud saya saya tidak punya banyak <p>, masing-masing satu baris. Saya punya satu <p>dengan konten yang cukup di dalamnya untuk menyebabkan pembungkus ke beberapa baris. Di suatu tempat (di mana saja) dalam teks mungkin ada a <sup>atau <sub>. Ini memengaruhi ketinggian garis untuk garis itu dengan menambahkan spasi ekstra di atas / di bawah. Jika saya menetapkan tinggi garis lebih tinggi pada <p>ini tidak ada bedanya dengan masalah. Ketinggian garis meningkat, tetapi spasi tambahan masih tetap.

Bagaimana saya bisa membuatnya konsisten - yaitu semua baris memiliki spasi yang sama apakah mengandung <sup>atau tidak?

Solusi Anda harus cross-browser (IE 6+, FF, safari, opera, chrome)

line-height memang memperbaikinya, tetapi Anda mungkin harus membuatnya cukup besar: pada setttings saya, saya harus menambah tinggi garis menjadi sekitar 1,8 sebelum <sup>tidak lagi mengganggu, tetapi ini akan bervariasi dari font ke font.

Salah satu pendekatan yang mungkin untuk mendapatkan ketinggian garis yang konsisten adalah dengan mengatur gaya superskrip Anda sendiri dan bukan default vertical-align: super. Jika Anda menggunakannya toptidak akan menambahkan apa pun ke kotak baris, tetapi Anda mungkin harus mengurangi ukuran font lebih lanjut agar sesuai:

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

Retasan lain yang dapat Anda coba adalah dengan menggunakan posisi untuk memindahkannya sedikit tanpa memengaruhi kotak baris:

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

Tentu saja ini berisiko menabrak garis di atas jika Anda tidak memiliki ketinggian garis yang cukup.

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

Caranya adalah dengan mengatur <sup>tinggi baris ke 0. @Scott dikatakan menggunakan normal, tetapi ini tidak selalu berhasil.

Ini berarti Anda tidak perlu mengubah ketinggian garis teks di sekitarnya untuk mengakomodasi teks superscript. Saya sudah menguji ini di IE7 + dan browser utama lainnya.

Saya memiliki masalah yang sama dan tidak ada jawaban yang diberikan berhasil. Tapi saya menemukan git melakukan perbaikan yang berhasil bagi saya:

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

tetap mudah:

sup { vertical-align: text-top; }

[ ukuran font tergantung pada jenis wajah Anda]

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

Saya lebih suka menggunakan lengthvertical-align. Ini menyelaraskan garis dasar elemen pada panjang yang diberikan di atas garis dasar induknya.

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

Alasan mengapa <sup>tag memengaruhi jarak antara dua garis berkaitan dengan sejumlah faktor. Faktor-faktornya adalah: tinggi baris, ukuran superscript dalam kaitannya dengan font biasa, tinggi baris superscript dan yang terakhir dan tak kalah pentingnya adalah apa yang menjadi dasar dari superscript yang sejajar dengan ... Jika Anda mengatur ... tinggi baris teks biasa berada di "tunnel band" (itulah yang saya sebut itu) 135% kemudian teks biasa (100%) menjadi putih empuk dengan 35% lebih putih. Untuk paragraf ini terlihat seperti ini:

 p
    {
            line-height: 135%;
    }

Jika Anda kemudian tidak membuat pad putih superscript ... (yaitu menjaga ketinggian garisnya menjadi 0) superscript hanya memiliki lebar teksnya sendiri ... jika Anda kemudian meminta superscript menjadi persentase dari font biasa (untuk contoh 70%) dan Anda menyelaraskannya dengan tengah teks biasa (text-middle), Anda dapat menghilangkan masalah dan mendapatkan superskrip yang terlihat seperti superskrip. Ini dia:

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

Saya lebih suka solusi yang disarankan di sini , seperti dicontohkan oleh jsfiddle ini :

CSS:

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

sub {
  top: 0.2em;
}

HTML:

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

Keindahan dari solusi ini adalah Anda dapat menyesuaikan posisi vertikal superscript dan subskrip, untuk menghindari bentrokan dengan garis di atas atau di bawah ... di atas, hanya menambah atau mengurangi 0.2emsesuai dengan kebutuhan Anda.

Untuk membuat semua garis lebih tinggi , agar terlihat sama dengan garis dengan superscript, tentukan yang lebih besar line-heightuntuk seluruh paragraf

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

atau nilai apa pun yang memberikan efek yang Anda inginkan.

Mungkin terlihat aneh, tetapi itulah cara Anda menggambarkan persyaratan Anda.

Suntingan: Agar semua garis terlihat sama ketika hanya satu yang membutuhkan lebih banyak ruang vertikal daripada yang lain , SEMUA garis dalam paragraf harus lebih tinggi.

Ini, seperti yang saya katakan, mungkin bukan solusi yang menarik. Mungkin sesuatu dapat dilakukan dengan rentang yang membuat teks hanya dengan sub / superscript lebih kecil , selain itu saya tidak percaya apa yang Anda inginkan dapat dicapai. Tapi saya ingin melihat solusi orang lain.

EDIT2: Kebetulan, saya sudah mencoba file html kecil yang berisi

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

Dan garis-garisnya semuanya sama tingginya di FF3.0.14 dan Konqueror (saya tidak bisa berbicara untuk peramban lain)

Saya telah menggunakan line-height: normal untuk superscript, yang berfungsi dengan baik untuk saya di Safari, Chrome, dan Firefox, tetapi saya tidak yakin tentang IE.

Gunakan ini secara khusus di buletin -

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

Saya suka solusi Milingu Kilu tetapi dengan semangat yang sama saya sukai

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

& sup1, & sup2 dll. mungkin melakukan trik. ini adalah trik HTML untuk superscript

Jawaban dari sini , berfungsi di phantomjs dan dalam HTML yang disematkan dengan email:

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