От автора: у веб-типографики огромное преимущество, ведь она опирается на богатство знаний многовековых традиций печати. К тому же, эти традиции несут в себе стандарты наилучших практик и передового опыта.
Тем не менее, в интернете, как в средстве коммуникации, появились свои особенности. Их настолько много, что мы пришли к мысли, что бесшовный, безболезненный переход от печатного формата к веб-типографике это еще та дилемма. В своей книге О Веб-Типографике Jason Santa Maria объясняет:
«Печатные книги не изменяются. От первоначального макета дизайнера до отправки в печать, потом на склад, на книжные полки и, в конце концов, в наши руки, книга не меняет свой формат. Вы получаете ее точно такой, какой она была задумана дизайнером.»
Когда же дело касается интернета, одинаковые сайты могут ощущаться совершенно по-разному, все зависит от набора факторов, к примеру, различные устройства, разные разрешения экранов, личные настройки браузера и т.д. Некоторые из этих факторов Jason объясняет далее…
«… может показаться, что шрифт слишком мал, другие сайты могут заставить нас пропустить что-то важное, а третьи могут сделать чтение почти невозможным.»
Принимая во внимание вышесказанное, можно сказать, что «интернет это лучшее место для текста.», также как и Tim Brown говорит про свой шрифт Universal Typography. В интернете текст можно искать, копировать, переводить, давать ссылки на другие документы, его можно распечатать, он удобен и открыт.
Огромная гибкость интернета не означает, что его нельзя контролировать. Напротив, как веб-дизайнеры, мы по-прежнему хотим осознанно выбирать каждый аспект нашей работы, и текст не исключение. То, каким образом текст отображается на странице, его цвет, размер, шрифт, все это оказывает влияние на общие ощущения от сайта и бренда.
Нашим основным инструментом по изменению внешнего вида текста является CSS. Все представленные в этой статье свойства можно найти в спецификации CSS Text Module.
«Этот модуль описывает принципы управления шрифтом через CSS; те свойства CSS, которые отвечают за перевод исходного текста в форматированные абзацы.»
Другими словами, CSS Module объясняет, как отображаются символы и слова в браузере, какие у них межбуквенные расстояния, выравнивание, как писать через дефис и т.д.
Основная единица текста или слова, а также, где именно в тексте допускается разрыв, все это существенно зависит от используемого языка и его правил. Поэтому очень важно объявить это в HTML документе (обычно, в атрибуте lang тега <hgtml>).
В этой статье я не буду говорить о двух темах:
Шрифты, в частности визуальное представление отдельных символов, т.е. знаки и их свойства;
Свойства CSS относящиеся к украшениям текста, такие как подчеркивание, тени и насыщенность.
Манипуляция регистром букв
Бывает, что требуется написать часть текста с большой буквы, к примеру, имя и фамилию. CSS позволяет это сделать с помощью свойства text-transform.
Значение по умолчанию для text-transform: none, к буквам не применяется никаких эффектов.
Значение capitalize
Если вам необходимо отобразить первые буквы слов в верхнем регистре, а остальные оставить без изменений (не важно где в HTML документе), используйте значение capitalize:
|
1 |
<h2> alice's adventures in wonderland</h2> |
|
1 2 3 |
h2 { text-transform: capitalize; } |
Заметьте, как значение переводит в верхний регистр каждую первую букву, что не свойственно заголовкам: все первые буквы в верхнем регистре, включая слово «in». Тем авторам, которые пишут на физических носителях, придется вручную исправлять названия в исходном тексте.
Значение uppercase
Если вам нужно отобразить все буквы в верхнем регистре, в независимости от положения текста в HTML документе, попробуйте это значение:
|
1 2 3 |
h2 { text-transform: uppercase; } |
Значение lowercase
С помощью этого значения можно перевести все символы текста в нижний регистр. Естественно, те буквы, которые уже были в нижнем регистре, не изменятся.
|
1 |
<h2>Alice's Adventures in Wonderland</h2> |
|
1 2 3 |
h2 { text-transform: lowercase; } |
Значение full-width
В спецификацию было добавлено новое значение, full-width. Это значение обрамляет каждый символ невидимым квадратом, как идеографические символы, например, японские или китайские. Это значение облегчает переход от латинских к идеографическим символам.
Не все символы имеют соответствующую форму full-width, поэтому на эти символы значение просто не подействует.
|
1 2 3 |
h2 { text-transform: full-width; } |
Ниже показано, как отображаются символы в Firefox:
Замечания
У свойства text-transform просто замечательная поддержка в браузерах. Все современные браузеры поддерживают его.
Исключением является только значение full-width, оно работает пока что только в Firefox. В принципе это и понятно, учитывая то, что значение full-width может быть отменено на этапе спецификации Candidate Recommendation.
Я отметил маленькое несоответствие между версией Firefox v.39 и остальными современными браузерами в рендеринге значения capitalize для слов с дефисом. Вот так это выглядит в Firefox:
Посмотрите, как первый символ после дефиса все еще в нижнем регистре. С другой стороны тот же самый текст в Chrome:
А в этом примере символ, идущий за дефисом, не исключение; эти символы также отображаются с большой буквы. Такое поведение наблюдается во всех последних версиях браузером, как уже было сказано за исключением Firefox.
И наконец, каскадирование свойств. Если установить свойство text-transform к контейнеру, то его значение будет унаследовано дочерними элементами. Чтобы убрать ненужные стили установите для дочерних элементов text-transform: none.
Смотреть демо по свойству text-transform.
Как работать с пробелами
При нажатии Tab, клавиши пробел, Enter или при использовании тега <br> создается символ пробела. По умолчанию браузеры сжимают несколько последовательно идущих пробелов в один, разрывы строк удаляются, а строки с текстом подгоняются под контейнеры. Это очень удобно, ведь такой подход позволяет нам делать абзацы и разделять куски текста. Это в свою очередь делает наш текст легко читаемым.
А что если это не основное предназначение пробелов? Скажем, если вам нужно сохранить точное количество пробелов в HTML документе. Это нормально, к примеру, когда вы пишите код и хотите, чтобы он отображался красиво и с отступами, а не в одну строку.
В таких случаях, если вы хотите изменить значение браузера по умолчанию для пробела, свойство white-space предлагает вам несколько интересных вариантов.
Значение normal сбрасывает настройки браузера на по умолчанию: все дополнительные пробелы будут удалены, а строки будут заключены в абзацы при достижении границ контейнера.
Значение pre
Значение pre сохраняет все пробелы и переводы строк в документе. Текст не перепрыгнет на новую строку, когда достигнет границы контейнера.
|
1 2 3 |
element { white-space: pre; } |
Если вы используете Tab в качестве пробела, то с помощью свойства tab-size можно изменять его размер, значения целочисленные.
|
1 2 3 4 5 6 |
element { white-space: pre; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; } |
Свойство tab-size не поддерживается браузерами, но если вас раздражает стандартный размер таба, то есть специальный полифил.
Значение pre-wrap
Допустим, вы хотите сохранить все пробелы, как в исходнике, но также хотите, чтобы текст переносился сам на новую строку при достижении края контейнера. Значение pre-wrap сделает все за вас.
|
1 2 3 |
element { white-space: pre-wrap; } |
Обратите внимание на то, как браузер принудительно переносит слова на новую строку, хотя места вполне достаточно:
Уменьшите окно браузера, и вы увидите, как текст перепрыгивает на новые строки.
Значение pre-line
Самое интересное значение свойства white-space: pre-line. Кроме того, что оно сжимает последовательность пробелов в один, свойство ведет себя так же, как normal. Если в исходнике есть символ перехода на новую строку или тег <br>, то они сохраняются и в окне браузера.
|
1 2 3 |
element { white-space: pre-line; } |
Посмотрите демо по значениям pre, pre-wrap и pre-line на CodePen.
Значение nowrap
Nowrap больше известен как пробел. У вас есть контент, который не должен помещаться в окно браузера? white-space: nowrap; поможет с этим. Louis Lazaris ссылается на следующий пример.
У нас есть ссылка с закрывающей кавычкой (»). Не хочется, что бы этот символ переносился на новую строку, как, например, при резиновой верстке.
В этом и подобных случаях (иконки, например) значение nowrap очень удобно.
Другой интересный способ применения описала Sara Soueidan на Codrops в своем блоге. Sara говорит, что свойство white-space можно применить к любому линейному элементу, даже изображению.
«Иногда значение nowrap можно использовать для горизонтальной галереи изображений, чтобы одно изображение не съезжало на новую строку.»
Я улучшил ее способ, добавив в обычную JQuery карусель свойство white-space: nowrap. Демо:
Управление разрывом строки внутри слов
Иногда случается так, что дизайнер не предусмотрел тот случай, когда слово очень длинное, и оно выходит за границы контейнера. Это могут быть длинные ссылки или длинные слова, придуманные пользователями в комментариях к блогам.
Следующие свойства CSS придумали как раз для того, чтобы мы могли работать с длинными словами.
Свойство word-warp/overflow-wrap
overflow-wrap работает, если свойство white-space установлено так, чтобы текст перепрыгивал на новую строку (раньше называли word-wrap, полностью поддерживается и работает во всех современных браузерах так как унаследован от старого свойства). Имеет два значения: normal и break-word. При normal слова разрываются по пробелам, дефисам и т.д.
Значение break-word разрывает слово в произвольно месте, если оно не помещается в строку, и строка не может быть разорвана в другом приемлемом месте. На рисунке ниже показан пример выхода слова за границу контейнера:
Установим значение break-word для свойства overflow-wrap, а для старых браузеров word-wrap:
|
1 2 3 4 |
element { word-wrap: break-word; overflow-wrap: break-word; } |
…и длинное слово теперь разбито на строки, вмещающиеся в контейнер.
Свойство hyphens
Разрыв длинных слов хорошая идея, но получившийся текст может запутать читателя. Лучше использовать дефис для переноса части слова на новую строку. Так пользователи сразу понимают, что смотрят на одно длинное слово на нескольких строках. В CSS для этого есть свойство hyphens, которое можно использовать в сочетании с word-wrap: break-word.
А конкретнее, значение auto позволяет переносить слова на новую строку с добавлением дефиса, если это позволяют правила языка или дефис записан в исходнике. Чтобы все работало правильно, убедитесь, что установлен атрибут lang с нужным языком:
|
1 2 3 4 5 6 |
.break-word.hyphens-auto { -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } |
Также можно убрать дефисы. Установите hyphens: none:
|
1 2 3 4 5 6 |
.break-word.hyphens-none { -moz-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } |
Можно отображать дефисы в слове, если дефис присутствует в разметке, а текст необходимо перенести на следующую строку. Это можно сделать с помощью значения manual:
|
1 2 3 4 5 6 |
.break-word.hyphens-manual { -moz-hyphens: manual; -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; } |
Свойство hyphens хорошо поддерживается на всех современных браузерах с вендорными префиксами, хотя есть небольшие несоответствия. В последних версиях Chrome (v.44) и Opera (v.30) на момент написания статьи не поддерживается значение auto.
Примеры выше в демо на CodePen.
Управляем межбуквенным и межсловным интервалами
Читаемость текста часто зависит от набора факторов. В некоторых случаях отлично помогает увеличенное или уменьшенное расстояние между словами или каждым отдельным символом, т.е. трекинг.
В CSS есть свойства word-spacing and letter-spacing, с помощью которых можно контролировать расстояния между словами и символами.
Свойство word-spacing
Значения свойства:
normal
length
percentage
При normal расстояние между буквами по умолчанию. Интервал зависит от шрифта.
|
1 2 3 |
.normal { word-spacing: normal; } |
<length> добавляет дополнительное расстояние к интервалу по умолчанию, которое определяется по шрифту и настройкам браузера.
|
1 2 3 |
.length { word-spacing: 0.5em; } |
Проценты работают так же, как и <length>. Я не нашел ни одного полезного применения процентов, и они могут быть удалены в будущих спецификациях.
|
1 2 3 |
.percentage { word-spacing: 1%; } |
Свойство letter-spacing
Имеет два значения: normal или <length>.
Значение normal оставляет без изменения значение по умолчанию между символами. Также оно сбрасывает ранее установленные значения letter-spacing на по умолчанию. К примеру, если вы установили значение letter-spacing на 1em для родительского блока, но для дочерних элементов хотите значение по умолчанию, примените к ним значение normal.
|
1 2 3 |
element { letter-spacing: normal; } |
<length> использует единицы измерения px или em, к интервалу по умолчанию добавляется пользовательский интервал.
|
1 2 3 |
element { letter-spacing: 1em; } |
Дополнительно
Word-spacing применим не только к словам. Его можно использовать для любых строчных или строчно-блочных элементов.
Можно анимировать word-spacing и letter-spacing. Если использовать свойство transition для анимации, то можно заметить, что letter-spacing: normal не работает в Firefox (v.39). Исправить можно, поставив не normal, а 0em. Ниже представлено демо с анимацией свойств word-spacing и letter-spacing:
Недавно добавленные значения и свойства для выравнивания текста
Свойство text-align уже давно известно. Оно управляет выравниванием линейного контента, например, текста или изображений внутри блочных элементов. Значения left и right выравнивают контент по левому и правому краю соответственно, а значение center по центру. Justify выравнивает текст по ширине блока (кроме последней строки, если она не достигает края контейнера).
Недавно добавленные два значения могут быть полезны на иностранных сайтах с письменностью справа налево (RTL): start и end.
Для читающих слева направо (LTR) данные значения агалогичны left и right соответственно. Для читающих справа налево start соответствует значению right, а end значению left.
|
1 2 3 |
element { text-align: start; } |
|
1 2 3 |
element { text-align: end; } |
Если применить text-align: match-parent к строчному дочернему элементу, то он унаследует родительские значения выравнивания. Значения start или end вычисляются в зависимости от языка родительского элемента и его направления, и соответственно превращаются в left или right.
Свойство text-align-last
Text-align-last новое свойство в CSS. Свойство управляет выравниванием последней строки, выравненного по ширине текста в конце параграфа или перед тегом br. Значения такие же, как и у text-align, кроме auto. В свойстве text-align-last значение auto по умолчанию, позволяет выровнять последнюю строку текста так же, как в свойстве text-align для всего текста, если оно установлено. Если text-align не используется, то text-align-last принимает значение start.
На момент написания статьи поддержка у этого свойства очень низкая. Я считаю, что данное свойство нужно применять аккуратно, если вообще применять.
На CodePen представлено демо.
Отступы текста
Отступ на первой строке не часто встретишь на веб-сайтах. Вместо него используется пустая строка для разделения блоков текста. Тем не менее, иногда отступ на первой строке применяется, чтобы создать классический вид.
Если в вашем дизайне есть отступы, то можно использовать свойство text-indent. Рассмотрим возможные значения. Значение обычно в px или em:
|
1 2 3 |
element { text-indent: 2em; } |
Проценты:
|
1 2 3 |
element { text-indent: 6%; } |
Значение each-line делает отступ на каждой первой строке абзаца внутри контейнера или после принудительного разрыва строки с помощью Enter или тега br. Но если текст сам перепрыгнул на новую строку, не вместившись в контейнер, то значение не будет применено. Значение hanging задает отступы для всех строк кроме первой.
Each-line и hanging экспериментальные значения, на момент написания статьи не работают ни в одном браузере. Демо по свойству text-indent
Заключение
CSS проделал долгий путь в вопросе манипуляции текста, и еще многого предстоит достичь. Помимо неполной поддержки новейших свойств, было бы неплохо, например, добавить свойства управления кернингом, т.е. способность изменять расстояние между двумя символами одного слова.
В этой статье я рассказал про некоторые свойства CSS, манипулирующие форматированием, переносом строки и выравниванием текста на веб-странице. Смело экспериментируйте с представленными выше демо.
Автор: Maria Antonietta Perna
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
