Satır yüksekliğini etkileyen HTML <sup /> etiketi, nasıl tutarlı hale getirilir?

Bir varsa <sup>bir çok satırlı etiketi <p>hangi satır-yükseklik etiketi, diğer hatlar daha üstünde aralığı daha geniş bir hattı vardır üzerinde üst simge ile çizgi Irregardless ben koymak <p>.

Açıklık getirmek için düzenleyin : <p>Her biri tek bir satırda olan çok sayıda URL'ye sahip olduğumu söylemiyorum . <p>Birden fazla satıra sarılmaya neden olacak kadar içeriğe sahip bir single'ım var . Metinde bir yerde (herhangi bir yerde) bir <sup>veya olabilir <sub>. Bu, üstüne / altına fazladan boşluk ekleyerek o satırın satır yüksekliğini etkiler. Daha büyük bir satır yüksekliği ayarlarsam, <p>bu sorun için bir fark yaratmaz. Satır yüksekliği artırılır, ancak fazladan boşluk kalır.

Nasıl tutarlı hale getirebilirim - yani, a içersin ya da içermesin tüm satırlar aynı boşluğa sahiptir <sup>?

Çözümleriniz tarayıcılar arası olmalıdır (IE 6+, FF, safari, opera, chrome)

line-height düzeltiyor, ancak oldukça büyük yapmanız gerekebilir: benim ayarlarımda satır yüksekliğini <sup>artık engellemeden önce yaklaşık 1.8'e yükseltmem gerekiyor, ancak bu yazı tipinden yazı tipine değişecektir.

Tutarlı çizgi yükseklikleri elde etmenin olası bir yolu, varsayılan yerine kendi üst simge stilinizi belirlemektir vertical-align: super. Kullanırsanız top, satır kutusuna hiçbir şey eklemez, ancak sığdırmak için yazı tipi boyutunu daha da küçültmeniz gerekebilir:

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

Deneyebileceğiniz başka bir hack, satır kutusunu etkilemeden biraz yukarı taşımak için konumlandırmayı kullanmaktır:

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

Elbette bu, yeterli satır yüksekliğiniz yoksa yukarıdaki satıra çarpma riskini taşır.

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

İşin püf noktası, <sup>satır yüksekliğini 0 olarak ayarlamaktır. @Scott normal kullanmayı söyledi, ancak bu her zaman işe yaramıyor.

Bu , üst simge metne uyması için çevreleyen metnin satır yüksekliğini değiştirmeniz gerekmediği anlamına gelir . Bunu IE7 + ve diğer büyük tarayıcılarda test ettim.

Aynı sorunu yaşadım ve verilen cevapların hiçbiri işe yaramadı. Ama benim için işe yarayan bir düzeltmeye sahip bir git commit buldum :

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

kolay olsun:

sup { vertical-align: text-top; }

[ yazı tipi boyutu bireysel yazı yüzünüze bağlıdır]

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

lengthDikey hizalamada kullanmayı tercih ederim . Bu, öğenin taban çizgisini, üst öğesinin taban çizgisinin üzerinde verilen uzunlukta hizalar.

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

<sup>Etiketin iki satır arasındaki aralığı etkilemesinin nedeni, birkaç faktörle ilgilidir. Faktörler şunlardır: satır yüksekliği, normal yazı tipine göre üst simgenin boyutu, üst simgenin satır yüksekliği ve son olarak üst simgenin altının ne olduğu ... Eğer ayarlarsanız ... satır yüksekliği % 135'lik bir "tünel bandında" (buna ben öyle diyorum) normal metnin% 135'i daha sonra normal metin (% 100) beyaza% 35 daha fazla beyaz doldurulur. Bir paragraf için bu şuna benzer:

 p
    {
            line-height: 135%;
    }

Daha sonra üst yazıyı beyaz pad yapmazsanız ... (yani satır yüksekliğini 0'da tutmazsanız) üst simge yalnızca kendi metninin genişliğine sahip olur ... eğer üst simgeden normal yazı tipinin bir yüzdesi olmasını isterseniz (için örnek% 70) ve bunu normal metnin ortasına (metin-orta) hizalarsanız, sorunu ortadan kaldırabilir ve üst simge gibi görünen bir üst simge elde edebilirsiniz. İşte burada:

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

Bu jsfiddle'da örneklendiği gibi, burada önerilen çözümü tercih ediyorum :

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

Bu çözümün güzelliği, üst simge ve alt simgenin dikey konumlandırmasını, üstteki veya alttaki satırla herhangi bir çatışmayı önlemek için uyarlayabilmenizdir ... yukarıda, yalnızca 0.2emgereksinimlerinize uyacak şekilde artırın veya azaltın .

Tüm satırları daha uzun yapmak , üst simge ile aynı görünmek line-heightiçin tüm paragraf için daha büyük bir tanım tanımlayın

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

veya arzu ettiğiniz etkiyi veren değer ne olursa olsun.

Garip görünebilir, ancak gereksinimlerinizi böyle tanımladınız.

DÜZENLEME: Yalnızca birinin diğerlerinden daha fazla dikey alana ihtiyacı olduğunda tüm satırların aynı görünmesini sağlamak için , paragraftaki TÜM satırların daha uzun olması gerekir.

Bu, dediğim gibi, çekici bir çözüm olmayabilir. Belki sadece alt / üst simge olan metni daha küçük hale getiren bir aralıkla bir şeyler yapılabilir, bunun dışında istediğiniz şeyin başarılabileceğine inanmıyorum. Ama başka birinin çözümünü görmek isterim.

EDIT2: Bu arada, içeren küçük bir html dosyası denedim

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

Ve FF3.0.14 ve Konqueror'da satırların hepsi aynı yükseklikte (diğer tarayıcılar adına konuşamıyorum)

Safari, Chrome ve Firefox'ta benim için iyi çalışan üst simge için normal: line-height: normal kullanıyorum, ancak IE konusunda emin değilim.

Bunu özellikle haber bülteninde kullanın -

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

Milingu Kilu'nun çözümünü seviyorum ama aynı ruhla tercih ediyorum

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

& sup1, & sup2 vb. işe yarayabilir. üst simge için bir HTML numarasıdır

Yanıt Burada , her iki phantomjs ve e-posta gömülü HTML çalışır:

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