Сніппет: Буквиця в тексті за допомогою CSS
Нещодавно довелося мені оформляти простеньку, представницьку сторінку для однієї районної бібліотеки. Замовник побажав бачити параграфи з використанням літери в назві кожного з них. Способи створення буквиці відомі дуже давно і добре відпрацьовані, так що з виконанням роботи ніяких труднощів не виникло. Завершивши роботу, вирішив не відкидати в сторону матеріал, а поповнити їм колекцію фрагментів на своєму блозі і попутно розповісти (нагадати) своїм читачам про існуючі на сьогоднішній день, ефективні методи реалізації літери в тексті за допомогою CSS.
Для тих хто ще не зовсім в темі, поясню що за диво таке «Буквиця». Буквиця або по іншому ініціал це такий художній прийом оформлення заголовних букв тексту, який напевно знайомий кожному по друкованим виданням, є збільшеною першу букву, прикрашену мініатюрами або орнаментом. Такий прийом чудово перекачував в веб-типографіку і досить широко використовується в різних формах.
Просто збільшена перша буква абзацу або окремого слова, це самий звичний варіант оформлення. Більш цікаве рішення, коли базова лінія збільшеною літери знаходиться нижче на одну або кілька рядків базової лінії основного тексту, і це не просто черговий збільшений символ, буквиця в цьому випадку не виступає над блоком тексту, а є його частиною, вирівняна по лівому краю і обтічна текстом.
Як писав вище, існує кілька різних способів для створення буквиці.
ервий спосіб з більш художнім підходом, з використанням малюнків вирівняні по лівому краю. Спосіб дієвий і робочий, результат дуже гарний, але якщо буквица використовується досить часто на сайті, то під кожну нову, доведеться готувати окрему картинку, що погодьтеся, не дуже зручно і практично. Детально цей метод розглядати не будемо, так як схема та ж, що і при використанні вбудованих в текст мініатюр.
В торою метод більш цікавий, у всякому разі для мене, c використанням властивостей CSS і додаткових псевдокласів. first-child і: first-letter. Уже досить давно, стало можливим створювати буквицу не у вигляді малюнка, а в якості простого тексту, збільшеного в порівнянні базовим шрифтом. Такий спосіб багато в чому хороший, він не вимагає додаткової розмітки і наявності картинок, створення буквиці в якійсь мірі автоматизується. Але, недолік полягає в тому, що втрачається якийсь контроль, і може виникнути плутанина при практичному використанні безпосередньо в записах. Та й в браузерах типу IE8 і нижче, в слідстві неправильного «сприйняття» зазначених псевдокласів, виходить так що всі наступні параграфи з тегом
. виводитимуться з буквицей, а воно не завжди нам треба))).
Що стосовно шрифту, можете підключити який-небудь нестандартний, рукописний шрифт з орнаментом наприклад, в статті і «демо» я використовував стандартний «Georgia» без вишукувань.
Т ретій спосіб, напевно все ж потрібно було поставити на перше місце, так як це перевірене роками і стовідсотково кросбраузерності рішення. З огляду на те, що не завжди і не у всіх випадках застосування «Буквиця» затребуване і виправдано, все ж краще використовувати метод з додатковою розміткою. Наприклад, початкову літеру параграфа обернути тегом span з певним класом і вже безпосередньо в .css. прописати для нього потрібні вам властивості, сформувавши зовнішній вигляд великої літери (розмір, колір, розташування і т.п.) У цьому випадку ви отримуєте контроль над створенням літери саме там де вам потрібно, тобто в тому параграфі, в якому вважаєте наявність літери необхідним.
Ось як буде виглядати найпростіший код CSS для буквиці з використанням додаткового контейнера:
Як бачите все дуже просто, створюємо окремий клас з більш-менш розумним і логічним назвою, я не став особливо фантазувати і для прикладу присвоїв ім'я .firstletter. ви можете вибрати будь-яке інше, головне щоб воно вам хоч якось вказувало на своє призначення. Потім приступаєте до формування зовнішнього вигляду майбутньої Буквиця, використовуйте будь-які доступні на сьогоднішній день властивості CSS3. Упевнений, трохи фантазії і у вас вийде безліч різних варіантів «літери».
Для того щоб на сторінці в запису з'явилася «буквиця» у всій своїй красі, залишається тільки потрібну вам букву, в нашому випадку це початкова буква параграфа, помістити в додатковий контейнер, у нас в цій ролі використаний тег . із заздалегідь визначеним класом class = "firstletter". і все, параграф тексту буде явно, і більш ніж конкретно позначений.
Здопомогою властивостей CSS.
Звичайно нічого нового не відкрив, але варто іноді згадувати добре забуте старе. У тексті статті використані всі три способи створення буквиці в тексті. Сподіваюся, ці коротенькі шматочки коду знайдуть місце в ваших важких шпаргалки для повсякденної роботи.
З повагою Андрій