›

Межсимвольный, межстрочный интервал CSS. Расстояние между словами. Расстояние между буквами и словами: свойство 'letter-spacing' и 'word-spacing'

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

Краткая информация

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#
×

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Наилучший результат даёт использование относительных единиц, основанных на размере шрифта (em и ex).

Normal Задаёт интервал между символами как обычно.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div { letter-spacing: 0 ; }

Пример

letter-spacing

Кульминация, после осторожного анализа, существенно перечеркивает экваториальный большой круг небесной сферы, как это случилось в 1994 году с кометой Шумейкеpов-Леви 9.

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства letter-spacing

Объектная модель

Объект .style.letterSpacing

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации ) - первая черновая версия стандарта.
×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Расстояние между буквами и словами: свойство "letter-spacing" и "word-spacing"

"letter-spacing"

Значение: normal | | inherit
Начальное значение: normal
Наследование: да
Процентное значение: не используется
Устройства: визуальные

Это свойство определяет расположение символов в тексте. Значения имеют следующий смысл:

normal

Стандартное расстояние для текущего шрифта. Это значение позволяет агентам пользователей менять расстояние между символами для выравнивания текста.


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

Алгоритмы определения расстояния между символами зависят от агента пользователя. На расстояние между символами также может повлиять выравнивание по обоим краям (см. свойство "text-align").

В данном примере расстояние между символами в элементах BLOCKQUOTE увеличено на "0.1em".

BLOCKQUOTE { letter-spacing: 0.1em }

В следующем примере агенту пользователя запрещено изменять расстояние между символами:
BLOCKQUOTE { letter-spacing: 0cm } /* Same as "0" */

Если итоговое расстояние между двумя символами отлично от стандартного, агенты пользователей не должны использовать лигатуры.

Конформные агенты пользователей могут трактовать значение свойства "letter-spacing" как "normal".

"word-spacing"

Значение: normal | | inherit
Начальное значение: normal
Область применения: все элементы
Наследование: да
Процентное значение: N/A
Устройства: визуальные

Это свойство определяет расстояние между словами. Значения имеют следующий смысл:

normal

Стандартное расстояние между словами, определяемое текущим шрифтом и/или агентом пользователя.


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

Алгоритм определения расстояния между словами зависит от параметров, указанных агентом пользователя. На расстояние между словами также влияет выравнивание по обоим краям (см. свойство "text-align").

В данном примере расстояние между всеми словами в элементе H1 увеличивается на "1em".

H1 { word-spacing: 1em }

Конформные агенты пользователей могут трактовать значение свойства "word-spacing" как "normal".

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


1. Гарнитура.
Большая итальянская семья

Гарнитуру часто путают со шрифтом, но это не одно и то же. Дабы понять разницу между ними, непосвященному в тонкости типографики читателю рекомендуем запомнить простую ассоциацию из детства: гарнитур. В смысле «набор мебели», где ключевое слово — «набор». Гарнитура — это набор группы шрифтов; семья шрифтов с общими стилистическими особенностями.

Классификаций гарнитур множество, самая общая — антиква, гротески, рукописные, акцидентные и тд. Существует великое множество гарнитур, обладающих собственным именем, произошедшим от эпохи создания (Таймс), от имени создателя (Гарамон), национальной принадлежности (Голландер) или какой-то технической особенности (Компакт). Фактически, это фамилия семьи.

2. Шрифт.
Буква с характером

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


3. Кегль.
Размер имеет значение

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


4. Интерлиньяж.
Читайте между строк

Красивое французское слово «интерлинья́ж» (от фр. interligne), похожее на конфеты «грильяж», переводится дословно как «написанное между строк» и означает расстояние между двумя строками. Обычно принято устанавливать интерлиньяж на 1/5 часть больше кегля — так, при наборе 10-м кеглем интерлиньяж составляет 12 пунктов. В художественных целях интерлиньяж может быть увеличен или уменьшен, но поскольку от него зависит читаемость текста, то небольшой интерлиньяж применяется нечасто — максимум, в заголовках.




5. Кернинг.
Профессиональный сводник

Кернинг (англ. kerning) — это интервал между двумя буквами в зависимости от их формы. Например, если в заголовке или логотипе рядом находятся две буквы со сложным характером — с сильно выступающими элементами, образующие слишком большое расстояние между ними, то рационально их немного сблизить, чтобы визуальная плотность была равномерной. Кернинг предусматривает, что в программу верстки заложен автоподбор расстояния между конкретными парами букв, как например AV, TA. Кернинг бывает как положительным (когда знаки раздвигаются), так и отрицательным, если знаки приближаются друг к другу.

6. Трекинг.
Извини, подвинься.

Трекинг (от англ. tracking) — родной брат кернинга; но если кернинг сводит между собой определенные пары букв, то трекинг отвечает за дистанцию между буквами в целых строках, предложениях и абзацах. Трекинг — это изменение межбуквенных пробелов с определенной целью: сделать текст более разреженным и светлым, или более плотным и темным. Еще трекинг используется при верстке, чтобы увеличить или уменьшить количество строк, дабы избавиться от висячих предлогов, слов и строк. Хорошим тоном является числовое значение трекинга, не превышающее +/- 25.

7. Висячая строка.
Одинокий отщепенец

Висячая строка — это строка, которая оторвана от своего абзаца и «висит» в одиночестве на предыдущей или последующей странице. Дизайнерам и верстальщикам, стремящимся в прямоугольному совершенству полосы, она режет глаз и оскорбляет чувство прекрасного; кроме того, это ухудшает восприятие печатного текста. Висячай строка — отщепенец в типографском обществе и вышеупомянутый трекинг как раз-таки всячески с этим отщепенством борется.



8. Графема.
Бит информации

Графема (от греч: γράφω — пишу) — это единица письменной речи. Проще говоря — буква, если письменность строится на алфавите, или иероглиф/слоговый знак — в неалфавитных системах письма типа японской. Графема — уникальный паззл, из которого построен алфавит. Вы никогда не спутаете графему буквы «А» с графемой буквы «Б» — ну кроме тех случаев, конечно, когда они написаны неразборчивым «почерком врача».



9. Глиф.
Знаковая вещь

Если графема — это буква, то глиф — ее написание.

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



10. Строчные буквы.
Дети

Строчные буквы — это обычные маленькие буквы в строке, которыми мы пишем все, кроме собственных имен, имен наших друзей и прочих Имен Собственных. Например, буква «а» — строчная, а «А» — заглавная (прописная). Строчные буквы используются в некоторых европейских алфавитах (греческом, латинском, кириллице и армянском), в некоторых алфавитах (в грузинском, иврите) разделения на прописные и строчные буквы нет вообще.


11. Прописные буквы.
Взрослые

Если строчные буквы — это детвора, то прописные буквы — это взрослые, с которых, например, начинаются предложения. Часто такая взрослая буква обладает другой графемой, то есть, как и положено взрослым, выглядит немного по-другому. Очень большая и очень расфуфыренная первая буква в начале текста называется «буквица» (или «инициал»).



12. Капитель.
Подростки

Капитель - это вариант прописных букв уменьшенного роста и чуть расширенных пропорций, несколько выше роста строчных. Если строчные буквы — это дети, а прописные — это взрослые, то «капитель» — это подростки: немного уменьшенная в размерах копия «взрослых» прописных букв. Капитель часто используется для заголовков — чтобы разнообразить типографику, если в работе участвует всего одна гарнитура.



13. Выключка.
Равнение налево!

Выключка — это ни что иное, как выравнивание текста; способ расположения неполной строки относительно вертикальных границ полосы набора. Выключка бывает влево, вправо, по центру и по формату (то есть по ширине).

14. Леттеринг.
Модное увлечение

Леттеринг (от англ: letter — буква) это графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему; проще говоря — созданная шрифтовая композиция. Леттеринг нынче очень в моде: каждый день мы расшариваем огромное количество мотиваторов, выполненных леттерингом. Например, эта:



15. Полоса.
Полезная площадь

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


Проверить же свои типографические знания вы можете с помощью

Работая со стилем для текста, вы можете устанавливать необходимые расстояния между символами, словами и строками. Задаются такие расстояния в любых единицах измерения CSS, будь-то px , pt , em или другое. Исключением являются проценты – с их помощью можно задать расстояние между строками (интерлиньяж), но они не работают при установке интервала между символами или словами.

Межсимвольный интервал CSS: letter-spacing

Задать межсимвольный интервал можно с помощью свойства CSS letter-spacing. Помимо обычных значений (положительных и отрицательных) также можно использовать значения inherit (чтобы наследовать значение у родителя) и normal (если необходимо вернуть нормальное расстояние между символами).

Пример записи межсимвольного интервала:

P { letter-spacing: 2em; }

Интервал между словами: word-spacing

Свойство CSS word-spacing отличается от предыдущего тем, что устанавливает расстояние между словами, а не между символами. Для данного свойства тоже предусмотрены значения normal и inherit . Можно задавать отрицательные значения. Ниже показан пример записи стиля:

P { word-spacing: 6px; }

Межстрочный интервал: line-height

С помощью свойства CSS line-height можно задавать расстояние между строками текста. Как было сказано в начале темы, для установки интерлиньяжа, помимо других единиц измерения, допускается использовать проценты. Также разрешено записывать значение в виде множителя (числа больше 0): для вычисления расстояния браузер умножит размер шрифта на заданное число. Отрицательные значения не работают. Доступны значения normal и inherit .

Ниже – пример, как сделать межстрочный интервал CSS:

P { line-height: 180%; }

На скриншоте можно увидеть, как выглядит текст со всеми тремя свойствами:

Скриншот: интервалы в CSS

Итоги

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

Обработка пробелов между буквами и словами

1. Расстояние между словами word-spacing

Устанавливает интервалы между словами. Можно использовать положительные и отрицательные значения. При отрицательном значении слова могут накладываться друг на друга.

На значение word-spacing оказывает влияние значение свойства text-align в случае выравнивания текста по ширине. Наследуется.

Синтаксис

P {word-spacing: normal;} p {word-spacing: 2px;}

Рис. 1. Расстояние между словами

2. Расстояние между буквами letter-spacing

Свойство устанавливает расстояние между буквами (величину трекинга) и символами. Может принимать положительные и отрицательные значения. Целесообразно применять для повышения выразительности и читаемости заголовков, определений и пр. Наследуется.

Синтаксис

P {letter-spacing: normal;} p {letter-spacing: 2px;}

Рис. 2. Изменение расстояния между буквами с помощью свойства letter-spacing

3. Обработка пробелов white-space

Свойство обрабатывает пробелы между словами и переносы строк внутри элемента. Не наследуется.

white-space
Значения:
normal Значение по умолчанию. Между словами вставляется только по одному пробелу, дополнительные пробелы отбрасываются. Текст переносится только в случае необходимости.
nowrap Запрещает переносы строк, за исключением применения
.
pre Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и переносы строк.
pre-wrap Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо.
pre-line Удаляет лишние пробелы, за исключением случаев
.
initial
inherit

Синтаксис

P {white-space: normal;} p {white-space: nowrap;} p {white-space: pre;} p {white-space: pre-wrap;} p {white-space: pre-line;}

4. Настройка табуляции tab-size

Для изменения величины отступа, получаемого с помощью клавиши ТAB, используется свойство tab-size . Значения свойства игнорируются, когда установлено одно из трёх значений pre-line , normal или nowrap свойства white-space .

Работает только для элементов