В прошлом совете я рассказал об управлении кеглем, интерлиньяжем, выключкой и регистром. Сегодня расскажу об управлении красной строкой, буквицей и выделением.
Красная строка
В ЦСС отступ красной строки, втяжка абзаца, задаётся свойством text-indent. Его значения могут быть фиксированными, например, в пикселях или относительными, например, в процентах или em:
article p {
/* Задаём абзацный отступ в круглую:
1em — ширина тире в шрифте */
text-indent: 1em;
}
article h1 + p,
article h2 + p,
article h3 + p,
article p:first-child {
/* У абзацев, стоящих первыми или сразу после заголовков
и подзаголовков, абзацный отступ избыточен:
можно его обнулить */
text-indent: 0;
}
Стили оформления абзацев
На сегодняшний день существуют два приемлемых стиля оформления абзацев на бумаге. Классический, с абзацным отступом, подходящий для книг и спокойного чтения, хорошо сочетающийся с полной выключкой.
И «швейцарский», со слепой строкой, подходящий для повседневных современных документов, прекрасно живущий в ортогональной многоколоночной сетке и флаговом наборе.
В вебе стиль абзацев с пустой строкой прижился сразу, хотя в самом первом графическом браузере использовался комбинированный стиль.
На экране читать тяжелее, поэтому дополнительное разбиение пустой строкой помогает глазу. А эксперименты с абзацным отступом на сайтах, как правило, выглядят натужно и неудачно. Особенно с автоматической выключкой по ширине.
Буквица, первая строка и выделение
Для управления первой буквой, первой строкой и выделением текста используют псевдоэлементы — «виртуальные» кусочки текста, которые можно использовать в ЦСС, не добавляя лишнюю разметку. Первой букве текста соответствует псевдоэлемент ::first-letter, первой строке — ::first-line, выделению — ::selection:
article h1 + p::first-line {
/* Первую строку набираем прописными,
как это принято в художественной литературе */
text-transform: uppercase;
}
article h1 + p::first-letter {
/* Настраиваем буквицу: задаём обтекание текстом */
float: left;
/* Увеличиваем кегль и уменьшаем интерлиньяж так,
чтобы он не взрывал интерлиньяж абзаца */
font-size: 3em;
line-height: .5;
/* Двигаем ближе к тексту, чтобы занять ровно 2 строки */
margin-top: .25em;
}
article *::selection {
/* Меняем цвет и фон выделенного текста */
background-color: pink;
color: #fff;
}Sometimes, layout designer controls the volume of text by limiting the length of subheads, quotes, sidebars, and other special elements. But often text is given as is, and layout designer works only with its shape.
Интересный момент: псевдоэлементы ограничены здравым смыслом в свойствах, которые можно в них поменять. Например, в ::selection можно менять цвет, фон, тень и подчеркивание‑зачеркивание текста, но изменить шрифт, кегль или интерлиньяж не получится. А в ::first-line можно менять шрифт, кегль, интерлиньяж, цвет, фон и даже расстояние между буквами и словами, но поменять расположение или добавить отступ не получится.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.