Використання фонового зображення для заміни тексту

Douglas Bowman

З допомогою простого трюку CSS ви можете поліпшити уявлення шрифтів на своїх веб-сторінках. При цьому і неграфіческіе броузери та пошукові роботи зможуть з ними нормально працювати.

Вступ

Ви мрієте отримати друкарське якості заголовків і декоративних шрифтів з допомогою зображень замість "голого" HTML? При всіх тих багатих можливості форматування тексту, наявних в CSS, іноді важко утриматися від бажання відкрити Adobe Photoshop і набрати там текст улюбленим шрифтом, задавши при цьому потрібний розмір, кернінг і трекінг. Адже вам відомо, що якщо вставити таке зображення у веб-сторінку, то будь-який користувач Мережі, броузер якого здатний показувати графіком, побачить ваш шрифтовий шедевр так, як ви і задумували. Правда?

Але нас за це так часто били по руках, примовляючи, що за використання іміджів замість звичайних шрифтів на веб-сторінках ми потрапимо прямо у пекло. Так поступово, ми знижували свої візуальні вимоги і розлучилися з думкою про те, що на веб-сторінках коли-небудь знову з'явиться красивий шрифт. Розлучилися до тих пір, поки через багато років функція завантаження шрифтів, передбачена в CSS, не стане надійною і не отримає належного поширення.

Нас вчили, що зображення не завжди доступні для всіх броузерів на відміну від простого тексту. Це особливо справедливо для специфічних броузерів і портативних пристроїв з невеликими екранами. Так що відливаючи текст у вигляді зображень, ми повинні відчувати докори сумління. Адже текстові броузери (такі як Lynx) або ж броузери з відключеним показом зображень не покажуть наші картинки. Навіть якщо ми настільки відповідальні в роботі, що не забуваємо прописати для кожного елемента графіки атрибут alt, пошукові роботи часто індексують метадані (подібно до вмісту атрибутів alt і title) не так, як "чистий" HTML. Це стане зрозуміло, якщо ми розглянемо логічну важливість заголовка тексту, розміщеного між тегами. Що вже говорити про проблеми з розмірами файлів і час завантаження сторінок, перевантажених графікою.

Давайте-ка відкладемо на час всю цю інформацію в сторону. Чи так вже й погані зображення на насправді? За допомогою невеликих трюків CSS, трохи більше обережному плануванні та тестуванні, можна отримати гарні шрифти на веб-сторінках, і при цьому залишиться сторінка доступною для всіх (див. замітку нижче), навіть для індексує роботів. Час знову розправити крила!

Основна ідея

Основна ідея дуже проста: ми напишемо невелику рядок тексту (наприклад, "Hello world!") і помістимо її всередину двох наборів HTML-тегів. Потім за допомогою CSS ми сховаємо цей текст, а замість нього покажемо фонове зображення, яке буде містити ті ж самі слова. Ось і все. Замінити текст зображенням не так складно, як здається.

Перш ніж братися за CSS, давайте створимо простий код HTML-розмітки. Уявіть, що у нас є щось на кшталт цього:

Hello world!

Само собою, ми могли б просто оформити сам текст за допомогою стилів. Але нам-то потрібно щось більше майстерне, ніж дитяча гра зі значеннями для властивостей font-family або text-transform. Адже ми хочемо пишноти! Коли вже ми говоримо "Привіт!" світу, то потрібно робити це чепурних, вірно?

Виберемо для нашого привітання світу самий відповідний шрифт, скажімо, Shelley Allegro. Ми вважаємо, що добре відомий в середовищі дизайнерів Shelley Allegro настільки блістателен, що легко підкорить серця мільйонів, коли ми з його допомогою скажемо "Hello!". За нашими відомостями цей шрифт доступний лише на 1,65% комп'ютерів у всьому світі. Тому, витратимо трохи часу і створимо зображення з усе тим же текстом "Hello world!". Будь-який користувач будь-якого броузера, в якому не відключений показ зображень, побачить наше привітання, набрана шрифтом Shelley Allegro навіть на тих комп'ютерах, де він не встановлений.

Запам'ятаємо, що висота зображення становить 35 пікселів, тому що ця інформація знадобиться нам надалі.

Отже, у нас є шматочок HTML коду, чудове послання миру у вигляді тексту і воно ж у вигляді презренного зображення. Що ж ми з ними зробимо? Давайте закатати рукава і використовуємо невелику таблицю стилів для заміни тексту зображенням.

Заміна зображенням. Метод Фарнера

Цей метод названий на честь Тодда Фарнера (Todd Fahrner) - одного з людей, яких вперше відвідала ця ідея. Вас може здивувати наявність навколо рядка привітання двох тегів - div і span. Фактично, замість них могли б бути будь-які інші, необхідні конкретно для ваших завдань. Але ми будемо використовувати в нашому прикладі саме ці "обгортковий" теги.

Таблиця стилів, яка здійснює підміну, складається з двох простих стильових правил. По-перше, використовуються за допомогою набору властивостей фону (background) ми поміщаємо наше зображення на задній план елемента div.

div (

background-image: url ( "hello_world.gif ");

background-repeat: no-repeat;

height: 35px;

)

Зверніть увагу на властивість height. Його значенням є дійсна висота нашого зображення, тим самим обрамляє div зобов'язаний показати зображення повністю, зайнявши рівно стільки по висоті, скільки потрібно - ні більше ні менше. Властивість background-repeat в даному випадку вказує на те, що фонове зображення не повинно автоматично повторюватися вздовж вертикалі і горизонталі.

Нам залишається лише приховати текстовий рядок, спочатку вміщену в HTML код. Ось для чого з'явився тег span - ми потребуємо в другому елементі, щоб безпосередньо до нього можна було б "прив'язати" невидимість. Це легко здійснити.

span (display: none;)

Об'єднаємо ці два невеликих стильових правила з вихідним шматком HTML коду, і ми отримаємо простий результат. Це настільки просто, що навіть незрозуміло, чому для пояснення цього способу знадобилося стільки слів?

Звичайно ж, ми не залишимо нашу розмітку настільки немудрою. І стильові правила нам доведеться трохи ускладнити. В іншому разі будь-якої з наших тегів на сторінці містив би фонове зображення зі словами "Hello world!", а все, що ми поміщали б на сторінці всередині будь-яких тегів, не відображалася б на екрані.

Що ж, давайте перейдемо до розгляду кількох реальних прикладів.

Приклад перше. Заголовки сторінок

Приклад подібної заміни можна побачити на більшості основних сторінок сайту stopdesign.com. Зверніть увагу на головні заголовки кожного розділу або сторінки (наприклад, "Recent Log Entries" на головній сторінці). Вони створювалися без маніпуляції властивостями тексту за допомогою CSS. Це зображення, любовно оброблені так, щоб відповідати шрифту логотипу. Особливу увагу було звернуто на збіг фонових квітів зображень з фоном тих частин сторінок, де вони повинні знаходитися. Ефект ледве вловимий, але невід'ємний для підкреслення індивідуальності сайту.

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

Голосові броузери, пристрої з невеликими екранами, і пошукові роботи повинні (див. примітки в кінці статті) ігнорувати будь-які таблиці стилів, що використовуються при виведення на екран. Замість цього вони отримують звичайний текст, поміщений в елемент.

Один з методів прив'язки зображень-заголовків для розділів сайтів складається в створенні контексту, в якому ці зображення-заголовок використовуються. У елементі кожної сторінки певного розділу атрибутів id або class присвоюється унікальне значення. Потім, використовуючи селектори спадкування, до кожного тегу прив'язується відповідне зображення в залежності від того, в контексті якого елементу даний тег з'являється (пара body # sectionForum h1 або body.sectionForum h1). Але в кожному розділі сайту може бути кілька типів сторінок, і нам може знадобитися створити заголовки, що відповідають дочірнім сторінках розділів.

Набагато розумніше присвоїти кожному заголовку ідентифікатор id, що містить скорочена назва цього заголовка. Для прикладу: заголовок Recent Log Entries на головній сторінці stopdesign.com має ідентифікатор "t-reclog". Префікс "t-" додано для того, щоб створити унікальне значення, і щоб випадково не створити ідентифікатор, який вже існує у будь-якого іншого елемента. У даному випадку "t-" завжди означає, що це ідентифікатор заголовка сторінки (від слова title). Правда, розмітка стає трохи надлишкової, але це дозволяє досягти найбільшої гнучкості у прив'язці будь-яких титульних зображень до заголовків будь-яких сторінок.

Кожен замінити заголовок повинен бути описаний кількома стильовими правилами, які характерні для всіх інших подібних заголовків. На додаток до атрибуту "id", у заголовку, який необхідно підмінити, ми використовуємо ще й атрибут "class", якому присвоюємо значення "swap". Цей клас створений для опису загальних властивостей підміняємо заголовків, що дозволяє задати ці загальні властивості всього один раз, не прописуючи їх кожного разу в стильових властивостях кожного ідентифікатора id кожного конкретного заголовка. Крім того, такий підхід допомагає не перераховувати в таблиці стилів всі унікальні ідентифікатори тільки для того, щоб присвоїти їм одне й те ж правило, спільне для всіх. Завдяки цьому підстановка буде застосована тільки до тих тегам, які мають клас "swap". Для не підлягають заміні тегів в цьому випадку не доведеться писати ніякі скасовують заміну правила. Додавання класу - маленька жертва чистотою розмітки на користь спрощення таблиці стилів.

Для заміни заголовків зображенням stopdesign.com використовує наступні правила:

h1.swap (

height: 22px;

background-repeat: no-repeat;

)

h1.swap span (display: none;)

А унікальні ідентифікатори виглядають так:

h1 # t-recentlog (background-image: url ( "/ img/title_reclog.gif ");}

h1 # t-articles (background-image: url ( "/ img/title_articles.gif ");}

h1 # t-portfolio (background-image: url ( "/ img/title_port.gif");)

Для простоти редагування і підтримки сайту, всі правила для заголовків сторінок винесені в окремий файл titles.css, який імпортований в основний файл screen.css. screen.css в свою чергу підключений до html-сторінці за допомогою елемента.

Приклад друге. Податливі літери

Хотілося Чи вам коли-небудь прикрасити перший абзац своєї сторінки літери? До сих пір з здриганням згадуєте збільшену засобами HTML до п'ятисот відсотків першу літеру? Що скажете, якщо ми використовуємо замість цього зображення? Звичайно ж, не хотілося б позбутися першого букви в тому випадку, якщо картинка не завантажена. Трохи змінивши описану вище методику, ми зможемо використовувати для буквиці практично будь-який шрифт, який захочемо. Наприклад, давайте знову звернемося до старого доброго Shelley Allegro і створимо на його основі букву "E", яка послужить літери для цього ж абзацу.

Нас не влаштує буквиця, що стоїть осібно на рядку (саме так вийшло б, якщо б ми уклали її в тег div). Домовимося, що ми не хочемо, щоб перша буква як-небудь виділялася на загальному тлі в тому випадку, коли стильові правила недоступні для броузера. У такому випадку ми використовуємо пару універсальних тегів span:

Ever wanted a ...

Пам'ятайте, що ми застосовуємо фонове зображення до зовнішнього тегу, а внутрішній використовуємо для приховування тексту. У цьому прикладі ми задамо для зовнішнього тега "плавучість" (float) для того, щоб текст абзацу охоплював його справа і знизу. Для кращої сумісності з різними браузерами задамо для цього ж елемента властивість display: block; (втім, це має статися автоматично при використанні float). У нас вийде ось такий набір стильових правил:

span.dropcap (

display: block;

float: left;

width: 46px;

height: 63px;

margin-right: 5px;

background-image: url ( "dropcap_e.gif ");

background-repeat: no-repeat;

)

span.dropcap span (display: none;)

Ширина і висота для першого правила взяті такими ж, як відповідні розміри зображення. Крім того, ми застосували невеликий правий відступ (margin-right) для нашої літери. Об'єднавши HTML і CSS і застосувавши деякі дрібні стильові правила до самого абзацу, ми отримали ось такий зразок літери.

Ще приклади

Творче використання методу обмежена лише можливостями нашої уяви. Цим способом, серед іншого, можна:

Створювати логотипи та назви, засновані на використанні шрифту

"відливати" заголовки

Відображати котирування акцій

Замінювати окремі слова з метою покращення косметичного ефекту (наприклад, заміна "and" і "vs.")

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

замінюйте обережно

Вищевикладений метод слід використовувати з особливою відповідальністю. У зображенні завжди повинен бути той же самий текст, що і в захованому html-коді. В іншому випадку буде несправедливо показувати користувачам при включених стилях одне, а при виключених - інше. Зображення-замінник може відрізнятися розміром і способом написання шрифту, його кольором і відстанню між символами. Але ці стилістичні рішення визначаються лише графічним дизайном сторінки, і їх не слід застосовувати до замінюваними html-тексту. Наприклад, якщо повторити склеювання слів (тобто видалення між ними пропуску, як зроблено в графічних заголовках сайту stopdesign.com) в html-тексті, голосові броузери і броузери для сліпих перетворять текст на кашу. Отже, html-текст повинен бути оформлений з дотриманням орфографії і синтаксису, як якби він призначався для сторінки без стилів.

Необхідно згадати кілька дуже серйозних недоліків цього методу:

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

По-друге, іноді буває (хоч і рідко), що користувач відключає показ зображень в броузері, але не виключає підтримку CSS. У такому випадку замінений текст як і раніше буде приховано, а фонове зображення на екрані не з'явиться. Як результат, сторінка буде виглядати як з порожніми блоками без тексту. Як вже було сказано, такі випадки рідкісні: якщо щось з двох (CSS і графіка) вимкнено, часто відключено і друге.

По-третє, користувач не зможе маніпулювати графічним текстом: не вийде поміняти у заголовка розмір, колір або зробити його більш контрастним (тобто все те, що так легко можна зробити зі звичайним текстом).

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

І пам'ятайте, що надмірне (або неправильне) використання хороших прийомів може з часом вийти боком. Ми завжди застосовуємо цей метод рідко і дуже обережно.

Працює з браузерами:

Mac: Camino .7 +, IE 5 +, Mozilla, Netscape 6 +, OmniWeb 4 +, Opera 5 +, Safari

Win: Firebird .6 +, IE 5 +, Mozilla, Netscape 6 +, Opera 5 +, Phoenix .5 +

Важливі примітки

Метод не зміг пройти перевірку кількома популярними програмами, читають користувачеві текст з екрану. Див статтю на сайті A List Apart: Facts and Opinion About Fahrner Image Replacement.

Результати дослідження, проведеного Джо, показують, наша ідея створити щось більше гнучке, ніж прості зображення з прописаних для них атрибутом alt, зазнала фіаско. Ми припускали, що в броузерах з включеним показом графіки текст буде приховано стильовим правилом display: none, а в голосові броузери чітко його прочитають користувачеві. Виявилося, що деякі броузери так не роблять навіть у тому випадку, коли ми прописуємо в стилях media = "screen", так як вони буквально зачитують те, що було б видно на екрані. Більшість голосових броузер не підтримують media = "aural", так що пропадає будь-який сенс використання властивостей "speak" в таблиці стилів для них.

Надходили пропозиції скористатися замість "display: none;" правилом "visibility: hidden;", але це також не вирішувало проблему прочитання "захованих" ділянок тексту в більшості голосових броузерів. Поточна версія популярної програми JAWS - мабуть найпоширеніший голосовий б?? оузер - все-таки читає текст, прихований методом Фарнера. Але, дивлячись на дії інших подібних програм, ми не можемо покластися на те, що наступні версії JAWS збережуть цю функцію.

Як і під час роботи з будь-який інший контент-перетворюючої (content-altering) методикою, перед тим, як її застосовувати, слід ретельно зважити всі переваги і недоліки при вирішенні конкретних завдань верстки. З часу написання статті з'явилося ще кілька методів, що вирішують подібну завдання - кожен зі своїми чеснотами. Проте ні один з методів так і не є універсальним рішенням трюку з підміною тексту на зображення. Нижче наведено короткий перелік альтернативних способів:

Перетворення Ліхі/Ленгріджа [ Leahy / Langridge Image Replacement ( LIR )]

Суть: вміст тега ховається шляхом завдання предка тега нульової висоти (height: 0;) і невидимості (overflow: hidden;). Потім задається верхній відступ (padding-top), що відповідає висоті фонового зображення. Метод запропонований в один і той же час Симус Ліхі і Стюартом Ленгріджем (Seamus Leahy and Stuart Langridge).

Зрушення тексту методом Рандла (Rundle's Text-Indent Method)

Майк Рандл (Mike Rundle) винайшов простий трюк з використанням CSS-властивості "text-indent" для зсуву частини тексту, за межі видимої області елементу.

Метод перекриття фоном ( Cover - up Method )

Метод запропонований Петром Станічеком і Томом Гільдером (Petr Stanicek (aka "Pixy") and Tom Gilder). Сенс у тому, що текст ховається розташованим поверх нього порожнім елементом, що має фонове зображення. При цьому текст буде видно, якщо завантаження графіки відключений (або картинка просто не завантажилася).

Ще одне цікаве обговорення методу FIR у статті Дейва Ши (Dave Shea) "In Defense of Fahrner Image Replacement" на сайті Digital-Web.com.

Список літератури

Для підготовки даної роботи були використані матеріали з сайту http://www.webmascon.com/