Перенос слов в Sketch

Работая над макетами я часто сталкиваюсь с принудительными переносами слов или предлогов на новую строку. Обычно это происходит по двум причинам: это либо длинный заголовок, который некрасиво смотрится, или на строке остался висеть висячий предлог.

Есть два способа решить эту проблему: хороший, которым мало кто пользуется и плохой, которым пользуются все.

Плохой способ

Плохой способ состоит из двух шагов: мы просто задаем контентную область для нашего текста и принудительно переносим провинившийся предлог на новую строку шифт энтером:

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

Может оказаться, что символа ⚹ не будет, и верстальщик даже не заметит что что-то пошло не так. Разумеется, в верстке ничего не перенесется на новую строку, ваш предлог останется висеть там, где висел. Придется исправлять это досадное недоразумение уже после того как страница будет сверстана.

Причина провала в неправильно поставленной задаче. У нас нет задачи переносить предлоги на новую строку. Задача состоит в том, чтобы предлоги не оставались висеть на строке одни, без следующего за ними слова.

Хороший способ

Теперь, когда задача ясна, нужно придумать как "привязать" предлог к следующим за ним словом. Хорошее решение — неразрывный пробел. Он есть в верстке, и с ним не возникнет подобных проблем.

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

Мои другие статьи и гайды будут в телеграм канале.

Подписывайтесь 📲, нажимайте на колокольчик 🛎 и ставьте палец вверх 👍.