Укажите ширину в * символах *

109

При использовании шрифта фиксированной ширины я хотел бы указать ширину элемента HTML в символах .

Единица "em" должна быть шириной символа M, поэтому я смогу использовать ее, чтобы указать ширину. Это пример:

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

Результат не тот, что я хотел, поскольку строка браузера прерывается после столбца 15, а не 10:

1 3 5 7 9 1 3 5
7 9 1

(Результат в Firefox и Chromium, в Ubuntu.)

В статье Википедии говорится, что «em» не всегда равна ширине M, поэтому определенно похоже, что единице «em» нельзя доверять.

css font-size Мартин Вилканс
источник
Я считаю, что "en" также является допустимой шириной; это ширина цифры в типографике. Это может сработать для вас лучше.
Pete Wilson
6
Свойство em использует размер шрифта или высоту шрифта, а не ширину букв. @Pete: Это не так, см. CSS Values ​​and Units Module Level 3 .
animuson
Если вы не используете шрифт фиксированной ширины, разные символы имеют разную ширину. Поэтому функционально невозможно установить ширину с точки зрения количества отображаемых символов.
Emily
возможный дубликат Как установить ширину <div>, чтобы она соответствовала постоянному количеству букв моноширинного шрифта?
Мартин Вилканс
«Этот вопрос все еще требует 4 голосов от других пользователей, чтобы закрыть» - Эй, это мой вопрос! Позвольте мне закрыть это!
Мартин Вилканс

Ответы:

23

1em - это высота буквы М, а не ширина. То же самое верно и для ex, который является высотой x. Вообще говоря, это высота прописных и строчных букв.

Другое дело - ширина ....

Измените приведенный выше пример на 

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

и вы заметите, что ширина и высота пролета разные. Для размера шрифта 20 пикселей в Chrome диапазон составляет 12x22 пикселей, где 20 пикселей - это высота шрифта, а 2 пикселя - высота строки.

Теперь, поскольку em и ex здесь бесполезны, возможной стратегией для решения только для CSS было бы

  1. Создайте элемент, содержащий только & nbsp;
  2. Пусть он автоматически изменится
  3. Поместите свой div внутрь и
  4. Сделайте его в 10 раз больше окружающего элемента.

Однако мне не удалось это закодировать. Я тоже сомневаюсь, что это действительно возможно.

Однако такая же логика может быть реализована в Javascript. Я использую здесь повсеместный 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 * 10 + 1) предназначен для решения проблем округления.

Герд Рисельманн
источник
1
Я надеялся на решение на чистом CSS, которое возможно только в том случае, если вы знаете соотношение между высотой и шириной символа (см. Stackoverflow.com/questions/1255281/… ). Я принимаю это как ответ, поскольку это кажется надежным решением.
Мартин Вилканс
1em не является высотой M согласно ответам здесь graphicdesign.stackexchange.com/questions/4035/… "|" символ должен быть ближе к 1em.
Sogartar
1
Согартар, для пояснения: в собственно типографике 1 em - это действительно ширина (а также высота em) символа фиксированной ширины. Тем не менее, это «собственно типографика», и у нас есть много однодневок, создающих файлы шрифтов, которые не придерживаются типографских правил - особенно это верно в случае веб-шрифтов. Суть моего комментария здесь не в (просто) скряге, только на публике. Моя точка зрения: тест, тест, тест. (А затем проверьте еще.)
Parapluie
221

ch Ед. изм

Устройство, которое вы ищете, есть ch. Согласно документам MDN :

ch: Представляет ширину или, точнее, предварительную меру глифа «0» (ноль, символ Юникода U + 0030) в элементе font.

Он поддерживается в текущих версиях основных браузеров ( caniuse ).

пример

pre {
    width: 80ch; /* classic terminal width for code sections */
}
транзистор09
источник
3
Также есть пространство между цифрами, которое точно «равно ширине одной цифры», как описано в статье Википедии о пробелах (пунктуация) . Его значение Unicode - U + 2007, и его можно ввести в HTML с помощью &#x2007;или &#8199;. Он функционально эквивалентен chмодулю CSS, но, хотя он широко не поддерживается, его можно использовать как обходной путь в HTML (уродливый взлом, но должен работать).
waldyrious
2
На самом деле, в соответствии с этой проблемой хрома , Chrome поддерживает его с версии v27, поэтому прямо сейчас последние версии всех основных браузеров (IE, Chrome и Firefox) поддерживают модуль ch :)
waldyrious
2
Следует отметить, что размер символа - это размер символа «0» в шрифте элемента. Если вы ожидаете более крупных символов, таких как 'm' или 'w', вы можете рассмотреть возможность соответствующего расширения или расширения по мере необходимости (например, stackoverflow.com/questions/7168727/… )
user420667
1
Ага, с моноширинными шрифтами проблем нет.
Willege
2
IE11 поддерживает это неправильно. stackoverflow.com/questions/17825638/…
aleha