Üst simge yalnızca CSS'de mi?

Üst simge yalnızca CSS'de nasıl yapılır?

Dış bağlantıları üst simge karakteriyle işaretlediğim bir stil sayfası var, ancak karakteri doğru bir şekilde hizalamakta zorlanıyorum.

Şu anda ne var, şöyle görünüyor:

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

ama işe yaramıyor.

Doğal olarak, <sup>-tag'i kullanırdım , sadece contentHTML'ye izin verirse ...

Üst simge ile vertical-align: super(artı buna eşlik eden bir font-sizeazalma) yapabilirsiniz.

Ancak, emin olun diğer cevaplar okumak , burada tarafından özellikle paulmurray ve cletus yararlı bilgiler için.

Dürüst olmak gerekirse, sadece CSS'de üst simge / alt simge yapma noktasını görmüyorum. Bunun için kullanışlı bir CSS özelliği yok, sadece bir dizi ev yapımı uygulama var:

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

veya dikey hizalama kullanarak veya başka yollardan eminim. Şey, karmaşıklaşmaya başlıyor:

• CSS üst simge aralığıSatır yüksekliğinde ;
• Üst simge / Subcript için CSS dikkat üzerinde neden tartışmalı stil olmamalı üstindis / alt simge CSS ile hiç ;

İkinci nokta vurgulamaya değer. Üst simge / alt simge genellikle bir stil sorunu değildir, ancak anlamın bir göstergesidir.

Yan not: Yaygın matematiksel üst simge ve alt simge ifadeleri için bu varlık listesinden bahsetmeye değer Bu soru bununla ilgili olmasa da .

Alt / sup etiketleri HTML ve XHTML biçimindedir. Bunları kullanırdım.

CSS'nizin geri kalanına gelince: after pseudo-element ve content özellikleri geniş çapta desteklenmez. Gerçekten bu el ile HTML koymak istemiyorsanız, bir sonraki en iyi bahis Javascript tabanlı bir çözüm olduğunu düşünüyorum. JQuery ile bu kadar basit:

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

CSS belgeleri, tüm HTML yapıları için endüstri standardı CSS eşdeğerini içerir. Şudur: Çoğu web tarayıcıları bu gün açıkça dokunmayın SUB, SUP, B, Ivb - onlar (tür sorta) dönüştürülür SPANilgili CSS özelliklere sahip öğelerde ve oluşturma motorunun sadece o ilgilenir.

Sayfa Ek D'dir. HTML 4 için varsayılan stil sayfası

İstediğiniz bitler:

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

Aşağıdaki gözlemlerle satırın üst ve alt kenar boşluklarını DEĞİŞTİRMEYEN üst simge öğeleriyle net bir şekilde okunabilir bir metin elde etmek amacıyla bir sayfada çalışıyordum:

Örneğin ana metniniz line-height: 1.5emiçin üst simge metninizin satır yüksekliğini doğru görünmesi için azaltmalısınız. Ben kullandım line-height: 0.5em.

Ayrıca, vertical-align: superçoğu tarayıcıda iyi çalışır , ancak üst simge öğeniz olduğunda IE8'de, bu satırın geri kalanı aşağı itilir. Bunun yerine vertical-align: baselinebir negatif topveposition: relative aynı etkiyi elde etmek için kullandım, bu da tarayıcılarda daha iyi çalışıyor gibi görünüyor.

Bu nedenle, "evde uygulanan uygulamalara" eklemek için:

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

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

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

Anlayabildiğim kadarıyla pratikte iyi çalışıyor.

Mozilla Firefox'un dahili html.css dosyasından aşağıdakiler alınmıştır:

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

Yani, sizin durumunuzda şöyle bir şey olurdu:

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

Bu başka bir temiz çözüm:

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

Bu şekilde yine de sup / sub etiketlerini kullanabilirsiniz, ancak paragraf satır yüksekliğini her zaman bertaraf etmek için iddialı davranışlarını düzelttiniz .

Şimdi şunları yapabilirsiniz:

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

Ve paragraf satır yüksekliğinizin vidalanmaması gerekir.

IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9 üzerinde test edildi

Bir test kullanarak p {line-height: 1.3;} (satırları çok yakın yapışmasını istemiyorsanız iyi bir satır yüksekliği) ve hala çalışıyor, neden "-0.6em" o satır yüksekliği ile de alt / alt metin sığacak küçük bir miktar ve birbirinizin üzerinden geçmeyin.

Alakalı olabilecek bir detayı unuttum Her zaman sayfamın 1. satırında DOCTYPE kullanıyorum (özellikle HTML 4.01 kullanıyorum <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). DOCTYPE eksikliği veya Standart / Neredeyse Standart modunu tetiklemeyen bir DOCTYPE nedeniyle tarayıcı quirkmode (veya standart modda değil) olduğunda bu çözümün iyi çalışıp çalışmadığını bilmiyorum.

Yazı tipi boyutunu değiştiriyorsanız, küçültme boyutlarını bu kuralla durdurmak isteyebilirsiniz:

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

Bunun ilgili olup olmadığından emin değilim ama ²bir <label>etikete başka html etiketleri ekleyemediğim için HTML objeleriyle olan sorunumu çözdüm. Fikir css veya HTML etiketleri yerine ASCII kodları kullanmaktı.

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

"dikey hizalama: metin üstü" istediğiniz gibi görünüyorsa

CSS mülkiyeti font-variant-positiondikkate alınmaktadır ve sonunda bu sorunun cevabı olabilir. 2017'nin başından itibaren, sadece Firefox bunu destekliyor.

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

Bkz. MDN .

İlişkili olabilir veya ilişkili olmayabilir, üstbilgiyi HTML öğesi veya span + css olarak kullanmak, yerelleştirme programlarında yerelleştirme ile ilgili sorunlara neden olabilir.

Örneğin " ^3. taraf yazılım" diyelim :

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

Çevirmenler "rd" kelimesini nasıl çevirebilir? Birkaç cyrilril dili için boş bırakabilirler, ama diğer egzotik veya RTL dilleri ne olacak?

Bu durumda üst simge kullanmaktan kaçınmak ve "üçüncü taraf yazılım" gibi tam bir ifade kullanmak daha iyidir. Veya, burada diğer yorumlarda belirtildiği gibi, jQuery aracılığıyla üst simge artı işaretleri ekleme.

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

Sup'in tam olarak kullandığı yol:

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

Bunu google chrome inspect elementiyle buldu.