Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
6.0+ | 1.0+ | 6.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Замінити текст заголовка зображенням, яке буде відображатися в браузері при збереженні тексту в коді.
Рішення
Обмеження, що накладаються на HTML, не завжди дозволяють задавати для тексту будь-який шрифт, встановлений в системі. Тому химерний текст зазвичай роблять в графічному редакторі і вставляють на веб-сторінку у вигляді картинки. Цим забезпечується єдиний вид для всіх користувачів. Однак і цей варіант має недоліки. По-перше, користувач може відключити показ малюнків у браузері. По-друге, пошукові системи краще індексують текст у заголовках і тим самим підвищують рейтинг сайту, ніж текст в атрибуті alt. Найкращим методом буде поєднання заголовка із зображенням, при цьому текст ховається за допомогою стилів, а відвідувачу показується фонова картинка.
Для виконання поставленої задачі існує кілька способів вирішення, нижче вони перераховані із зазначенням автора методики.
Метод Лэнгбриджа-Ліхі
Попередньо в графічному редакторі готуємо зображення для заміни тексту. На рис. 1 наведена картинка, яку ми будемо використовувати надалі.
Рис. 1. Зображення для заміни тексту заголовка
В стилях для селектора h1 вказуємо наступний код (приклад 1).
Приклад 1. Стиль для відображення фонової картинки
h1 { padding-top: 54px; /* Висота зображення */ height: 0; /* Нульова висота заголовка */ overflow: hidden; /* Приховує область */ background: url(head1.png) no-repeat; /* Фоновий малюнок для заміни тексту */ }
Завдання даного стилю — сховати текст і вивести зображення. Саме приховування відбувається досить хитро. Спочатку текст зміщується вниз за рахунок використання властивості padding-top зі значенням, рівним висоті нашої картинки. Далі явно встановлюємо нульову висоту заголовка. Висота елемента при цьому буде дорівнює 54 пікселя, оскільки складається із значень height і padding-top. Незважаючи на явно задану нульову висоту блоку заголовка, текст все одно відображається, тому ховаємо його через властивість overflow зі значенням hidden. У цьому випадку стає видно тільки область всередині елемента заданих розмірів. Так як текст зміщений вниз за межі цих 54 пікселів висоти, то його не видно.
Сама картинка виводиться у вигляді фону за допомогою властивості background, де обов'язково треба вказати значення no-repeat, щоб фон не повторювався. Остаточний код з використанням заголовків першого і другого рівня наведено в прикладі 2.
Приклад 2. Заміна тексту зображенням
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <HTML> <head> <meta charset= "utf-8"> <title>Заміна тексту</title> <style> h1, h2 { overflow: hidden; /* Приховує область */ height: 0; /* Нульова висота заголовка */ } h1 { background: url(images/head1.png) no-repeat; /* Фоновий малюнок для заміни тексту */ padding-top: 54px; /* Висота зображення */ } h2 { background: url(images/head2.png) no-repeat; padding-top: 48px; margin-bottom: 0; } </style> </head> <body> <h1>Історія Білосніжки</h1> <p>Зіткнувшись зі складною завданням створення повнометражного мультфільму, Дісней розумів, що наявні технічні засоби йому не підходять. Тоді він сам придумав і втілив у життя багатопланову камеру, ідею якої в тій чи іншій мірі використовують через десятиліття після її винаходу.</p> <h2>Цікаві факти</h2> <p>Уолт Дісней спеціально не дивився на актрис, які пробувалися на озвучування ролі Білосніжки. Так він міг об'єктивно оцінити голос. Одного разу він почув пісню в чудовому виконанні.<br> — Ну, як? — запитали Уолта колеги.<br> — Голос гарний, але... застарий, — відповів Дісней.</p> <p>Це була 14-річна Діна Дурбін, згодом прославилася на весь світ.</p> </body> </html>
Результат цього прикладу показано на рис. 2.
Рис. 2. Сторінка з заміщеними заголовками
Серед переваг даного методу — простота і зручність реалізації. Всередину тега <h1> і <h2> не треба додавати додаткових елементів, все робиться через стилі. Однак метод не працює при відключенні картинок в браузері, у цьому випадку ми побачимо порожні прямокутники.
Метод Левіна
Олександр Левін придумав цікавий підхід, при якому текст закривається порожнім блоком, а поверх виводиться фонове зображення. Код тексту заголовка буде наступним (приклад 3).
Приклад 3. Заголовок з тегом<span>
<h1>Заголовок<span></span></h1>
Стиль для заміни тексту наведено в прикладі 4.
Приклад 4. Стиль для відображення фонової картинки
h1 { position: relative; /* Відносне позиціонування */ } h1 span { position: absolute; /* Абсолютне позиціонування */ left: 0; /* Положення щодо лівого краю */ width: 100%; /* Ширина закривається блоку */ height: 54px; /* Висота малюнка */ background: url(head1.png) no-repeat; /* Фоновий малюнок для заміни тексту */ }
Для заголовка спочатку задається відносне позиціонування за допомогою значення relative властивості position, а для тега <span> всередині заголовка — абсолютне позиціонування (position: absolute). Це зроблено для того, щоб визначити точне положення внутрішнього елемента відносно лівого краю батьків. З цією метою додається властивість left з нульовим значенням. Також необхідно задати ширину і висоту закривається блоку і фоновий малюнок, який буде відображатися поверх тексту. Остаточний код наведено в прикладі 5.
Приклад 5. Заміна тексту зображенням
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <HTML> <head> <meta charset= "utf-8"> <title>Заміна тексту</title> <style> h1, h2 { position: relative; /* Відносне позиціонування */ } h1 span, h2 span { position: absolute; /* Абсолютне позиціонування */ left: 0; /* Положення щодо лівого краю */ width: 100%; /* Ширина закривається блоку */ } h1 span { height: 54px; /* Висота малюнка */ background: url(images/head1.png) no-repeat; /* Малюнок для заміни тексту */ } h2 span { height: 48px; background: url(images/head2.png) no-repeat; } </style> </head> <body> <h1>Історія Білосніжки<span></span></h1> <p>Щоб випробувати нову багатопланову камеру в дії, Дісней поставив експериментальну короткометражку під назвою «Старий млин». Незважаючи на деяку простоту сюжету, робота отримала премію «Оскар» як кращий короткометражний мультфільм 1937 року.</p> <h2>Цікаві факти<span></span></h2> <p>Для одного з гномів Дісней ніяк не міг підібрати відповідний голос, і в підсумку зробив персонажа безсловесним.</p> </body> </html>
Результат цього прикладу показано на рис. 3. Та ж сторінка з відключеними зображеннями представлена на рис. 4.
Рис. 3. Зображення поверх тексту
Рис. 4. Сторінка з відключеними малюнками
Хоча стиль в прикладі вийшов досить громіздким, поставлена мета виконана. Текст у заголовках зберігається, він видний при відключених картинках, а самі малюнки ефективно накладаються поверх напису. Слід також зазначити можливі неприємності:
- при збільшенні розміру шрифту в браузері, можлива поява тексту з-під малюнка;
- при включенні в зображенні прозорості наведений текст починає проступати через прозорі області.
Незважаючи на зазначені недоліки наведених методів, вони працюють і виконують свої завдання — виводять замість заголовків зображення, зберігаючи при цьому текст для пошукових систем і мовних браузерів.
Метод Рандла
Метод заснований на приховування тексту шляхом його зміщення за край екрану з допомогою властивості text-indent з від'ємним значенням. Значення повинно бути достатньо велика, щоб при будь-якому дозволі монітора текст не відображався на сторінці. Висновок картинки відбувається, як і в інших наведених методах за рахунок застосування властивості background, як показано в прикладі 6.
Приклад 6. Використання text-indent
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <HTML> <head> <meta charset= "utf-8"> <title>Заміна тексту</title> <style> h1{ text-indent: -6000px; /* Ховаємо текст */ background: url(images/head1.png) no-repeat; /* Малюнок для заміни тексту */ width: 392px; /* Ширина картинки */ height: 54px; /* Висота картинки */ } </style> </head> <body> <h1>Історія Білосніжки</h1> <p>Багато критики пророкували «Білосніжку» оглушливий провал, мотивуючи це тим, що глядач не піде дивитися на мальованих артистів. Однак сам Дісней вірив в успіх, його віра і творчий підхід не підвели, цю картину люблять і дивляться через десятиліття після її виходу.</p> </body> </html>