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.