Określ szerokość w * znakach *

108

Korzystając z czcionki o stałej szerokości , chciałbym określić szerokość elementu HTML w znakach .

Jednostka "em" ma być szerokością znaku M, więc powinienem móc jej użyć do określenia szerokości. To jest przykład:

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

Wynik nie jest tym, czego chciałem, ponieważ wiersz przeglądarki pęka po kolumnie 15, a nie 10:

1 3 5 7 9 1 3 5
7 9 1

(Wynik w Firefoksie i Chromium, oba w Ubuntu.)

Artykuł Wikipedii mówi, że „em” nie zawsze ma szerokość M, więc zdecydowanie wygląda na to, że jednostce „em” nie można ufać.

css font-size Martin Vilcans
źródło
Uważam, że „en” jest również legalną szerokością; jest to szerokość cyfry w typografii. To może działać lepiej dla Ciebie.
Pete Wilson
6
Właściwość „em” używa rozmiaru lub wysokości czcionki, a nie szerokości liter. @Pete: Nie, zobacz wartości i jednostki CSS poziom 3 .
animuson
O ile nie używasz czcionki o stałej szerokości, różne znaki mają różne szerokości. Dlatego funkcjonalnie niemożliwe jest ustawienie szerokości pod względem liczby wyświetlanych znaków.
Emily
możliwy duplikat Jak ustawić szerokość <div>, aby dopasować stałą liczbę liter w czcionce o stałej szerokości?
Martin Vilcans,
„To pytanie nadal wymaga 4 głosów od innych użytkowników na zamknięcie” - Hej, to moje pytanie! Pozwól mi to zamknąć!
Martin Vilcans,

Odpowiedzi:

23

1em to wysokość litery M, a nie szerokość. To samo dotyczy ex, czyli wysokości x. Mówiąc bardziej ogólnie, są to wysokości wielkich i małych liter.

Szerokość to zupełnie inna kwestia ....

Zmień powyższy przykład na 

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

a zauważysz, że szerokość i wysokość przęsła są różne. W przypadku czcionki o rozmiarze 20 pikseli w przeglądarce Chrome rozpiętość wynosi 12 x 22 piksele, gdzie 20 pikseli to wysokość czcionki, a 2 piksele to wysokość linii.

Ponieważ em i ex nie są tutaj przydatne, możliwą strategią dla rozwiązania opartego tylko na CSS byłoby

  1. Utwórz element zawierający tylko & nbsp;
  2. Niech sam się dostosuje
  3. Umieść swój element DIV wewnątrz i
  4. Spraw, aby był 10 razy większy niż otaczający element.

Jednak nie udało mi się tego zakodować. Wątpię też, żeby to naprawdę było możliwe.

Ta sama logika mogłaby jednak zostać zaimplementowana w Javascript. Używam tutaj wszechobecnego jQuery:

<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 w (w * 10 + 1) służy do rozwiązywania problemów z zaokrąglaniem.

Gerd Riesselmann
źródło
1
Liczyłem na czyste rozwiązanie CSS, które jest możliwe tylko wtedy, gdy znasz stosunek wysokości do szerokości znaku (patrz stackoverflow.com/questions/1255281/ ... ). Przyjmuję to jako odpowiedź, ponieważ wydaje się, że jest to solidne rozwiązanie.
Martin Vilcans,
1em nie jest wysokością M zgodnie z odpowiedziami tutaj graphicdesign.stackexchange.com/questions/4035/ ... znak powinien być bliżej 1em.
Sogartar
1
Sogartar, dla wyjaśnienia: we właściwej typografii 1 em jest rzeczywiście szerokością (jak również wysokością em) znaku o stałej szerokości. Jednak to jest „właściwa typografia” i mamy wielu ludzi, którzy latają nocą, tworząc pliki czcionek, które nie są zgodne z regułami typograficznymi - szczególnie w przypadku czcionek internetowych. Celem mojego komentarza nie jest (tylko) zrzędliwa duma. Chodzi mi o to: test, test, test. (A potem przetestuj jeszcze trochę.)
Parapluie
219

ch jednostka

Jednostka, której szukasz, to ch. Według dokumentów MDN :

ch: Reprezentuje szerokość, a dokładniej miarę zaawansowania, glifu „0” (zero, znak Unicode U + 0030) w elemencie font.

Jest obsługiwany w aktualnych wersjach głównych przeglądarek ( caniuse ).

Przykład

pre {
    width: 80ch; /* classic terminal width for code sections */
}
tranzystor09
źródło
3
Istnieje również przestrzeń cyfrowa, która jest dokładnie „równa szerokości jednej cyfry”, jak opisano w artykule Wikipedii dotyczącym przestrzeni (interpunkcja) . Jego wartość Unicode to U + 2007 i można ją wprowadzić w HTML za pomocą &#x2007;lub &#8199;. Jest funkcjonalnie równoważny z chjednostką CSS, ale chociaż nie jest szeroko obsługiwany, może być używany jako obejście w HTML (brzydki hack, ale powinien działać).
waldyrious
2
Właściwie, zgodnie z tym problemem dotyczącym chromu , Chrome obsługuje go od wersji 27, więc w tej chwili najnowsze wersje wszystkich głównych przeglądarek (IE, Chrome i Firefox) obsługują jednostkę ch :)
waldyrious
2
Należy zwrócić uwagę, że rozmiar znaku to rozmiar glifu „0” w czcionce elementu. Jeśli oczekują większych znaków takich jak „m” lub „W” może warto rozważyć rozszerzenie lub posiadające odpowiednio go rozszerzać w miarę potrzeb (np stackoverflow.com/questions/7168727/... )
user420667
1
Tak, żadnych problemów z czcionkami o stałej szerokości.
Willege
2
IE11 obsługuje to źle. stackoverflow.com/questions/17825638/…
aleha