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

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

Свойство em использует размер шрифта или высоту шрифта, а не ширину букв. @Pete: Это не так, см. CSS Values and Units Module Level 3 .

— animuson

Если вы не используете шрифт фиксированной ширины, разные символы имеют разную ширину. Поэтому функционально невозможно установить ширину с точки зрения количества отображаемых символов.

— Emily

возможный дубликат Как установить ширину <div>, чтобы она соответствовала постоянному количеству букв моноширинного шрифта?

— Мартин Вилканс

«Этот вопрос все еще требует 4 голосов от других пользователей, чтобы закрыть» - Эй, это мой вопрос! Позвольте мне закрыть это!

— Мартин Вилканс

Ответы:

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 было бы

Создайте элемент, содержащий только & nbsp;
Пусть он автоматически изменится
Поместите свой div внутрь и
Сделайте его в 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) предназначен для решения проблем округления.

— Герд Рисельманн
источник

Я надеялся на решение на чистом CSS, которое возможно только в том случае, если вы знаете соотношение между высотой и шириной символа (см. Stackoverflow.com/questions/1255281/… ). Я принимаю это как ответ, поскольку это кажется надежным решением.

— Мартин Вилканс

1em не является высотой M согласно ответам здесь graphicdesign.stackexchange.com/questions/4035/… "|" символ должен быть ближе к 1em.

— Sogartar

Согартар, для пояснения: в собственно типографике 1 em - это действительно ширина (а также высота em) символа фиксированной ширины. Тем не менее, это «собственно типографика», и у нас есть много однодневок, создающих файлы шрифтов, которые не придерживаются типографских правил - особенно это верно в случае веб-шрифтов. Суть моего комментария здесь не в (просто) скряге, только на публике. Моя точка зрения: тест, тест, тест. (А затем проверьте еще.)

— Parapluie

221

`ch` Ед. изм

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

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

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

пример

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

— транзистор09
источник

Также есть пространство между цифрами, которое точно «равно ширине одной цифры», как описано в статье Википедии о пробелах (пунктуация) . Его значение Unicode - U + 2007, и его можно ввести в HTML с помощью  или  . Он функционально эквивалентен chмодулю CSS, но, хотя он широко не поддерживается, его можно использовать как обходной путь в HTML (уродливый взлом, но должен работать).

— waldyrious

На самом деле, в соответствии с этой проблемой хрома , Chrome поддерживает его с версии v27, поэтому прямо сейчас последние версии всех основных браузеров (IE, Chrome и Firefox) поддерживают модуль ch :)

— waldyrious

Следует отметить, что размер символа - это размер символа «0» в шрифте элемента. Если вы ожидаете более крупных символов, таких как 'm' или 'w', вы можете рассмотреть возможность соответствующего расширения или расширения по мере необходимости (например, stackoverflow.com/questions/7168727/… )

— user420667

Ага, с моноширинными шрифтами проблем нет.

— Willege

IE11 поддерживает это неправильно. stackoverflow.com/questions/17825638/…

— aleha

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

ch Ед. изм

пример

`ch` Ед. изм