CSS-текст (часть 2)

css-probely

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

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

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

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

word-spacing
Значения:
normal Значение по умолчанию, равное 0.25em.
длина Значение устанавливается в единицах длины — px, em. Принимает как положительные, так и отрицательные значения, увеличивая или уменьшая расстояние между словами.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

p {word-spacing: normal;}
p {word-spacing: 2px;}
word-spacing
Рис. 1. Расстояние между словами

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

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

letter-spacing
Значения:
normal Значение по умолчанию, не добавляет дополнительное пространство между буквами и символами.
длина Значение задаётся в единицах длины, положительные значения увеличивают промежутки между буквами и символами, отрицательные — уменьшают.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

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

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

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

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

Работает только для элементов <textarea> и <pre>, для остальных блочных элементов значение всегда будет равно единице. Значения свойства, указанные в единицах длины, поддерживается только в Chrome 42+.

tab-size
Значения:
целое число Любое целое положительное число. По умолчанию табуляция делает отступ, равный восьми пробелам.
длина Значение отступа, указываемое в единицах длины, например, рх.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

pre {-moz-tab-size: 16;} /* Firefox */
pre {-o-tab-size: 16;} /* Opera 10.6-12.1 */
pre {tab-size: 16;}
  • Алексей

    https://jsfiddle.net/Launder/gmg3u1tL/2/

    Когда разбирался сделал такую заготовку, с комментариями, может кому пригодится 🙂

    • Алексей, спасибо за подробный эксперимент. От себя хочу добавить:
      1) размер шрифта характеризуется кеглем (размер буквы или знака по вертикали, включающий её нижние и верхние выносные элементы)
      2) на практике разные браузеры могут применять для области отрисовки кегельную площадку (кегль) или максимальный вынос верхнего и нижнего выносных элементов шрифта, поэтому верхнее и нижнее поле может быть разным.

  • evg1401

    Добрый день, в таблице со свойством letter-spacing в описании значения normal есть смысловая ошибка: в последнем слове предложения, я думаю уместнее будет поправить на слово ‘буквами’. И далее по таблице то же несоответствие.