CSS - Установка отступов / полей на основе ширины текста?

Question

Есть ли в CSS единица измерения (запланированная или уже существующая) для установки отступов и полей в зависимости от ширины используемого шрифта?

Я знаю, что em - это высота верхнего шрифта M шрифта, который использует браузер, что очень удобно для добавления чистого двойного пробела. Но иногда я хочу, чтобы боковые поля встроенных списков равнялись ширине обычного неразрывного пробела или ширине верхнего регистра A. В некоторых шрифтах использование em может быть ненадежным.

Answer 1

Спецификации W3C для css3 определяют единицу измерения ширины символа шрифта "0":

ч единица

равно используемому предварительному показателю глифа "0" (ZERO, U + 0030), найденному в шрифте, использованном для его визуализации.

См. css3-значения .

Answer 2

Забавно, но кажется, что никого не волнует ширина элементов гарнитуры. Все, что измерено, это высота:

Если это относится к "классической типографии", то у веб-типографии, которая является подклассом первой, еще меньше надежды.

РЕДАКТИРОВАТЬ: На самом деле существует измерение с именем En , которое относится к "ширине строчной буквы" n ". Однако я не видел, чтобы это использовалось в сети.

Answer 3

Боюсь, нет. CSS не предлагает способ ссылаться на свойства шрифтов.

Но вы всегда можете уйти, вставив   в дополнительные первый и последний элементы списка.

Answer 4

Я придумал что-то простое, что помогло мне с проблемой заполнения, основанной на размере шрифта. Я хотел сместить <td> на основе строкового префикса в строке выше. Клифф отмечает версию, я добавляю текст, который представляет желаемое смещение в промежутке и делаю его невидимым и невыбираемым. Мое решение здесь:

.hiddenOffset {
opacity: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}


<table>
  <tr>
    <td>NumElements</td>
  </tr>
  <tr>
    <td><span class="hiddenOffset">Num</span>Offset Text</td>
  </tr>
</table>

Это дает мне идеальное смещение, а префикс скрыт и недоступен для выбора. В моем реальном коде я использую чистый JavaScript, чтобы указать строку префикса, чтобы она не была жестко закодирована, и я использую prefix.repeat(n) для установки вложенных отступов.

function processRepeatingGroupInstance(indent, group) {
    let prefix = 'No';
    let html = '';
    for (let i = 0; i < group.length; i++) {
        let field = group[i];
        if (field.hasOwnProperty('msgvaluedesc'))
            html += `<tr><td><span class="hiddenOffset">${prefix.repeat(indent)}</span>${field.name}</td><td class="num">${field.number}</td><td class="value tooltip">${field.msgvaluedesc}<span class="tooltiptext">${field.msgvalue}</span></td></tr>`;
        else
            html += `<tr><td><span class="hiddenOffset">${prefix.repeat(indent)}</span>${field.name}</td><td class="num">${field.number}</td><td class="value">${field.msgvalue}</td></tr>`;
        if (field.hasOwnProperty('repeating_group')) {
            for (let j = 0; j < field.repeating_group.length; j++)
                html += processRepeatingGroupInstance(indent + 1, field.repeating_group[j]);
        }
    }
    return html;
}