Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.
Краткая информация
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| 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 ; }
Пример
Кульминация, после осторожного анализа, существенно перечеркивает экваториальный большой круг небесной сферы, как это случилось в 1994 году с кометой Шумейкеpов-Леви 9.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства letter-spacing
Объектная модель
Объект .style.letterSpacing
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Выравнивание по заданному расстоянию
Рассмотрим вертикальное выравнивание на заданное расстояние. Свойство vertical align очень простое: оно перемещает элемент вверх или вниз на указанное расстояние. Таким образом, выражение verti cal align: 5px; сдвинет элемент вверх на пять пикселов относительно исходного положения. Отрицательные значения длины сдвигают эле мент вниз. Этой простой формы выравнивания не было в CSS1, но она добавлена в CSS2.
Важно понимать, что выровненный по вертикали текст не становится частью другой строки и не перекрывает текст других строк. Взгляните на рис. 6.18, где часть выровненного по вертикали текста находится в середине абзаца.
Как видите, любой вертикально выровненный элемент может влиять на высоту строки. Вспомним описание контейнера строки, высота ко торого именно такова, чтобы вместить верх самого высокого строково го блока и низ самого низкого строкового блока. Это касается и строко вых блоков, которые были сдвинуты вверх или вниз при вертикаль ном выравнивании.
Рис. 6.18. Вертикальное выравнивание может привести к увеличению высоты строк
Расстояние между буквами и словами
Покончив с выравниванием, обратимся к управлению расстояниями между словами и буквами. У этих свойств тоже есть своя специфика.
Расстояния между словами
Свойство word spacing допускает положительные или отрицательные значения длины. Это значение добавляется к стандартному расстоя нию между словами. В сущности, word spacing служит дляизменения расстояния между словами. Поэтому применяемое по умолчанию зна чение normal аналогично нулевому значению (0).
Если задать положительное значение длины, расстояние между слова ми увеличится. А если задать отрицательное значение для word spac ing, то слова сдвинутся ближе друг к другу:
174 Глава 6. Свойства текста
p.spread {word spacing: 0.5em;} p.tight {word spacing: 0.5em;} p.base {word spacing: normal;} p.norm {word spacing: 0;}
The spaces between words in this paragraph will be increased by 0.5em.
The spaces between words in this paragraph will be decreased by 0.5em.
The spaces between words in this paragraph will be normal.
Эффект, оказываемый этими настройками, показан на рис. 6.19.
Рис. 6.19. Изменение расстояния между словами
До сих пор я не дал точного определения термину «слово». В термино логии CSS «слово» – это любая строка, не содержащая символов разде лителей и ограниченная такими символами с обеих сторон. Это опреде ление не относится к семантике, оно просто предполагает, что доку мент содержит слова, окруженные одним или несколькими символа ми разделителями. Нельзя ожидать от поддерживающего CSS агента пользователя, что он сможет во всех случаях отличить слово от не сло ва в данном языке. Это определение, каким бы оно ни было, означает, что word spacing вряд ли будет работать в языках, основанных на пик тографии или на нероманских стилях написания. Это свойство позво ляет создавать совершенно нечитаемые документы, что ясно видно на рис. 6.20. Следует с осторожностью применять word spacing.
Рис. 6.20. Действительно большие расстояния между словами
Расстояние между буквами
Многие проблемы, встречающиеся при работе с word spacing, имеют место в случае применения letter spacing. Единственное отличие меж ду ними состоит в том, что свойство letter spacing изменяет расстоя ния между символами или буквами.
Как и для свойства word spacing, допустимым значением letter spacing является любая длина. По умолчанию указывается ключевое слово normal (что аналогично letter spacing: 0). Любое вводимое значение длины будет увеличивать или уменьшать расстояние между буквами на эту величину. На рис. 6.21 показаны результаты применения сле дующей разметки:
p {letter spacing: 0;} /* идентично "normal" */
p.spacious {letter spacing: 0.25em;} p.tight {letter spacing: 0.25em;}
The letters in this paragraph are spaced as normal.
The letters in this paragraph are spread out a bit.
The letters in this paragraph are a bit smashed together.
Рис. 6.21. Разные расстояния между буквами
Рис. 6.22. Применение свойства letter%spacing для увеличения выразительности выделенного текста
Применение letter spacing для повышения выразительности выделе ния – это методика, освященная временем. Можно было бы написать следующее объявление и получить эффект, показанный на рис. 6.22:
strong {letter spacing: 0.2em;}
This paragraph contains strongly emphasized text that is spread out for extra emphasis.
Расстояние между словами и буквами и выравнивание
На значение word spacing может оказывать влияние значение свойства text align. Если элемент выровнен по ширине, пробелы между буква ми и словами корректируются так, чтобы текст занимал всю строку. Это может в свою очередь изменить параметры, определяющие рас стояние между словами и буквами, объявленные автором в свойствах word spacing. Если задано значение letter spacing, оно не может быть изменено text align, но если letter spacing имеет значение normal, рас стояние между символами может меняться для обеспечения выравни вания текста по ширине. CSS не указывает, как должны вычисляться пробелы, поэтому агент пользователя просто создает их.
Дочерний элемент, как обычно, наследует вычисленное значение сво его родителя. Нельзя сделать так, чтобы вместо вычисленного значе ния свойств word spacing или letter spacing наследовался коэффициент масштабирования (как это происходит в случае с line height). В ре зультате можно столкнуться с проблемой, показанной на рис. 6.23:
p {letter spacing: 0.25em; font size: 20px;} small {font size: 50%;}
This spacious paragraph features tiny text that is just as spacious, even though the author probably wanted the spacing to be in proportion to the size of the text.
Рис. 6.23. Унаследованный пробел между буквами
Обработка пробелов между буквами и словами
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 .
Работает только для элементов