Перейти до вмісту

Замінила 27 фактичних розмірів шрифту, сусідні значення яких різнилися лише на 0,6%, шестиступеневою шкалою Major Third і написала лінтер, який відхиляє двадцять восьмий.

27 розмірів шрифту замінено шестиступеневою шкалою

Ситуація. Вимірювання відображеного тексту сайту виявило двадцять сім різних розмірів шрифту, що використовувалися. Деякі відрізнялися менш ніж на відсоток: п’ять значень між 0,8 і 0,85 від розміру основного тексту діяли одночасно, а такої різниці жоден читач не помітить, зате кожен наступний редактор додасть до неї ще одне значення. Двом заголовкам таблиця стилів узагалі не задавала розміру, і вони отримували стандартні значення самого браузера — співвідношення 1,33, яке не збігалося ні з чим іншим на сторінці.

Завдання. Розміри мали скластися в шкалу із задекларованим співвідношенням, і щось мало не допустити появи двадцять восьмого.

Дія. Шкала — велика терція зі співвідношенням 1,25: шість іменованих щаблів від дрібного шрифту до заголовкового, і кожен із них — токен, а не значення. Заголовки явно прив’язано до щаблів, а не залишено на розсуд браузера, і саме це виправило ті два, що не мали власного розміру. Мінімум задано лише для найнижчого щабля, тож дрібний шрифт лишається розбірливим на телефоні, а вся шкала не фіксується. Логотипи виключено явно, за назвою, а не випадково. Тримає все це лінтер: він відображає сайт у браузері й зупиняє перевірку на двадцять восьмому окремому розмірі. Він уже двічі довів свою користь: спіймав заголовок розміром 1,17 від основного тексту, що не є щаблем жодної шкали, і назвав це співвідношення в повідомленні про помилку, а ще спіймав вбудований код розміром 0,9 — саме таке значення, проти якого шкала й існує. Разом зі шкалою з’явилася довжина рядка приблизно в сімдесят два символи замість успадкованої фіксованої ширини, яка давала дев’яносто один символ на сторінці відгуку й сто десять на сторінці контактів.

Результат. Шість розмірів замість двадцяти семи, із задекларованим співвідношенням, задекларованою довжиною рядка й перевіркою, яка відхиляє наступне незаплановане значення. Обмеження реальне й часом незручне: якщо дизайну потрібен розмір між двома щаблями, доводиться або перейти на щабель, або обґрунтовувати зміну шкали, і таку суперечку вже не раз вели й програвали.

Одна частина довшого переліку — і він увесь на цьому сайті.

Кожен запис написано однаково: ситуація, завдання, що ми зробили і що змінилося.

Переглянути весь перелік