Создание заглавных букв с помощью CSS

CSS заглавные буквы помогают разбить монотонность однотипного дизайна, тексты которого выглядят одинаково от начала до конца.

Буквицы раньше и теперь

Летописцы использовали заглавные буквы в рукописях, которые писались от руки, некоторые из них относятся ещё к V веку. Прописные буквы продолжали использоваться с VIII по XV век, когда типографские станки позволили вывести печать на промышленный уровень. И рукописные, и печатные буквицы размещались в начале текста. Часто их украшали декоративным рисунком, который располагался вокруг буквы.

Поднятые и опущенные буквы все ещё используются в наши дни. Их можно без проблем встретить в газетах, журналах и книгах, а также в цифровой типографии. Поднятые литеры иногда называются вытянутыми. Они размещаются на одном уровне с нижней частью текста, который следует за ними. Опущенные буквы размещаются на одном уровне с верхней частью текста, иногда в слое позади основной части текстового контента, или остальной текст обтекает их.

Поднятые буквы задаются гораздо проще, так они находятся на одном уровне с остальным текстом, и обычно для этого не необходимо менять обтекание внешних полей ввода. Опущенные буквы требуют более тонкой параметра. Вам будет проще разобраться с данным, если сначала вы поймете, как обрабатываются поднятые литеры.

Использование классов

Дизайнеры, которые имеют представление о CSS, знают, что необходимо создать отдельный класс CSS для первой буквы заглавной.

Программный код CSS для элемента абзаца и класса, создающего букву, будет выглядеть следующим образом:

p { font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;}.myinitialcaps {font-size:48px; font-family: Didot;}

А HTML-код будет выглядеть так:

<p><span class="myinitialcaps">M</span>y initial cap is much bigger here and set in the Didot typeface.</p>

Что дает нам:

Создание заглавных букв при помощи CSS Кажется, слишком просто? Фактически вам придется вносить коррективы в зависимости от конкретных поднятых букв, поскольку каждая заглавная литера требует специального кернинга. После выбора шрифта для поднятых букв и для основного текста, необходимо создавать отдельные классы для каждой поднятой литеры. В приведенном ниже CSS-классе.myinitialcapsi поле ввода справа имеет в себя отрицательное значение, чтобы уменьшить расстояние между I и n.

.myinitialcapsi {font-size:48px; font-family: Didot; margin-right:-1px;}<p><span class="myinitialcaps">I</span>n this case, there&rsquo;s some extra space between the &ldquo;I&rdquo; and &ldquo;n.&rdquo;</p> <p><span class="myinitialcapsi">I</span>ncluding a new class with a negative margin pulls it closer.</p>

Создание заглавных букв при помощи CSS В зависимости от разрешения экрана в приведенном выше примере I и n могут выглядеть так, будто они слились вместе. Это происходит из-за засечек на концах букв. Так что, прежде чем выбирать окончательный вариант стилей CSS, протестируйте веб-сайт на разных устройствах, чтобы посмотреть, как на них выглядит текст заглавными буквами CSS.

Цитаты и иные частные случаи

Можно без труда увеличить не только буквы в начале текста. Вы можете реализовать ещё один класс, чтобы создать увеличенную версию кавычек, которые будут отображаться рядом с буквой. В нашем случае для кавычек не подходит ни класс буквы с размером 48, ни класс текста в 20 пикселей. Скорее, это будет что-то среднее — 30 пикселей. Кавычки мы подвинем вниз на 4 пикселя, чтобы оптически выровнять их с I:

.myinitialcapsq {font-size:30px; font-family: Didot; float:left; margin-top:4px;}<p><span class="myinitialcapsq">&ldquo;</span><span class="myinitialcapsi">I</span>ncluding&rdquo; a new class with a negative margin pulls it closer.</p>

Создание заглавных букв при помощи CSS Необходимо внимательно задавать каждую из CSS заглавных букв вместе с кавычками, чтобы их кернинг и выравнивание соответствовали окружающей разметке. К примеру, букву Т необходимо будет сместить влево, за край абзаца, чтобы ее поперечная линия визуально вписывалась в макет. Аналогично необходимо будет поступить и с круглыми буквами, такими как C, G, O и Q. В этом примере использованы размеры шрифтов 20, 30 и 48. Но вам необходимо будет подобрать размеры, исходя из специфики шрифтов, которые вы выбрали. А также размеров и разрешений экранов, на которых будет просматриваться веб-сайт.

Псевдоэлементы и псевдоклассы

При помощи псевдоэлемента CSS можно без проблем создать поднятую букву, добавив ::first-letter к элементу абзаца. Используйте :first-letter(с одним двоеточием) для устаревших браузеров:

p { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:1.2em;}p::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;}.initialb {margin-right:-0.1em;}.initialn {margin-right:-0.15em;}

HTML-код, который включает классы CSS, учитывающие кернинг букв N и B, будет выглядеть следующим образом…

<p>An inital letter, with the first letter being a capital letter.<br>With a line break, the next line has no initial cap.</p><p><span class="initialn">n</span>otice in the HTML source how the first letter, not a capital letter in the HTML, gets sized to the initial cap size of 3.6em. Neat, huh?</p><p><span class="initialb">B</span>ut with a hard return, and a new paragraph started, another initial cap always gets created. You might be asking yourself, <em>How am I going to account for this? Am I supposed to have an initial cap at the beginning of very new paragraph?</em> Well, you could. But, do you want it to look that way, and does it absolutely have to look that way?</p><p>В букву преобразовывается первая заглавная буква абзаца.<br>Первая буква после разрыва строки не будет преобразовываться в заглавную.</p><p><span class="initialn">о</span>Обратите внимание, что в исходном коде HTML первая буква не будет заглавной, но она преобразуется в литеру с размером 3.6em.</p><p><span class="initialb">О</span>Однако и после принудительного разрыва строки, ив начале каждого нового абзаца создается буква. Вы можете без проблем спросить себя: <em>Как мне учитывать это? Необходимо ли мне добавлять буквы для всех данных случаев?</em> Что ж, вы можете. Но надо ли это?</p>

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

Объединение псевдоклассов и псевдоэлементов для создания смарт-макета

Добавление псевдокласса :first-child помогает решить проблему ненужного преобразования первых букв:

p { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:0.5em;}p:first-child::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;}

Объединив этот код с HTML:

<p>Первая буква, которая определена, как first-child - это единственная буква которая преобразуется в поднятую буквицу при этом способе.</p><p>Поскольку преобразовывается только буква, определенная как first-child, обратите внимание, что этот пример отличается от предыдущего, без first-child. Кроме этого мы не преобразуем первые буквы после начала абзаца и после принудительного разрыва строки. Это выглядит более стильно, по сравнению с тем, как выглядел макет, когда мы преобразовали все первые буквы абзацев.</p>

Создание заглавных букв при помощи CSS Преимущество использования псевдоклассов заключается в функции обрабатывать разные частные случаи. А что насчет недостатков? Существует много разных псевдоклассов, и их можно объединить таким числом методов, что от этого может пойти кругом голова. К примеру, псевдоклассы :first-child и :first-of-type могут давать одинаковые результаты. Также можно без проблем применить псевдокласс не только к абзацу, но и к элементам <section> или <div>. К примеру, как показано в приведенном ниже примере с поднятым буквами в шрифте Didot. Обратите внимание, как атрибут margin был добавлен справа от буквы А. Иначе она «склеилась» бы с буквой s в начале раздела:

section { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;}section>p:first-child:first-letter { font-size: 4em; text-transform: uppercase; font-family:Didot, serif; margin-right:5px;}

И вместе с HTML:

<section><p>В начале раздела для первой буквы задается поднятая буквица.</p><p>И новый абзац…</p></section>

Создание заглавных букв при помощи CSS Если вы чувствуете тягу к экспериментам, то можете без проблем исследовать разные способы в дополнение к :first-child и :first-of-type. К примеру, такие как :nth-of-type или :nth-of-child, чтобы посмотреть, как те или иные типы псевдоклассов можно использовать для текста заглавными буквами CSS. Независимо от того, будете ли вы следовать изложенным в данной статье принципам или начнете копать глубже, когда вы научитесь работать с псевдоклассами CSS first-child, :first-of-type и :first-letter, вы сможете правильно применять их к элементам HTML.

Подводя черту

Использование отдельных классов вместе с псевдоклассами для обработки разных букв — это процесс проб и ошибок, вычислений положительных и отрицательных отступов. И это требует большого терпения. Для таких букв, как F, G, O, P, Q, T, W, V и Y также потребуются отдельные классы кернинга.

Но самое интересное начинается тогда, когда вы на практике начинаете тестировать разные сочетания шрифтов и создавать поднятые буквы, которые будут привлекать внимание читателей и выделять веб-сайт из общей массы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *