Шрифт Lato: Sketch vs Android Studio



Життя в Avito змусила перейти на Sketch і почати малювати в mdpi (1x). Щоб підтримати телефони та планшети. Так як я працюю за адаптованим під себе принципом Atomic Design.

Перехід на Sketch я почав c перенесення шрифтових гайдів. Взяв телефон з mdpi (1x), встановив туди своє тестове додаток з шрифтовий сіткою Avito. Почав обводити. Таке я вже робив для Photoshop. (Знати точні межі тексту мені треба, щоб складати точні специфікації дизайну для розробників)




Як виявилося, косяків (особливостей роботи :) ) з рендером шрифту у Android вистачає. Наведу конкретний приклад. Взяв 2 однакових TextView (шрифт в один рядок, 14 Bold). Другого TextView призначив на додаток атрибути android:maxLines=«1» android:ellipsize=«end» Це означає, що якщо текст довгий, то він здасться в один рядок з «...» на кінці. У результаті висота контейнера і базова лінія у другого TextView отрендерились зі зрушенням в 1dp щодо першого. Були й інші дивацтва, але не суть.

Продовжив експеримент. Тут згадав про недавнє відео від Lisa Wray про роботу зі шрифтом. Відкопав скріншоти на робочому столі про структуру шрифту з точки зору Android.




Подумав, погуглив. Натрапив на атрибут android:includeFontPadding=«false». Як я зрозумів, він прибирає паддінґ зверху від шрифту між top і ascent і знизу між descent і bottom (див. перший скріншот).

Додав цей атрибут всім TextView в тестовому додатку. Почав заново дивитися. Погрався з різними атрибутами у TextView, посравнивал — все круто. TextView з прикладу вище рендеряться однаково, без зрушень. Почав обводити межі тексту для шрифтовий сітки. Щоб на виході отримати для Sketch ось це:



В процесі обведення зауважив, що межі текстового шару в Sketch один в один збігаються з кордоном TextView в Android (Studio). Спробував інші розміри — теж збігаються. Круто!



А що з межстрочными інтервалами? Виявилося теж все добре. Для шрифту Lato Bold розміром 16 параметр Line нового текстового шару в Sketch за замовчуванням дорівнює 19. Атрибут android:lineSpacingExtra=«1sp» збільшує міжрядковий інтервал 1. Вирішив додати 1 до параметру Line в Sketch. Тобто стало 20. Запрацювало, контейнери співпадають!



Причому висота стала на 1 більше. Додалося це простір знизу. Тобто можна гратися точним вирівнюванням тексту у кнопок.

Висновок
Для шрифту Lato, якщо малювати макети mdpi (1x), рендеринг шрифту в Sketch збігається з Android (Studio), якщо додати TextView атрибут android:includeFontPadding=«false»

Гіпотеза
Здається, що така поведінка справедливо для будь-якого шрифту. А не тільки Lato. Треба перевіряти.



Хто любить читати в Facebook, додавайтеся в мою групу про Якісний Android.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.