Noveo

Наш блог Верстка надписей в iOS — часть 2

Верстка надписей в iOS — часть 2

Как и обещали — продолжение статьи Дмитрия, где вы узнаете о размере надписи, позиционировании и таблице шрифтов :).

Размер надписи

Если в ксибе или сториборде используется AutoLayout, то надписи смогут сами подогнать свой размер (высоту и ширину) до размера текста. Но бывают случаи, когда необходимо вручную определить и задать размеры надписи.

Горизонтальный размер UILabel определить несложно. А как определить вертикальный размер? Можно использовать ранее рассчитанный размер шрифта в качестве высоты надписи, но из-за исключений1 символы могут вылезть за пределы контрола и обрезаться. Для того, чтобы в UILabel гарантированно влезла строка, нужно, чтобы надпись имела высоту, равную ceil([string sizeWithFont:font].height). Оказывается, эта величина не зависит от символов, входящих в строку, и прямопропорциональна (за исключением единичных шрифтов3) размеру шрифта. Значит, для определения высоты UILabel достаточно найти коэффициент пропорциональности для шрифта и умножить его на размер шрифта, округлить до ближайшего большего целого значения. Что касается многострочных надписей, их высота равна высоте отдельной строки,умноженной на количество строк.

Позиционирование

Аналогично размеру, определить горизонтальную позицию несложно. С вертикальной все сложнее – текст внутри UILabel будет прыгать вверх ивниз, если менять его шрифт. Никаких правил тут нет, вертикальная позиция текста внутри UILabel определяется шрифтом; непонятно, как позиционировать надпись чтобы текст внутри нее был на одном уровне стекстом из дизайна.

tumblr_inline_nmjeylMT0o1soatkc_540
Заглавные ”X” стандартных iOS-шрифтов выстроились в «стройные» ряды

Тем не менее, можно разбить шрифты на две группы. У первой расстояние от верха надписи до верха строчного символа4 (между уровнями a и е) будет примерно совпадать с расстоянием от низа символа до низа надписи (fi), таким образом можно считать строчные буквы расположенными вертикально посередине надписи и, ориентируясь по ним, расположить надпись. У второй группы опорным символом будут заглавные буквы4 (ad примерно равно fi).

image

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

Таблица шрифтов

image

Приложение FontsSheet предоставляет информацию о системных шрифтах. Исходники расположены тут (https://github.com/noveogroup/fonts-sheet-ios). Запускать лучше на симуляторе: приложение делалось на коленке и не оптимизировано для девайсов.

image

Первый раздел (UILabel.height / font.size) открывает таблицу с коэффициентами, равными отношению высоты надписи к размеру шрифта. Для каждого шрифта приложение перебирает диапазон размеров (от 10 до 72) и вычисляет коэффициент, выводя минимальное и максимальное значение. Увсех шрифтов, кроме одного3, значения совпадают с несущественной погрешностью, что говорит о линейной зависимости идеальной высоты надписи от размера шрифта.

image

Второй раздел (font.size(height(“x”))) поможет определить размер шрифта по высоте символа в случае, если нет возможности узнать нужное значение(например, если дизайн представлен jpg картинками). К примеру, есливысота заглавного символа текста со шрифтом Helvetica равна 9 пикселям(не забываем учитывать размер картинки2), то соответствующий размер шрифта может принять значения от 11 до 12.Одному значению высоты могут соответствовать несколько размеров, потому что с ростом размера символ растет постепенно.

image

Символы на картинке расположены по росту размера шрифта, но все имеют одинаковую высоту: полоска между ними и красными линиями заполненаполупрозрачными пикселями, принадлежащими символу, которые становятсяболее отчетливыми с ростом размера. Последний символ выглядит болеевписывающимся в рамки, поэтому есть смысл делать выбор из несколькихразмеров в пользу наибольшего из них. В итоге для символа из примера свысотой 9 пикселей подходящим размером будет 12.

image

Последний раздел (Опорный символ) считает для строчного и заглавного символа значение, которое чем меньше, тем лучше, в идеале равно нулю.Для шрифтов семейства Helvetica значение для строчного символа 0.12, длязаглавного – от 0.00 до 0.07, следовательно, для данных шрифтов можносчитать заглавный символ более центрированным по вертикали внутринадписи, чем строчный.


  1. Буквы с диакритическими знаками и всякие закорючки зачастую выходят за границы высоты шрифта; из стандартных iOS-шрифтов выделяетсяZaphino, рвущий все ограничения даже обычными латинскими буквами.
  2. Чтобы избежать путаницы, будем использовать размеры простых экранов, не ретины.
  3. Единственное исключение из стандартных шрифтов ‑ это AppleColorEmoji.
  4. Типичные используемые для этого символы – латинские ”x” и ”X”.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

НазадПредыдущий пост ВпередСледующий пост

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: