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

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:

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

Utwórz element zawierający tylko & nbsp;
Niech sam się dostosuje
Umieść swój element DIV wewnątrz i
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

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

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

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

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

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

Tak, żadnych problemów z czcionkami o stałej szerokości.

— Willege

IE11 obsługuje to źle. stackoverflow.com/questions/17825638/…

— aleha

Określ szerokość w * znakach *

ch jednostka

Przykład

`ch` jednostka