Компоновка текста

основные правила размещения и свойства

Hands on the orange typewriter in a park

Компоновка строки

Отступы text-indent
Горизонтальное выравнивание text-align
Вертикальное выравнивание vertical-align
Расстояние между словами word-spacing
Расстояние между буквами letter-spacing
Обработка пробелов white-space
Преобразование текста text-transform
Оформление текста text-decoration
Затенение текста text-shadow
Перенос текста

Отступ в первой строке абзаца:

абзацный отступ или "красная строка"

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum odit voluptas velit fuga, amet, dicta. Eos error fuga, sint facere voluptate veniam dolorum.

			p {  
			    text-indent: 40px;  /* отступ */
			    text-align: justify;
			}

Отступ в первой строке абзаца:

"выступ"

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum odit voluptas velit fuga, amet, dicta. Eos error fuga, sint facere voluptate veniam dolorum.

			p {  
			    text-indent: -20px;  /* отрицательный отступ */
			    padding-left: 30px;  /* отступ */
			    text-align: justify;
			}

Отступ в первой строке абзаца:

наследование: div { text-indent: 40px; column-count: 2; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse.

Горизонтальное выравнивание

text-align: left || right || justify || center

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium omnis architecto quisquam harum laboriosam quam, minus! Autem dolore magnam incidunt ad consequuntur, rem distinctio, maiores quo reprehenderit ipsam. Quis, aspernatur!

Вертикальное выравнивание

Межстрочный интервал = font-size + line-height.

базовая линия задается наибольшим шрифтом

Вертикальное выравнивание

Расчет межстрочного интервала:

line-height: 64px

font-size: 50px

64px-50px // 14px / 2 = 7px сверху и снизу

36px-50px // -14px / 2 = -7px сверху и снизу

line-height: 36px

font-size: 50px

Вертикальное выравнивание

Строка с текстом формируется так-же как inline-block:

глиф(визуальный символ) формирует content area
content area формирует inline box
line-height - это аналог padding-top и padding-bottom (top == bottom)
base-line - также линия выравнивания по умолчанию, которую можно заменить на
top, text-top, bottom, middle, sub, super, text-bottom.

Вертикальное выравнивание

vertical-align: top

top Выравнивает верх inline-block по верхней границе содержащего его контейнера строки

Вертикальное выравнивание

vertical-align: bottom

bottomВыравнивает низ inline-block по нижней границе содержащего его контейнера строки.

Вертикальное выравнивание

vertical-align: middle

middle Совмещает середину вертикали строкового блока элемента с половиной высоты буквы x (или половину высоты элемента).

Вертикальное выравнивание

vertical-align: text-top

text-top Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки. Наиболее высокий элемент находится на нижней линии строкового блока.

Вертикальное выравнивание

vertical-align: text-bottom

text-bottom Нижняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки. Наиболее высокий элемент находится на верхней линии строкового блока.

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

word-spacing: normal || inherit || любое числовое значение

word - это любая строка, не содержащая символов разделителей и ограниченная такими символами с обеих сторон.

зависит от text-align: justify; - word-spacing может быть изменено этим свойством.

normal соотвествует значению 0
1rem увеличивает расстояние
-0.3rem уменьшает расстояние

наследуется вычисленное значение, а не коффициент.

Расстояния между буквами

letter-spacing: normal || inherit || любое числовое значение

зависит от text-align: justify; только если word-spacing: normal может быть изменено этим свойством.

normal соотвествует значению 0
0.5rem увеличивает расстояние
-0.08rem уменьшает расстояние

наследуется вычисленное значение, а не коффициент.

Обработка пробелов

white-space: normal || nowrap || pre || pre-wrap || pre-line ||

normal пробелы игнорируются, перенос строк обрабатывается, автоматический перенос строк разрешен
nowrap перенос строк игнорируются, автоматический перенос строк запрещен
pre пробелы сохраняются, автоматический перенос строк запрещен
pre-wrap пробелы сохраняются,
pre-line перенос строк игнорируются

Преобразование текста

text-transform: none || uppercase || lowercase || capitalize || inherit

none Преобразование текста
uppercase преобразование текста
lowercase преобразование текста
capitalize преобразование текста

наследуется - заданное значение, для изменения необходимо переопределить.

Оформление текста

text-decoration: none || underline || overline || linethrough || blink || inherit

none Оформление текста
underline solid green
overline dotted red
parent {text-transform: line-through dashed; color: blue;} child: {color: red;} /* цвет parent передается линии, цвет линии child не изменился*/
blink Оформление текста

не наследуется но применяется ко всему блоку.

Затенение текста

text-shadow: смещение X | смещение Y | радиус размытия тени | цвет

text-shadow: 5px 0 0 hsla(0, 0%, 0%, 0.5)
text-shadow: 0 5px 0 hsla(0, 0%, 0%, 0.5)
text-shadow: 0 0 5px hsla(0, 0%, 0%, 0.5)
text-shadow: 5px 5px 5px hsla(0, 0%, 0%, 0.5)
text-shadow: -2px 2px 0px hsla(0, 0%, 100%, 0.5),
-4px 4px 0px hsla(0, 0%, 100%, 0.2);

наследуется - заданное значение, для изменения необходимо переопределить.

Перенос текста. HTML

<br> перенос текста // всегда

<wbr> перенос текста // на усмотрение браузера без дефиса

 перенос текста // на усмотрение браузера c дефисом

не наследуется

Перенос текста. CSS

word-break:
- break-all // перенос символов букв и цифр
- keep-all
- break-word // перенос слов
overflow-wrap: break-word
hyphens:
- manual
- auto

Примеры

не наследуется

Спасибо за внимание!

В типографике еще много интересного!