yomoyo icon indicating copy to clipboard operation
yomoyo copied to clipboard

[intensive] [HTML1] [HTML2] Исправить высоты строк контролов форм всех макетов

Open firefoxic opened this issue 2 years ago • 0 comments

Проблема Во многих местах в макетах курсов по вёрстке есть текстовые поля, селекты (если это селекты), и прочие контролы форм, содержащие текст, у которых задана слишком низкая высота строки для выбранного размера шрифта. Дело в том, что в Firefox видимо есть «защита от дурака», которая не даёт сделать высоту строки в таких элементах меньше 4/3. Точно не знаю как это реализовано, но эмпирическим путём постоянно в 1.(3) упираюсь. И всё бы ничего, если бы не критерий про точное соответствие текстовых стилей макету.

Студент сделал в Седоне 1 курса поле подписки в точности по данным из макета:

input {
	font-size: 18px;
	line-hight: 21px;
}

И паддинги точно из макета подошли, чтобы в Chrome всё с макетом совпало. Но в Firefox высота строки при 18ом размере не опускается ниже 24px. Это увеличивает на 3px высоту поля по сравнению с рядом стоящей кнопкой. И это никак не решается. Если уменьшить паддинги, то в хроме будет высота поля меньше нужного. Чтобы сохранить высоту надо высоту строки увеличить, что нарушит критерий соответствия текстовых стилей. Пришлось на защите не обращать внимания на разъехавшуюся в Firefox форму подписки, но реальный заказчик такое точно не пропустил бы.

Дополнительная информация Да есть решение включить в этой форме грид, убрать у поля паддинги, и пусть поле тянется на всю высоту кнопки, а текст центрируется. Но это костыль, потому что кнопка/лэйбл не всегда есть сбоку от поля, и паддинги не всегда равные, чтобы центрирование при этом ставило текст в нужном месте. А если и есть сбоку кнопка, то всё равно не здорово опираться более важному элементу на метрики менее важного.

Возможное решение Пройтись по всем макетам и во всех объектах, которые хотя бы теоретически могут быть размечены контролом формы (даже в очень спорных «селектах»), и просто исправить высоту строки на значение не меньше чем 4/3 от размера шрифта. А чтобы уж наверняка, лучше вообще проставить везде 150% (фигма не даёт безразмерную величину поставить, но в CSS это будет именно безразмерное 1.5).

firefoxic avatar Jul 16 '22 06:07 firefoxic