Имитация символа с помощью CSS-свойств

Разберём вариант с нижней границей border-bottom для символа Р.

<p style="font-size: 1em">Раки по 5 <span class="rub">Р</span></p><p style="font-size: 2em">Раки по 10 <span class="rub">Р</span></p><p style="font-size: 3em">Раки по 15 <span class="rub">Р</span></p>.rub { display: inline-block; width: 0.4em; border-bottom: 1px solid #000000; line-height: 5px;}

Имитация символа рубля с помощью CSS-свойства border-bottom

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

CSS-свойство перечёркнутого текста text-decoration: line-through также даёт не лучший результат.

<p style="font-size: 1em">Раки по 5 <span class="rub line-through">p</span><span class="dot">уб.</span></p><p style="font-size: 2em">Раки по 10 <span class="rub line-through">p</span><span class="dot">уб.</span></p><p style="font-size: 3em">Раки по 15 <span class="rub line-through">p</span><span class="dot">уб.</span></p>.rub { text-transform: uppercase;}.line-through { text-decoration: line-through;}.dot { position: absolute; text-indent: -1000em;}

Имитация символа с помощью CSS-свойства text-decoration: line-through

Результат этого способа в некоторых браузерах ужасен (MSIE). Существующие на данный момент средства CSS не дают нам возможности свободно управлять положением горизонтальной линии.

 

Дополнительная теория~ 4 минуты

Глава 8.16. Буквицы и красная строка

Буквицы

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

Базовая линия буквицы обычно находится ниже (иногда — существенно) базовой линии первой строки текста. Тогда ей обычно приписывают float и отступы.

Антипаттерны

Не стоит делать буквицы картинками, по крайней мере напрямую. Это делается за счёт написания первого слова без первой буквы, что ведёт к целой куче проблем: нельзя изменить начертание для мобильных устройств, индексация, ридеры и «версии для слабовидящих» будут воспринимать текст неверно и так далее.

Самый понятный, специально придуманный инструмент для работы с буквицей в CSS — псевдоэлемент::first-letter. Он позволяет сделать буквицей каждую первую букву каждого абзаца. Как вы понимаете, это может смотреться гротескно. Особенно, если сделать буквы ещё крупнее и, возможно, применить какой-нибудь изощрённый шрифт.

Сделали буквицы в начале каждого абзаца

p::first-letter { float: left; margin-right: 2px; font-weight: 800; font-size: 54px; line-height: 1em; color: #ff6b00;}

Кроме того, псевдоэлемент::first-letter может примениться к тем объектам, которые вы не учли: изображениям, встроенным перед текстом, или к другим строчным объектам, или к контенту, внедрённому с помощью псевдоэлемента::before.

Другой подход — заворачивать в <span> с классом те буквы, которые будут крупнее. Или делать буквицы только у лидов.

Буквица сделана только для лида

article { max-width: 800px; padding: 30px; font-family: "Montserrat", "Arial", sans-serif; font-size: 16px; line-height: 28px;}.leading-paragraph { font-size: 24px; line-height: 32px; font-style: italic;}.leading-paragraph::first-letter { float: left; margin-right: 4px; font-size: 54px; line-height: 0.3em; font-weight: 600; color: #ff6b00;}

Или можно использовать в селекторах «фильтрующие» псевдоклассы, например,:first-of-type.

Буквица сделана только для первого абзаца с помощью псевдокласса:first-of-type

p:first-of-type::first-letter { float: left; margin-right: 4px; font-family: "Kelly Slab", "Arial", cursive; font-size: 54px; line-height: 56px; color: #ff6b00;}

Красная строка

Красная строка задаётся свойством text-indent, значения могут быть положительные или отрицательные, абсолютные и относительные. Лучше всего выглядит при выравнивании текста по ширине.

Материал выровняли по ширине, у первой строки обратный отступ

article { padding: 0 50px; text-align: justify;} p:first-of-type { text-indent: -2em;}

Красная строка, как и буквица, — это очень специфический для веба элемент дизайна. Применяется редко, подразумевается как претензия на оригинальность, не применяется вместе с другими декоративными элементами.

Для стилизации первой строки можно использовать псевдоэлемент::first-line:

Выделена первая строка каждого абзаца

article { color: #000000;} p::first-line { background-color: #ff7931; color: #ffffff;}

К сожалению, стилизация псевдоэлемента::first-line ограничена: можно менять только параметры шрифта, фона и цвет теста.

 

Дополнительная теория~ 10 минут