что такое выключка по ширине
Надеюсь этой записью открыть серию статей, посвящённых типографике в целом и веб-типографике в частности.
Логически следующая статья будет посвящена использованию разнообразных пробелов и разделительных интервалов (такой заказ был в комментариях к статье о тире и дефисах пользователя besisland).
Итак, тезис статьи: «до тех пор, пока браузеры не имеют возможности динамически расставлять переносы в словах, вебмастеры должны забыть выключку по ширине как страшный сон».
Это значит, что нужно забыть CSS-конструкцию « text-align: justify; » и, если вы этого до сих пор не сделали, то выжечь калёным железом все воспоминания об « align=»justify» ».
Инь и ян типографики: ширина пробелов и правый край
Как показывает практика, неравномерность ширины межсловных пробелов в тексте отрицательно влияет на удобочитаемость уже в пределах одного абзаца (я подчёркиваю, именно «межсловных»).
Ровный правый край блока текста улучшает удобочитаемость на объёмах от половины стандартной страницы (при средней ширине строки), и только в случае однородности пробелов.
Таким образом, равномерность ширины пробелов на обычно коротких текстах в Интернете является гораздо более важной, чем выравнивание правого края.
Рукописи и ксилография
Подвижности литер нет (что написал, заново переписывать только с чистого листа, либо вырезать на новой деревяшке), возможность переноса — в «ручном» режиме.
Типографская печать (ручной набор, монотипы, линотипы)
Есть и подвижность литер (поподробнее о разгонке мы поговорим в будущей статье о пробелах), и возможность переноса в «ручном» режиме.
Печатная машинка
Снова нет подвижности литер, но переносы можно расставлять вручную.
Современные текстовые процессоры
Пытаются автоматически имитировать типографский процесс. Есть подвижность литер и возможность как автоматической расстановки переносов, так и ручной. Как ни удивительно, но даже в MS Word можно добиться приличного вида блока текста, выключенного по ширине, если в тексте расставить переносы.
Без переносов текст ужасен.
Браузеры
Первый в истории тип носителя, имеющий подвижность литер, но не имеющий возможности расстановки переносов. Помимо этого, строка может иметь практически любую ширину (ведь хорошие дизайнеры предусматривают возможное изменение размера шрифта пользователем!).Теперь, чтобы совместить равномерность пробелов и выравнивание по ширине, браузеры практически должны стать интерактивными текстовыми процессорами: либо автоматически расставляя переносы в реальном времени на произвольных объёмах текста, либо адекватно обрабатывая «мягкие переносы» так же в реальном времени.
До тех пор, пока этого не произошло, в плане типографики браузер недалеко ушёл от печатной машинки. Осознавая как этот факт, так и тот факт, что в недалёком будущем технологии разовьются до нормальной обработки переносов, дизайнер должен временно отказаться от CSS-конструкции « text-align: justify; ». Надеюсь, что от кода вида « p align=»justify» » вы уже давно отказались, потому что он является не рекомендуемым (deprecated) в HTML 4.01 и может в следующих версиях стандарта перейти в разряд «устаревшего» (obsolete).
Выравнивание текста
Выравнивание или выключка текста
Текст может быть выровнен по одному или по обоим краям (отступам) текстового фрейма. Текст считается выключенным, если он выровнен с обеих сторон. Можно выбрать выравнивание всего текста в абзаце, кроме последней строки («Выключка по левому краю» или «Выключка по правому краю»), либо включая ее («Выключка по формату»). Если последняя строка содержит всего несколько символов, то, возможно, нужно будет применить специальный символ конца материала и создать концевую шпацию.
При выключке текста при помощи компоновщика абзацев Adobe, чтобы обеспечить одинаковую плотность текста в абзаце и его визуальную привлекательность, InDesign производит смещение текста. Можно произвести точную подстройку интервалов в выключенном тексте.
При размещении текста по центру или выключке текста в сетке фрейма текст больше не будет выравниваться точно по сетке. Можно также задать выравнивание для всех абзацев в сетке фрейма.
Применение к абзацу параметра «Выключка к корешку» приводит к тому, что текст левой страницы разворота выравнивается по правому, а правой – по левому краю. Аналогичным образом, применение к абзацу параметра «Выключка от корешка» приводит к тому, что текст левой страницы разворота выравнивается по левому краю, а правой страницы – по правому.
В вертикальных фреймах выключка к корешку или от корешка не оказывает никакого эффекта, поскольку выключка текста выполняется параллельно направлению корешка.
Если требуется выравнивание левого края текста по левому краю, а правого — по правому, установите точку ввода в том месте, где нужно выровнять текст по правому краю, нажмите клавишу «Tab», затем выровняйте по правому краю оставшийся текст строки.
Выравнивание абзацев по сетке из базовых линий
Сетка из базовых линий представляет интерлиньяж основного текста документа. Это значение может быть кратно изменено для всех элементов страницы, чтобы гарантировать, что текст всегда будет выровнен по столбцам и страницам. Например, если основной текст в документе имеет интерлиньяж 12 пунктов, то для текста заголовка можно задать интерлиньяж в 18 пунктов и добавить отступ 6 пунктов перед абзацами, которые находятся перед заголовком.
Использование сетки из базовых линий гарантирует единообразие размещения текстовых элементов на странице. Она позволяет настроить интерлиньяж абзаца таким образом, чтобы его базовая линия была гарантированно выровнена по основной сетке страницы. Этот метод можно использовать в том случае, если базовые линии текста находятся в нескольких столбцах, а также при выравнивании смежных текстовых фреймов. Параметры сетки из базовых линий изменяются в разделе «Сетка и направляющие» диалогового окна «Установки».
Можно выровнять по сетке из базовых линий только первую строку абзаца, что позволит остальным строкам сохранить ранее заданные значения интерлиньяжа.
Для просмотра сетки из базовых линий выберите меню «Вид» > «Сетка и направляющие» > «Показать базовую сетку».
Сетка из базовых линий отображается на экране только в том случае, если масштаб документа больше минимального масштаба отображения линий, заданного в разделе установок «Сетка и направляющие». Для их отображения может потребоваться увеличение масштаба отображения.
Переносы в вебе и выключка по формату
Как известно, растягивать по ширине тексты на сайтах с помощью конструкции «text-align: justify;» крайне не рекомендуется. Основная проблема — слишком большие пробелы между словами из-за отсутствия переносов в словах.
Долгое время браузеры не могли самостоятельно переносить слова. Однако недавно ситуация с поддержкой автоматических переносов стала улучшаться. Firefox 6 стал поддерживать переносы в английских текстах, а с выходом Firefox 8 очередь дошла и до русских текстов. Переносы также есть в последних версиях Safari. Поэтому настала пора подумать, как можно использовать выключку по формату с откатом к выключке влево, если браузер не поддерживает автоматические переносы.
Моя идея решения лежит на поверхности. При загрузке страницы мы создаем два узких временных элемента с длинным словом, у одного из которых включены переносы. Если его высота больше, тогда браузер поддерживает автоматические переносы.
Вот фрагмент кода, иллюстрирующий идею:
На демонстрационной странице в первом фрагменте применяется выключка по формату и переносы, если браузер их поддерживает:
Второй (выключка влево) и третий (выключка по формату) фрагменты приведены для сравнения, в них переносов нет.
Я протестировал этот код в основных браузерах под Windows (кроме IE10) и в некоторых под Ubuntu. Переносы поддерживают только Firefox (скриншот выше) и Safari в Windows, и в обоих браузерах код работает правильно. Также выяснилось, что в моей установке Ubuntu Firefox не переносит русские слова, видимо, из-за отсутствия словарей.
Таким образом, уже сейчас можно использовать выключку по формату вместе с автоматическими переносами в тех браузерах, где они поддерживаются, и на тех сайтах, где это уместно.
Автор: Игорь Штанг
Графический и информационный дизайнер, автор курса «Типографика и верстка».
Памятка верстальщика вызвала большой резонанс, но, судя по комментариям в ЖЖ и на Awdee, мало кто понимает, почему всё именно так, как я нарисовал. Попробую объяснить на примерах. Сегодня речь пойдет о выключке по формату.
Хорошо
Особой требовательностью к набору отличались первопечатные книги. Вот, например, Николай Йенсон, 1474:
А это Альд Мануций, 1499:
Равномерные межбуквенные и межсловные пробелы делают набор однородно серым. В нем нет ни дыр, ни темных пятен. Тон полосы спокойный, прозрачный и легкий (определения Дмитрия Карпова).
Плохо
Плохи любые попытки сделать полную выключку в вебе и на мобильных устройствах. Компьютеры еще не научились правильно расставлять переносы и следить за величиной пробелов. Издание The Daily для айпада:
Здесь лучше, но текст всё равно слишком разреженный:
Полная выключка всегда работает плохо на узком формате. Тут необходим левый флаг или центровка:
Ошибки
Выключка по формату — неестественная форма существования текста, отсюда и многочисленные сложности. Ошибки, перечисленные в памятке, делятся на два вида: первые нарушают тон полосы (разреженные и сжатые строки), вторые — ее прямоугольность (висячие и концевые строки).
Висячие предлоги, союзы и другие короткие слова не являются ошибкой при полной выключке. Ими жертвуют ради однородного тона. Исключение составляют:
— однобуквенные слова в начале предложения,
— инициалы,
— маркеры списка (цифровые, буквенные и графические),
— сокращения вроде т. е., т. к., и т. д., и др.,
— цифры.
Как сделать в Индизайне
В первую очередь настраиваем вкладку Justification. Межсловное расстояние в интервале от 95 до 130%, межбуквенное — от −3 до 6%. Обратите внимание, что минимальное значение несильно отклоняется от желаемого (Desired): сжатые строки читать труднее, чем разреженные. Разрешаем масштабировать символы, но совсем чуть-чуть, от 99 до 101%:
Эти цифры получены опытным путем и лучше всего подходят для книжного набора: 50–60 символов в строке. Для узкой колонки правила нужно ослабить.
Обязательно включаем переносы во вкладке Hyphenation. Ползунок выкручен в сторону Better Spacing:
Если не включаются, значит, выбран не тот язык:
Галочка H&J Violations в панели Preferences подсветит желтым строчки, которые Индизайн не может разверстать по заданным цифрам:
Перечисленные выше настройки уже дадут сносный результат:
Дальше работаем руками — двигаем строки в проблемных абзацах. Есть несколько способов:
1. Иногда достаточно изменить место переноса в каком-нибудь слове — поставить символ мягкого переноса. Чтобы слово стало неразрывным, мягкий перенос должен стоять перед первой буквой.
Мак: Command + Shift + — (дефис)
Винда: Ctrl + Shift + —
2. Если переносы не помогли, крутим трекинг от −10 до 10 единиц. Трекинг увеличивает или уменьшает все пробелы в строке: и между словами, и между буквами. На горячих клавишах у Индизайна слишком большой шаг, поэтому я ими не пользуюсь.
Плюс 20 единиц:
Option + → (стрелка вправо)
Alt + →
Минус 20 единиц:
Option + ← (стрелка влево)
Alt + ←
3. Можно менять только межсловные пробелы, не трогая межбуквенные.
Плюс 20 единиц:
Command + Option + \ (бэкслеш)
Ctrl + Alt + \
Минус 20 единиц:
Command + Option + Delete
Ctrl + Alt + Backspace
4. Еще одно средство — масштабирование шрифта от 99 до 101%.
5. В сложных случаях слегка растягиваем или сужаем текстовый фрейм — не более, чем на 1–2 мм. (Этого никто не заметит.)
Изменения должны касаться всего абзаца, а не отдельных строк, потому что Индизайн «думает» об абзаце целиком и учитывает соседние строки. То есть сначала выделяем весь абзац, а потом крутим настройки.
С концевыми и висячими строками также справляемся с помощью вгонки и выгонки. Концевую строку, немного не доходящую до края, втягиваем, чтобы пробел стал более внятным, либо доводим до правой границы (см. первый абзац на предыдущей картинке). О допустимости висячих строк можно долго спорить, однако в традиционной книжной верстке они запрещены.
Нельзя менять интерлиньяж и добавлять пробелы между абзацами. Как говорит Брингхерст, «такие фокусы разрушают ткань текста и… поражают книгу в самое сердце».
В конце еще раз внимательно смотрим на полосу, особенно на правый край. Проверяем правильность переносов.
Разбираемся в основах типографики за 10 минут
Креативный директор агентства Agima Григорий Коченов рассказал Нетологии об основах типографики, шрифтовых трендах, ключевых понятиях и правилах комбинирования шрифтов.
Креативный директор агентства Agima
Типографика — это игра со словом, шрифтами и образами, благодаря которым получаются крутые концепты, как в этом видео:
Выравнивание текста
Выключка — это способ выравнивания текста. Есть 4 вида выключки: слева, справа, по центру и по ширине.
В вебе принято выравнивать текст по левому краю, потому что это привычно и текст так легко считывается.
По правому краю выравнивают в редких случаях, например, цифры в таблицах. Это помогает соблюсти разрядность и визуально отделить определения от значений без дополнительных визуальных инструментов.
Выравнивание по центру используют для одноколоночных сайтов со спокойной композицией и ровным построением.
Выключка по ширине — это газетный стиль. Так верстают и книги, но для их вёрстки есть верстальщик, который трудится, чтобы сделать это качественно и гармонично, без разрывов между символами.
Базовые правила
Типографьте текст перед публикацией. Используйте типограф Лебедева. Он учитывает десятки правил типографики: убирает висячие предлоги, ставит правильные кавычки, заменяет дефис на тире.
Разбивайте текст на абзацы по смыслу. Смотрите, где по смыслу заканчивается одна мысль и начинается другая. Большинство дизайнеров придерживаются позиции: «Когда у нас есть текст, можно половину выкинуть и относиться к нему, как к рыбному тексту». Нет, так делать нельзя.
Не используйте «рыбу» — Lorem Ipsum или другую панграмму, выполняющую роль текстового заполнителя. Если поставите сначала Lorem Ipsum, а потом кириллицу, макет будет выглядеть иначе.
Соблюдайте баланс длины строки и межстрочного отступа. Чем длиннее строка, тем больше должен быть межстрочный отступ, так как при чтении длинных строк легко сбиться. Чем больше между ними свободного пространства, тем проще найти нужную строку. Средне-оптимальное значение межстрочного отступа, от которого можно отталкиваться, — размер кегля основного шрифта, умноженный на полтора.
В небольших колонках, приближенных к газетным, межстрочный отступ можно уменьшать, но не делать меньше высоты шрифта, иначе всё смешается: