Вкажіть ширину в * символах *

108

Використовуючи шрифт фіксованої ширини , я хотів би вказати ширину елемента 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" - це також юридична ширина; це ширина цифри в типографії. Це могло б працювати для вас краще.

— Піт Вілсон

Властивість 'em' використовує розмір шрифту або висоту шрифту, а не ширину літер. @ Pete: Це не так, див. Модуль CSS Values and Units 3 рівня .

— animuson

Якщо ви не використовуєте шрифт фіксованої ширини, різні символи мають різну ширину. Тому функціонально неможливо встановити ширину за кількістю показаних символів.

— Емілі

можливий дублікат Як встановити ширину <div>, щоб відповідати постійній кількості букв шрифтом монопростору?

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

"Це питання все ще потребує 4 голосів від інших користувачів, щоб закрити" - Ей, це моє питання! Дозвольте закрити!

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

Відповіді:

1em - це висота M, а не ширина. Те саме справедливо і для ex, яка є висотою x. Взагалі кажучи, це висота великих і малих літер.

Ширина - це зовсім інше питання ....

Змініть приклад вище на

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

і ви помітите, що ширина і висота прольоту різні. Для розміру шрифту 20px у Chrome проміжок становить 12x22 px, де 20px - висота шрифту, а 2px - для висоти рядка.

Оскільки 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 відповідно до відповідей тут graphicsdesign.stackexchange.com/questions/4035/… "|" символ повинен бути ближче до 1em.

— Sogartar

Соґартар, для уточнення: в типографіці власне 1 em - це дійсно ширина (як і висота em) символу фіксованої ширини. Однак це "правильна типографія", і у нас багато людей, які створюють шрифти на ніч, створюючи файли шрифтів, які не дотримуються типографічних правил - особливо це стосується веб-шрифтів. Суть мого коментаря тут не є (просто) кричущим видовищем. Моя суть: тест, тест, тест. (А потім випробуйте ще трохи.)

— Parapluie

217

`ch` одиниця

Ви шукаєте одиницю ch. Згідно з документами MDN :

ch: Представляє ширину, а точніше попередню міру гліфа "0" (нуль, символ Unicode U + 0030) в елементах font.

Він підтримується в поточних версіях основних браузерів ( канеуз ).

Приклад

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' у шрифті елемента. Якщо ви плануєте великі символи , такі як «м» або «ж» , ви можете розглянути питання про розширення відповідно або мати його розширювати по мірі необхідності (наприклад , stackoverflow.com/questions/7168727 / ... )

— user420667

Так, жодних проблем з одноразовими шрифтами немає.

— Вілледж

IE11 підтримує це неправильно. stackoverflow.com/questions/17825638 / ...

— Aleha

Вкажіть ширину в * символах *

ch одиниця

Приклад

`ch` одиниця