Сниппет: Буквиця в тексті за допомогою CSS

41

Сниппет: Буквица в тексте с помощью CSS

Нещодавно довелося мені оформляти простеньку, представницьку сторінку для однієї районної бібліотеки. Замовник побажав бачити параграфи з використанням буквиці в заголовку кожного з них. Способи створення буквиці відомі дуже давно і добре відпрацьовані, так що з виконанням роботи ніяких труднощів не виникло. Завершивши роботу, вирішив не відкидати в сторону матеріал, а поповнити їм колекцію фрагментів на своєму блозі і попутно розповісти(нагадати своїм читачам про існуючі на сьогоднішній день, ефективних методах реалізації буквиці в тексті за допомогою CSS.

Для тих хто ще не зовсім в темі, поясню що за диво таке «Буквиця». Буквиця або по іншому ініціал це такий художній прийом оформлення заголовних букв тексту, який напевно знайомий кожному з друкованим виданням, являє собою збільшену першу букву, прикрашені мініатюрами, або орнаментом. Такий прийом чудово перекачував у веб-типографіку і досить широко використовується в різних формах.
Просто збільшена перша буква абзацу або окремого слова, це самий звичний варіант оформлення. Більш цікаве рішення, коли базова лінія збільшеної букви знаходиться нижче на одну або декілька рядків базової лінії основного тексту, і це не просто черговий збільшений символ, буквиця в цьому випадку не виступає над блоком тексту, а є його частиною, вирівняна по лівому краю і обтічна текстом.
Як писав вище, існує кілька різних способів для створення буквиці.

Демо Редактор

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

Второю метод більш цікавий, у всякому разі для мене, c використанням властивостей CSS і додаткових псевдокласів: :first-child :first-letter. Вже досить давно, стало можливим створювати буквицю не у вигляді малюнка, а в якості простого тексту, збільшеного у порівнянні базовим шрифтом. Такий спосіб багато в чому хороший, він не вимагає додаткової розмітки та наявності картинок, створення буквиці в якійсь мірі автоматизується. Але, недолік полягає в тому, що втрачається якийсь контроль, і може виникнути плутанина при практичному використанні безпосередньо в записах. Так і в браузерах типу IE8 і нижче, в наслідок неправильного «сприйняття» зазначених псевдокласів, виходить так, що всі наступні параграфи з тегом

, будуть виводитися з буквицей, а воно не завжди нам треба))).

Що стосується шрифту, можете підключити який-небудь нестандартний, рукописний шрифт з орнаментом наприклад, у статті і «демо» я використовував стандартний «Georgia» без надмірностей.

/* Використання псевдокласів для створення Буквиці */
p:first-child:first-letter {
float: left;
color: #903;
 font-size: 70px;
line-height: 55px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}

/* Використання псевдокласів для створення Буквиці */
p:first-child:first-letter {
float: left;
color: #903;
font-size: 70px;
line-height: 55px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}

Третий спосіб, напевно все ж потрібно було поставити на перше місце, так як це перевірена роками і стовідсотково кроссбраузерное рішення. Враховуючи те, що не завжди і не у всіх випадках застосування «Буквиці» затребуване і виправдано, все ж краще використовувати метод з додатковою розміткою. Наприклад, початкову літеру параграфа обернути тегом span з певним класом і вже безпосередньо у .css, прописати для нього потрібні вам властивості, сформувавши зовнішній вигляд великої літери(розмір, колір, розташування тощо) В цьому випадку ви отримуєте контроль над створенням буквиці саме там, де вам потрібно, т. е. у тому параграфі, в якому вважаєте наявність буквиці необхідним.
Ось як буде виглядати найпростіший код CSS для буквиці з використанням додаткового контейнера:

.firstletter {
float: left;
color: #008e36;
 font-size: 70px;
line-height: 55px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}

.firstletter {
float: left;
color: #008e36;
font-size: 70px;
line-height: 55px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: Georgia;
}

Як бачите, все дуже просто, створюємо окремий клас з більш або менш розумним і логічним назвою, я не став особливо фантазувати і для прикладу присвоїв ім’я .firstletter, ви можете вибрати будь-яке інше, головне щоб воно вам хоч якось вказувало на своє призначення. Потім приступаєте до формування зовнішнього вигляду майбутньої Буквиці, використовуйте будь-які доступні на сьогоднішній день властивості CSS3. Впевнений, трохи фантазії і у вас вийде безліч різних варіантів «буквиці».

Демо Редактор

Для того щоб на сторінці запису з’явилася «буквиця» у всій своїй красі, залишається тільки потрібну вам букву, в нашому випадку це початкова буква параграфа, помістити в додатковий контейнер, у нас в цій ролі використано тег , з заздалегідь визначеним класом class=”firstletter”, і все, параграф тексту буде явно, і більш ніж конкретно позначений.

<span class="firstletter">З</span>допомогою властивостей CSS.....

Здопомогою властивостей CSS…..

Звичайно нічого нового не відкрив, але варто інколи згадувати добре забуте старе. У тексті статті використані всі три способи створення буквиці в тексті. Сподіваюся, ці коротенькі шматочки коду знайдуть місце у ваших важких шпаргалки для повсякденної роботи.

З повагою, Андрій