Почему для моноширинного шрифта установлено значение 80em, занимающее менее 80 столбцов текста? - PullRequest
Новая
       58

Почему для моноширинного шрифта установлено значение 80em, занимающее менее 80 столбцов текста?

1 голос
/ 13 марта 2019

Я пытаюсь сделать текст на веб-странице похожим на страницу из Gopherspace. Другими словами, моноширинный шрифт с максимум 80 столбцами. Я подумал, что если шрифт моноширинный, и я установил ширину содержащего элемента на 80em, это ограничило бы его идеальными 80 столбцами, поскольку каждый символ должен быть одинаковой ширины в моноширинном шрифте.

Цвета, которые я добавил, просто для того, чтобы было легче определить, где происходят разрывы строк.

В случае, если это работает на некоторых браузерах / компьютерах, а не на других, вот что я вижу на своем компьютере с Firefox 65.0.1 в Mac OS 10.14.3.

longer than 80 columns

Почему этот div почти в два раза больше 80 столбцов текста и как я могу это исправить? 

.plaintext {
  background-color: black;
  font-family: monospace;
  width: 80em;
  font-size: 10px;
  border: 2px solid red;
  overflow-wrap: break-word;
}

.r { color: red; }
.o { color: orange; }
.y { color: yellow; }
.g { color: green; }
.b { color: blue; }
.i { color: indigo; }
.v { color: violet; }
<div class="plaintext">
  <span class="r">0123456789</span><span class="o">0123456789</span><span class="y">0123456789</span><span class="g">0123456789</span><span class="b">0123456789</span><span class="i">0123456789</span><span class="v">0123456789</span><span class="r">0123456789</span>
</div>

1 Ответ

1 голос
/ 14 марта 2019

Размер шрифта элемента (измеряется в em) - это высота шрифта, а не ширина.
(Изначально слово «em» относится к ширине буквы M, но не ко многим шрифтам.иметь M точно такой же ширины, как 1em.)

Решение состоит в том, чтобы использовать ch в качестве единицы измерения ширины.В моноширинных шрифтах 1ch - это ширина символа.В шрифтах переменной ширины 1ch - это ширина символа 0 (ноль).
См. Официальное определение на W3C или более читаемую Версия MDN . 

.plaintext {
  background-color: black;
  font-family: monospace;
  width: 80ch;      /* changed */
  font-size: 10px;
  border: 2px solid red;
  overflow-wrap: break-word;
}

.r { color: red; }
.o { color: orange; }
.y { color: yellow; }
.g { color: green; }
.b { color: blue; }
.i { color: indigo; }
.v { color: violet; }
<div class="plaintext">
  <span class="r">0123456789</span><span class="o">0123456789</span><span class="y">0123456789</span><span class="g">0123456789</span><span class="b">0123456789</span><span class="i">0123456789</span><span class="v">0123456789</span><span class="r">0123456789</span>
</div>
...