Свойства CSS для управления веб-типографикой

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

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

Наш основной инструмент для управления видом текста в интернете — это CSS. Более подробное описание свойств CSS, которые я представлю в этой статье, вы можете найти в спецификации CSS Text Module.

Модуль описывает управление настройками шрифтов CSS; это свойства CSS, которые управляют переводом исходного текста в отформатированный, разбитый на строки текст.


Другими словами, CSS Text Module отвечает за отображение символов и слов в браузере и за то, как они располагаются, выравниваются, переносятся и т.д. с помощью CSS.

Что представляет собой основную единицу текста или слова, а также, где именно допускается разрыв слов в данной части текста, зависит от правил языка, используемого на сайте. Именно поэтому важно объявлять эту информацию в HTML-документе (как правило, в атрибуте lang элемента <html>).

В этой статье я рассмотрю две темы по типографике в дизайне:

  • шрифты, которые являются визуальным представлением символов, т.е. знаков и их свойств;
  • функции CSS, связанные с оформлением текста, таким как подчеркивание, тени и выделение.

Если вам интересно, вы можете найти самую свежую документацию по CSS-свойствам шрифтов и оформления текста в CSS Fonts Module Level 3 и CSS Text Decoration Module Level 3 соответственно.

Содержание

Управление регистром букв

Иногда текстовые элементы должны отображаться заглавными буквами, например, имя и фамилия. CSS предоставляет нам возможность управлять регистром букв с помощью свойства text-transform.

Значение по умолчанию для свойства text-transformnone, то есть, данное преобразование к буквам не применяется.

Значение capitalize

Если вы хотите, чтобы первая буква каждого отображаемого слова выводилась в верхнем регистре, при этом все остальные буквы оставались без изменений (независимо от их регистра в HTML-документе), используйте значение capitalize:

HTML:

<h2>alice's adventures in wonderland</h2>

CSS:

h2 {
  text-transform: capitalize;
}


Обратите внимание, что capitalize не следует конвенции регистра заголовков: все первые буквы слов в приведенном выше примере выводятся с заглавной.

Значение uppercase

Чтобы все буквы выводились в верхнем регистре независимо от их регистра в HTML-документе, в экранной типографике используется значение uppercase:

HTML:

<h2>alice's adventures in wonderland</h2>

CSS:

h2 {
  text-transform: uppercase;
}

Значение lowercase

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

HTML:

<h2>Alice's Adventures in Wonderland</h2>

CSS:

h2 {
  text-transform: lowercase;
}

Значение full-width

В спецификацию было добавлено новое значение full-width. Оно ограничивает вывод символов на определенном участке, и используется для идеографических символов, например, японских, китайских иероглифов и т.д. Это облегчает выравнивание латинских символов с идеографическими.

Не все символы имеют соответствующую ширину, при которой регистр символов не изменяется при использовании значения full-width.

HTML:

<h2>Alice's Adventures in Wonderland</h2>

CSS:

h2 {
  text-transform: full-width;
}

Вот как символы будут выглядеть в Firefox при использовании значения full-width:

Еще несколько замечаний

Свойство text-transform прекрасно поддерживается браузерами. Единственное исключение — это значение full-width, которое в настоящее время работает только в Firefox.

Кроме этого я заметила небольшое несоответствие при использовании значения capitalize для слов с дефисами в Firefox (V.39) и в других популярных браузерах.

Вот как это выглядит в Firefox:


Обратите внимание, что в Firefox первая буква после дефиса не переводится в верхний регистр. А вот как отображается тот же текст в Google Chrome:


В этом случае буквы, следующие сразу после дефисов, также отображаются с заглавной буквы. Я отмечала такое несоответствие в последних версиях всех наиболее популярных браузеров, кроме Firefox.

И, наконец, помните о наследовании! Если вы установите свойство text-transform для элемента контейнера, его значение наследуется всеми дочерними элементами. Чтобы избежать нежелательных результатов, установите для свойства text-transform дочерних элементов значение none.

Посмотрите демо-версию для значений свойства text-transform.

Как обрабатываются пустые диапазоны

Когда вы нажимаете клавишу табуляции, пробела или переносите текст на новую строку (с помощью клавиши ENTER или тега </b>), вы создаете в исходном документе пустой диапазон.

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

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

В подобных случаях, когда вы хотите переопределить поведение браузера по умолчанию, свойство white-space предлагает нам несколько интересных вариантов.

Значение normal позволяет сбросить параметры браузера на значения по умолчанию: все дополнительные пробелы объединяются в один символ, а строки переносятся, когда достигают края контейнера.

Значение pre

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

element {
  white-space: pre;  
}


Если вы используете табуляцию, чтобы создать пустые диапазоны, вы можете задавать их размер с помощью свойства tab-size, установив в качестве значения целое число:

element {
  white-space: pre;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}

Свойство tab-size поддерживается не всеми браузерами, но если вас совсем не устраивает размер по умолчанию пустого диапазона, создаваемого при помощи табуляции, вы можете использовать этот сервис.

Значение pre-wrap

Допустим, вы хотите, чтобы пустые диапазоны в исходном документе сохранялись при выводе в окне браузера. Но вы также хотите, чтобы строки переносились при достижении края контейнера.

Значение pre-wrap поможет достичь нужного результата:

element {
  white-space: pre-wrap;  
}

Обратите внимание, что каждая строка, отображаемая в браузере, отражает принудительные разрывы в исходном коде, хотя контейнер имеет достаточно места, чтобы разместить больше текста:


Уменьшите окно браузера, и вы увидите, что строки переносятся, чтобы соответствовать размерам контейнера:

Значение pre-line

В отношении объединения пробелов и переноса строк оно сохраняет настройки браузера по умолчанию. Если в HTML документе присутствуют символ новой строки или тег <br>, они сохраняются при выводе в окне браузера:

element {
  white-space: pre-line;   
}


Посмотрите демо-версию на CodePen для значений pre, pre-wrap и pre-line.

Значение nowrap

Если для вашего дизайна требуется, чтобы часть встроенного контента никогда не переносилась, тогда вам нужно использовать white-space: nowrap;.

Следующие случаи использования этого значения:


На рисунке, приведенном выше, изображена ссылка, за которой следует символ ». В этом случае вам определенно не хотелось, чтобы при переносе символов на новую строку вы получили картину, приведенную на рисунке ниже:


В подобных случаях (думаю, для иконок, например), использовать значение nowrap очень удобно.

Также свойство white-space может быть применено к любому встроенному контенту, в том числе к изображениям.

Иногда оно используется со значением nowrap, чтобы создать горизонтальный список изображений в прокручиваемом элементе, предотвращая перенос изображений и делая так, чтобы они отображались одной строкой внутри контейнера.


Я пошла еще дальше в этом направлении и создала стандартную JQuery-карусель, используя white-space: nowrap. Ниже приводится ее демо-версия:

Посмотреть демо-версию

Контроль над разрывами строк внутри слов

Иногда одно длинное слово не может быть обернуто в контейнер одной строки и выходит за рамки своего контейнера. Длинные URL-адреса или длинные слова в комментариях в блоге, например.

Следующие свойства предназначены для переноса длинных слов c помощью CSS.

Свойство word-wrap/overflow-wrap

Свойство word-wrap (ранее называлось overflow-wrap, полностью поддерживается и работает во всех основных браузерах, как устаревшее) вступает в силу, если свойство white-space позволяет перенос текста. Оно может принимать одно из двух значений: normal или break-word.

При использовании значения normal слова будут разрываться в указанных точках разрыва, например, пробелы, дефисы и т.д.

Значение break-word разрешает разрывать слова в произвольных местах, если слово не может быть разорвано и перенесено в установленных точках разрыва.

На рисунке ниже показан вывод длинного слова, которое выходит за границы контейнера:


Давайте установим свойство overflow-wrap, а также, чтобы все работало корректно, свойство word-wrap и зададим для них значение break-word:

element {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

В этом случае длинное слово разбивается на несколько строк, чтобы соответствовать размерам окна просмотра:

Свойство hyphens

Разбивка длинных слов — это хорошо. Но в результате у нас может получиться искаженный текст, смысл которого вводит читателей в заблуждение. Лучшим вариантом является добавление дефисов в тех местах, где слово переносится на следующую строку. Таким образом, читателям сразу становится понятно, что они видят одно слово, перенесенное на другую строку. Для этого CSS предлагает свойство hyphens, которое вы можете использовать в сочетании с word-wrap: break-word.

Значение auto для свойства hyphens позволяет выводить дефисы в местах, где слова были перенесены на следующую строку, если правила языка документа позволяют это или переносы присутствует в HTML-источнике. Чтобы это работало, убедитесь, что вы установили в HTML-документе атрибут lang для соответствующего языка:

.break-word.hyphens-auto {
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}


Вы также можете запретить перенос слов в CSS в и вывод символа дефиса. Для этого установите для свойства hyphens значение none:

.break-word.hyphens-none {
  -moz-hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}


Также вы можете вывести дефисы в местах разрыва строк внутри слов, если дефисы указаны внутри слов и текст переносится на следующую строку. Это делается с помощью значения manual:

.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 и letter-spacing, которые позволяют задавать расстояние между словами и буквами соответственно.

Свойство word-spacing

Ниже приведены значения для свойства word-spacing:

  • normal;
  • <length>;
  • Percentage.

normal выводит пробелы между буквами по умолчанию. Конкретное значение зависит от используемого шрифта или браузера:

.normal {
  word-spacing: normal;
}

<length> позволяет увеличить расстояние между словами в дополнение к значению интервала по умолчанию, определенному для шрифта или браузера:

.length {
  word-spacing: 0.5em;
}

percentage работает так же, как <length>, но с использованием не абсолютных значений, а процентов. Существует вероятность, что оно будет удалено из следующих версий спецификации CSS:

.percentage {
  word-spacing: 1%;
}

Свойство letter-spacing

Вы можете задать для свойства letter-spacing одно из двух значений: normal или <length>.

При использовании значения normal расстояние между буквами остается по умолчанию для данного шрифта. В этом случае любые расстояния между буквами, заданные ранее с помощью свойства letter-spacing, сбрасываются к своим значениям по умолчанию. Например, если для родительского элемента вы указали значение letter-spacing в 1em, но хотите, чтобы для дочерних элементов использовалось значение по умолчанию, это можно сделать с помощью значения norma:

element {
  letter-spacing: normal;
}


<length> позволяет задавать значение в единицах измерения, например пикселях или em. На это значение будет увеличен интервал между буквами в дополнение к интервалу по умолчанию:

element {
  letter-spacing: 1em;
}

Дополнительная информация

Свойство word-spacing применимо не только к словам. Вы можете использовать его для любого встроенного или блокового контента.

Также вы можете создавать кинетическую типографику на основе свойств word-spacing и letter-spacing. Но при использовании переходов CSS для свойства letter-spacing выяснилось, что значение normal не распознается текущей версии Firefox (V.39). Чтобы исправить это, замените normal на 0em.

Ниже приводится демо-версия анимированного текста с использованием word-spacing и letter-spacing:

Посмотреть демо- версию

Последние свойства CSS для выравнивания текста

Свойство text-align задает, как встроенный контент, такой как текст и изображения, выравнивается внутри блока контейнера. Значения left и right выравнивают встроенный контент по левому и правому краю соответственно. Установив для text-align значение center, вы выровняете контент по центру контейнера. Значение justify задает равномерное распределение контента таким образом, чтобы все строки имели одинаковую длину (за исключением последней строки, если она недостаточно длинна, чтобы достичь края контейнера).

В спецификацию CSS были введены два новых значения, которые могут быть весьма полезны для сайтов на языках, использующих систему письма справа-налево (RTL): start и end.

Для системы слева-направо (LTR), они соответствуют значениям left и right. Если сайт использует язык RTL, значение start соответствует right, значение end соответствует left:

element {
  text-align: start;
}
[IMG=http://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2015/08/1440461375alignment-start.jpg]
element {
  text-align: end;
}


Применение text-align: match-parent для встроенного дочернего элемента обеспечивает, чтобы дочерний элемент наследовал тот же тип выравнивания, что и родительский элемент. Наследование значений start или end вычисляется по направлению написания языка родительского элемента и дает в результате либо left, либо right.

Свойство text-align-last

Также в CSS появилось новое свойство text-align-last. Оно задает выравнивание последней перед концом абзаца или тегом <br> строки распределенного по ширине текста. Данное свойство принимает те же значения, что и свойство text-align, за исключением значения auto, которое является значением по умолчанию. Оно позволяет выровнять последнюю строку текста в соответствии со значением свойства text-align, если оно задано. Если нет, применяется свойство text-align со значением по умолчанию start.

На момент написания данной статьи, свойство text-align-last поддерживалось браузерами довольно слабо. Поэтому лучше не использовать его вообще.


Посмотреть демо-версию, иллюстрирующую данное свойство в действии

Отступы текста

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

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


Для красной строки в CSS существует свойство text-indent. Давайте рассмотрим его возможные значения.

Значение length обычно задается в пикселях или em:

element {
  text-indent: 2em;
}
 Или в процентах:
element {
  text-indent: 6%;
}

Значение each-line задает отступ красной строки с помощью CSS для первой строки внутри блока контейнера, а также для каждой строки после принудительного разрыва строки, созданного с помощью нажатия клавиши enter или добавления тега <br>.

Однако отступ не применяется для каждой первой строки после разрыва с переносом, то есть переноса текста на новую строку, если он выходит за пределы контейнера.

Значение hanging задает вывод всех строк, кроме первой, с отступом.

Значения each-line и hanging являются экспериментальными, и на момент написания статьи не реализованы ни в одном браузере.

Посмотреть демо-версию, иллюстрирующую свойство text-indent в действии

Заключение

В этой статье я подробно рассмотрела ряд свойств CSS, которые позволяют контролировать форматирование, переносы строк и выравнивание текста. Попробуйте поэкспериментировать с ними с помощью демо-версий.

С нетерпением жду ваших отзывов!

Данная публикация представляет собой перевод статьи «CSS Properties to Control Web Typography» , подготовленной дружной командой проекта Интернет-технологии.ру