Tentukan lebar dalam * karakter *

108

Saat menggunakan font dengan lebar tetap , saya ingin menentukan lebar elemen HTML dalam karakter .

Unit "em" seharusnya adalah lebar karakter M, jadi saya harus bisa menggunakannya untuk menentukan lebar. Ini contohnya:

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

Hasilnya bukan yang saya inginkan karena baris browser jeda setelah kolom 15, bukan 10:

1 3 5 7 9 1 3 5
7 9 1

(Menghasilkan Firefox dan Chromium, keduanya di Ubuntu.)

Artikel Wikipedia mengatakan bahwa "em" tidak selalu memiliki lebar M, jadi pasti terlihat seperti unit "em" tidak dapat dipercaya untuk ini.

css font-size Martin Vilcans
sumber
Saya percaya bahwa "en" juga merupakan lebar legal; itu adalah lebar digit dalam tipografi. Itu mungkin bekerja lebih baik untuk Anda.
Pete Wilson
6
Properti 'em' menggunakan ukuran font, atau tinggi , font, bukan lebar huruf. @ Pete: Bukan, lihat Modul Nilai dan Unit CSS Tingkat 3 .
animuson
Kecuali Anda menggunakan font dengan lebar tetap, karakter yang berbeda memiliki lebar yang berbeda. Oleh karena itu, secara fungsional tidak mungkin untuk mengatur lebar dalam hal jumlah karakter yang ditampilkan.
Emily
kemungkinan duplikat Bagaimana mengatur lebar <div> agar sesuai dengan jumlah konstan huruf dalam font monospace?
Martin Vilcans
"Pertanyaan ini masih membutuhkan 4 suara dari pengguna lain untuk menutup" - Hei, ini pertanyaan saya! Biarkan saya menutupnya!
Martin Vilcans

Jawaban:

23

1em adalah tinggi sebuah M, bukan lebarnya. Hal yang sama berlaku untuk ex, yaitu tinggi dari sebuah x. Secara umum, ini adalah tinggi dari huruf besar dan huruf kecil.

Lebar adalah masalah yang sama sekali berbeda ....

Ubah contoh Anda di atas menjadi 

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

dan Anda akan melihat lebar dan tinggi bentang yang berbeda. Untuk ukuran font 20px di Chrome, bentangnya adalah 12x22 px, di mana 20px adalah tinggi font, dan 2px untuk tinggi baris.

Sekarang karena em dan ex tidak berguna di sini, strategi yang mungkin untuk solusi khusus CSS adalah dengan

  1. Buat elemen yang hanya berisi & nbsp;
  2. Biarkan pengatur ukuran otomatis
  3. Tempatkan div Anda di dalam dan
  4. Buatlah 10 kali lebih besar dari elemen sekitarnya.

Namun saya tidak berhasil membuat kode ini. Saya juga ragu apakah itu benar-benar mungkin.

Namun logika yang sama dapat diimplementasikan dalam Javascript. Saya menggunakan jQuery di mana-mana di sini:

<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) digunakan untuk menangani masalah pembulatan.

Gerd Riesselmann
sumber
1
Saya berharap untuk solusi CSS murni, yang hanya mungkin jika Anda mengetahui rasio antara tinggi dan lebar karakter (lihat stackoverflow.com/questions/1255281/… ). Saya menerima ini sebagai jawaban karena tampaknya merupakan solusi yang kuat.
Martin Vilcans
1em bukanlah tinggi dari sebuah M menurut jawaban di sini graphicdesign.stackexchange.com/questions/4035/… The "|" karakter harus lebih dekat dengan 1em.
Sogartar
1
Sogartar, untuk klarifikasi: dalam tipografi, 1 em yang tepat memang merupakan lebar (serta tinggi em) dari karakter lebar tetap. Namun, itu adalah "tipografi yang tepat" dan kami memiliki banyak orang yang sibuk bekerja di luar sana membuat file font yang tidak mematuhi aturan tipografi - terutama dalam kasus font web. Inti dari komentar saya di sini bukanlah (hanya) sikap sombong. Maksud saya adalah: test, test, test. (Dan kemudian uji lagi.)
Parapluie
219

ch satuan

Unit yang Anda cari adalah ch. Menurut dokumen MDN :

ch: Merepresentasikan lebar, atau lebih tepatnya ukuran gerak maju, mesin terbang "0" (nol, karakter Unicode U + 0030) di elemen font.

Ini didukung dalam versi terbaru dari browser utama ( caniuse ).

Contoh

pre {
    width: 80ch; /* classic terminal width for code sections */
}
transistor09
sumber
3
Ada juga spasi angka , yang persis "sama dengan lebar satu digit" seperti yang dijelaskan di artikel spasi (tanda baca) Wikipedia . Nilai Unicode-nya adalah U + 2007 dan dapat dimasukkan dalam HTML menggunakan &#x2007;atau &#8199;. Ini secara fungsional setara dengan chunit CSS, tetapi meskipun itu tidak didukung secara luas, ini dapat digunakan sebagai solusi dalam HTML (peretasan jelek, tetapi seharusnya berfungsi).
waldyrious
2
Sebenarnya, menurut masalah kromium ini , Chrome mendukungnya sejak v27, jadi saat ini versi terbaru dari semua browser utama (IE, Chrome dan Firefox) mendukung unit ch :)
waldyrious
2
Satu harus diperhatikan ukuran karakter adalah ukuran mesin terbang '0' di font elemen. Jika Anda berharap karakter yang lebih besar seperti 'm' atau 'w' Anda mungkin ingin mempertimbangkan memperluas sesuai atau memiliki itu memperluas sesuai kebutuhan (misalnya stackoverflow.com/questions/7168727/... )
user420667
1
Ya, tidak ada masalah dengan font monospace.
Willege
2
IE11 salah mendukungnya. stackoverflow.com/questions/17825638/…
aleha