Почему поле ввода уменьшает ширину с помощью font-style: italic? - PullRequest
Новая
       57

Почему поле ввода уменьшает ширину с помощью font-style: italic?

1 голос
/ 07 июня 2019

При применении font-style: italic; к тегу HTML input поле становится уже (меньше вычисленной ширины), чем было бы в противном случае.

Минимальный воспроизводимый пример: 

<!DOCTYPE html>
<html lang="en">
<body>
    <input type="text" /><br>
    <input type="text" style = "font-style: italic;" /><br />
</body>
</html>

При сохранении в виде HTML и визуализации в Chrome это выглядит так: Two input boxes, with the bottom one less wide.
Это похоже на другиебраузеры.

Примечание. Эта проблема не отображается, если приведенный выше HTML-код запускается как фрагмент кода в переполнении стека.

Почему это так?
Является ли фактор, из-за которогоуже чем другая константа в браузерах?

1 Ответ

1 голос
/ 08 июня 2019

Это эффект спецификации HTML5.

В разделе рендеринга 14.5.5.Элемент ввода как виджет ввода текста. он говорит:

Если элемент ввода с атрибутом типа [text] не имеет атрибута размера, то ожидается, что пользовательский агент будет действоватькак если бы оно имело правило таблицы стилей на уровне агента пользователя, устанавливающее свойство 'width' для элемента равным значению, полученному в результате применения алгоритма преобразования ширины символа в пиксели к числу 20.

Преобразованиеалгоритм возвращает ширину символа в пиксели (size-1) × avg + max, где size - ширина символа для преобразования, avg - средняя ширина символа основного шрифта для элемента, для которого выполняется алгоритм, в пикселях иmax - максимальная ширина символа того же шрифта, также в пикселях.(Свойство 'letter-spacing' элемента не влияет на результат.)

Это вычисление означает, что ширина поля ввода зависит от шрифта символа.Chrome берет курсив как отдельный шрифт из обычных символов и применяет другое среднее значение и, следовательно, другую общую ширину.

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

В настоящее время Firefox и Edge не используют разные средние значения курсива.

...