Genişliği * karakter * cinsinden belirtin

108

Sabit genişlikli bir yazı tipi kullanırken , bir HTML öğesinin genişliğini karakter cinsinden belirtmek istiyorum .

"Em" biriminin M karakterinin genişliği olması gerekiyor, bu yüzden bir genişlik belirtmek için bunu kullanabilmeliyim. Bu bir örnektir:

<html>
  <head>
    <style>
      div {
        font-family: Courier;
        width: 10em;
      }
    </style>
  </head>
  <body>
    <div>
      1 3 5 7 9 1 3 5 7 9 1
    </div>
  </body>
</html>

Tarayıcı satırı 10. sütundan sonra kesildiği için sonuç istediğim şey değildi:

1 3 5 7 9 1 3 5
7 9 1

(Her ikisi de Ubuntu'da Firefox ve Chromium'da sonuç.)

Wikipedia'nın makalesi bir "em" nin her zaman bir M'nin genişliği olmadığını söylüyor, bu yüzden kesinlikle "em" birimine bunun için güvenilemeyecek gibi görünüyor.

css font-size

— Martin Vilcans
kaynak

"En" in de yasal bir genişlik olduğuna inanıyorum; tipografide bir rakamın genişliğidir. Bu senin için daha iyi olabilir .

— Pete Wilson

'Em' özelliği , harflerin genişliğini değil yazı tipinin yazı tipi boyutunu veya yüksekliğini kullanır . @Pete: Değil, bkz. CSS Değerleri ve Birimleri Modül Seviye 3 .

— animuson

Sabit genişlikli bir yazı tipi kullanmadığınız sürece, farklı karakterlerin farklı genişlikleri vardır. Bu nedenle, gösterilen karakter sayısı açısından bir genişlik ayarlamak işlevsel olarak imkansızdır.

— Emily

olası yinelenen <div> set genişliğine tek aralıklı yazı harflerin sabit sayıda sığacak şekilde nasıl?

— Martin Vilcans

"Bu sorunun kapanması için hala diğer kullanıcıların 4 oyu gerekiyor" - Hey, bu benim sorum! Kapatalım!

— Martin Vilcans

Yanıtlar:

1em, genişlikten ziyade bir M'nin yüksekliğidir. Aynı şey x'in yüksekliği olan ex için de geçerlidir. Daha genel olarak konuşursak, bunlar büyük ve küçük harflerin yükseklikleridir.

Genişlik tamamen farklı bir konudur ....

Yukarıdaki örneğinizi şu şekilde değiştirin:

<div>
    <span>1</span> 3 5 7 9 1 3 5 7 9 1
</div>

ve açıklığın genişliğinin ve yüksekliğinin farklı olduğunu fark edeceksiniz. Chrome'da 20 piksel yazı tipi boyutu için aralık 12x22 pikseldir; burada 20 piksel yazı tipinin yüksekliğidir ve 2 piksel satır yüksekliği içindir.

Artık em ve ex'in burada hiçbir faydası olmadığından, yalnızca CSS'ye yönelik bir çözüm için olası bir strateji,

Yalnızca & nbsp; içeren bir öğe oluşturun
Kendini otomatikleştirmesine izin ver
Div'inizi içine yerleştirin ve
Çevreleyen elemandan 10 kat daha büyük yapın.

Ancak bunu kodlamayı başaramadım. Bunun gerçekten mümkün olduğundan da şüpheliyim.

Bununla birlikte aynı mantık Javascript'te uygulanabilir. Burada her yerde bulunan jQuery kullanıyorum:

<html>
  <head>
    <style>
      body { font-size: 20px; font-family: Monospace; }
    </style>
    <script 
      type="text/javascript" 
      src ="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
    </script>
  </head>
  <body>
    <div>1 3 5 7 9 1 3 5 7 9 1</div>
    <script>
      $('body').append('<div id="testwidth"><span>&nbsp;</span></div>');
      var w = $('#testwidth span').width();
      $('#testwidth').remove();
      $('div').css('width', (w * 10 + 1) + 'px');       
    </script>
  </body>
</html>

+1 in (w * 10 + 1) yuvarlama problemlerini ele almak içindir.

— Gerd Riesselmann
kaynak

Sadece bir karakterin yüksekliği ve genişliği arasındaki oranı biliyorsanız mümkün olan saf bir CSS çözümü umuyordum (bkz. Stackoverflow.com/questions/1255281/… ). Sağlam bir çözüm gibi göründüğü için bunu cevap olarak kabul ediyorum.

— Martin Vilcans

1em, buradaki cevaplara göre bir M'nin yüksekliği değildir. Graphicdesign.stackexchange.com/questions/4035/… "|" karakter 1em'e yakın olmalıdır.

— Sogartar

Sogartar, açıklama için: tipografide uygun 1 em aslında sabit genişlikli bir karakterin genişliğidir (aynı zamanda em yüksekliğidir). Bununla birlikte, bu "tipografi uygun" ve dışarıda birçok kişi, tipografik kurallara uymayan yazı tipi dosyaları yaratıyor - özellikle web yazı tipleri söz konusu olduğunda. Buradaki yorumumun amacı, (sadece) tam anlamıyla ihtişam değil. Demek istediğim: test, test, test. (Ve sonra biraz daha test edin.)

— Parapluie

219

`ch` birim

Aradığınız birim ch. Göre MDN docs :

ch: Öğenin içindeki "0" glifinin (sıfır, Unicode karakteri U + 0030) genişliğini veya daha kesin olarak ilerleme ölçüsünü temsil eder font.

Başlıca tarayıcıların ( caniuse ) mevcut sürümlerinde desteklenmektedir .

Misal

pre {
    width: 80ch; /* classic terminal width for code sections */
}

— transistör09
kaynak

Ayrıca Wikipedia'nın uzay (noktalama) makalesinde açıklandığı gibi "bir rakamın genişliğine tam olarak eşit" olan şekil alanı da var . Unicode değeri U + 2007'dir ve HTML'ye veya kullanılarak girilebilir . İşlevsel olarak CSS birimine eşdeğerdir , ancak bu geniş çapta desteklenmese de, HTML'de bir geçici çözüm olarak kullanılabilir (çirkin hack, ancak çalışmalıdır).   ch

— waldyrious

Aslında, bu krom sorununa göre , Chrome bunu v27'den beri destekliyor, bu nedenle şu anda tüm büyük tarayıcıların (IE, Chrome ve Firefox) en son sürümleri ch ünitesini destekliyor :)

— waldyrious

Karakter boyutunun, elemanın fontundaki '0' glifinin boyutu olduğuna dikkat edilmelidir. 'M' veya 'w' gibi daha büyük karakterler bekliyorsanız, buna göre genişletmeyi veya gerektiğinde genişletmeyi düşünebilirsiniz (örneğin, stackoverflow.com/questions/7168727/… )

— user420667

Evet, tek aralıklı yazı tipleriyle sorun yok.

— Willege

IE11 bunu yanlış destekliyor. stackoverflow.com/questions/17825638/…

— aleha

Genişliği * karakter * cinsinden belirtin

ch birim

Misal

`ch` birim