Свойства 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;}

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

Значение uppercase

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

HTML:

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

CSS:

h2 { text-transform: uppercase;}
Свойства CSS для управления веб-типографикой

Значение lowercase

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

HTML:

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

CSS:

h2 { text-transform: lowercase;}
Свойства CSS для управления веб-типографикой

Значение full-width

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

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

HTML:

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

CSS:

h2 { text-transform: full-width;}

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

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

Ещё пару замечаний

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

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

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

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

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

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

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

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

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

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

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

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

Значение pre

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

element { white-space: pre; }

Свойства CSS для управления веб-типографикой
Свойства CSS для управления веб-типографикой Если вы используете табуляцию, чтобы создать пустые диапазоны, вы можете задавать их размер при помощи свойства 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; }

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

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

Значение pre-line

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

element { white-space: pre-line; }

Свойства CSS для управления веб-типографикой
Свойства CSS для управления веб-типографикой Посмотрите демо-версию на CodePen для значений pre, pre-wrap и pre-line.

Значение nowrap

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

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

Свойства CSS для управления веб-типографикой На рисунке, приведенном выше, изображена ссылка, за которой следует символ » . В этом случае вам определенно не хотелось, чтобы при переносе символов на новую строку вы получили картину, приведенную на рисунке ниже:
Свойства CSS для управления веб-типографикой В подобных случаях (думаю, для иконок, например), использовать значение 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 разрешает разрывать слова в произвольных местах, если слово не может быть разорвано и перенесено в установленных точках разрыва.

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

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

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

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

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

Свойство 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 для управления веб-типографикой
Вы также можете без проблем запретить перенос слов в CSS в и отображение символа дефиса. Для этого установите для свойства hyphens значение none :

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

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

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

Свойства CSS для управления веб-типографикой
Свойства CSS для управления веб-типографикой
Благодаря вендорным префиксам, свойство 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%;}
Свойства CSS для управления веб-типографикой

Свойство letter-spacing

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

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

element {  letter-spacing: normal;}

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

element {  letter-spacing: 1em;}
Свойства CSS для управления веб-типографикой

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

Свойство 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;}

Свойства CSS для управления веб-типографикой
Применение 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 для управления веб-типографикой
Для красной строки в 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 , которые могут контролировать форматирование, переносы строк и выравнивание текста. Попробуйте поэкспериментировать с ними при помощи демо-версий.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *