| 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>