WEBMASCON - журнал для веб-мастеров обновление: 2007.09.07

Использование фонового изображения для замены текста

Using Background-Image to Replace Text
автор: 7 March 2003 © Douglas Bowman
перевод: 06.11.2003 Максим Россомахин и Александр Качанов

С помощью простого трюка CSS вы можете улучшить представление шрифтов на своих веб-страницах. При этом и неграфические броузеры и поисковые роботы смогут с ними нормально работать.

Для понимания этого урока читателю вполне хватит базовых знаний о таблицах стилей. Кроме того, предполагается, что предложенный метод будет применяться аккуратно и ответственно в логически верно размеченных документах.

Введение

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

Но нас за это так часто били по рукам, приговаривая, что за использование имиджей вместо обычных шрифтов на веб-страницах мы попадём прямо в ад. Так постепенно, мы снижали свои визуальные требования и расстались с мыслью о том, что на веб-страницах когда-нибудь снова появится красивый шрифт. Расстались до тех пор, пока много лет спустя функция загрузки шрифтов, предусмотренная в CSS, не станет надежной и не получит должного распространения.

Нас учили, что изображения не всегда доступны для всех броузеров в отличие от простого текста. Это особенно справедливо для специфических броузеров и портативных устройств с небольшими экранами. Так что отливая текст в виде изображений, мы должны испытывать угрызения совести. Ведь текстовые броузеры (такие как Lynx) или же броузеры с отключенным показом изображений не покажут наши картинки. Даже если мы настолько ответственны в работе, что не забываем прописать для каждого элемента графики атрибут alt, поисковые роботы часто индексируют метаданные (подобно содержимому атрибутов alt и title) не так, как "чистый" HTML. Это станет понятно, если мы рассмотрим логическую важность заголовка текста, помещённого между тегами <hn></hn>. Что уж говорить о проблемах с размерами файлов и временем загрузки страниц, перегруженных графикой.

Давайте-ка отложим на время всю эту информацию в сторонку. Так ли уж плохи изображения на самом деле? С помощью небольших трюков CSS, чуть более осторожном планировании и тестировании, можно получить красивые шрифты на веб-страницах, и при этом страница останется доступной для всех (см. заметку ниже), даже для индексирующих роботов. Время снова расправить крылья!

Основная идея

Основная идея очень проста: мы напишем небольшую строчку текста (например "Hello world!") и поместим её внутрь двух наборов HTML-тегов. Затем с помощью CSS мы спрячем этот текст, а вместо него покажем фоновое изображение, которое будет содержать те же самые слова. Вот и всё. Заменить текст изображением не так сложно, как кажется.

Прежде чем браться за CSS, давайте создадим простой код HTML-разметки. Представьте, что у нас имеется что-то вроде этого:


<div>

  <span>Hello world!</span>

</div>

Само собой, мы могли бы просто оформить сам текст с помощью стилей. Но нам-то нужно что-то более искусное, чем детская игра со значениями для свойств 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 кода, и мы получим простой результат. Это настолько просто, что даже непонятно, почему для объяснения этого способа понадобилось столько слов?

Конечно же, мы не оставим нашу разметку столь немудрёной. И стилевые правила нам придется немного усложнить. В противном случае любой из наших тегов <div> на странице содержал бы фоновое изображение со словами "Hello world!", а всё, что мы помещали бы на странице внутри любых тегов <span></span>, не показывалось бы на экране.

Что ж, давайте перейдём к рассмотрению нескольких реальных примеров.

Пример первый. Заголовки страниц

Пример подобной замены можно увидеть на большинстве основных страниц сайта stopdesign.com. Обратите внимание на главные заголовки каждого раздела или страницы (например, "Recent Log Entries" на главной странице). Они создавались без манипуляции свойствами текста с помощью CSS. Это изображения, любовно обработанные так, чтобы соответствовать шрифту логотипа. Особое внимание было обращено на совпадение фоновых цветов изображений с фоном тех частей страниц, где они должны находиться. Эффект едва уловимый, но неотъемлемый для подчеркивания индивидуальности сайта.

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

Голосовые броузеры, устройства с небольшими экранами, и поисковые роботы должны (см. примечания в конце статьи) игнорировать любые таблицы стилей, используемые при выводе на экран. Вместо этого они получают обычный текст, помещенный в элемент <h1>.

Один из методов привязки изображений-заголовков для разделов сайтов состоит в создании контекста, в котором эти изображения-заголовоки используются. В элементе <body> каждой страницы определенного раздела атрибутам id или class присваивается уникальное значение. Затем, используя селекторы наследования, к каждому тегу <h1> привязывается соответствующее изображение в зависимости от того, в контексте какого элемента <body> данный тег <h1> появляется (пара body#sectionForum h1 или body.sectionForum h1). Но в каждом разделе сайта может быть несколько типов страниц, и нам может понадобиться создать заголовки, соответствующие дочерним страницам разделов.

Гораздо разумнее присвоить каждому заголовку идентификатор id, содержащий сокращённое название этого заголовка. Для примера: заголовок Recent Log Entries на главной странице stopdesign.com имеет идентификатор "t-reclog". Префикс "t-" добавлен для того, чтобы создать уникальное значение, и чтобы случайно не создать идентификатор, который уже существует у какого-либо другого элемента. В данном случае "t-" всегда означает, что это идентификатор заголовка страницы (от слова title). Правда, разметка становится слегка избыточной, но это позволяет достичь наибольшей гибкости в привязке любых титульных изображений к заголовкам любых страниц.

Каждый заменяемый заголовок должен быть описан несколькими стилевыми правилами, которые характерны для всех других подобных заголовков. В дополнение к атрибуту "id", в заголовке, который необходимо подменить, мы используем еще и атрибут "class", которому присваиваем значение "swap". Этот класс создан для описания общих свойств подменяемых заголовков, что позволяет задать эти общие свойства всего один раз, не прописывая их всякий раз в стилевых свойствах каждого идентификатора id каждого конкретного заголовка. Кроме того, такой подход помогает не перечислять в таблице стилей все уникальные идентификаторы только для того, чтобы присвоить им одно и то же правило, общее для всех. Благодаря этому подстановка будет применена только к тем тегам <h1>, которые имеют класс "swap". Для не подлежащих замене тегов <h1> в этом случае не придётся писать никакие отменяющие замену правила. Добавление класса - маленькая жертва чистотой разметки в пользу упрощения таблицы стилей.

Для замены заголовков изображением 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-странице с помощью элемента <link>.

Пример второй. Податливые буквицы

Хотелось ли вам когда-нибудь украсить первый абзац своей страницы буквицей? До сих пор с содроганием вспоминаете увеличенную средствами HTML до пятисот процентов первую букву? Что скажете, если мы используем вместо этого изображение? Конечно же, не хотелось бы лишиться первой буквы в том случае, если картинка не загружена. Немного изменив описанную выше методику, мы сможем использовать для буквицы практически любой шрифт, какой захотим. Например, давайте снова обратимся к старому доброму Shelley Allegro и создадим на его основе букву "E", которая послужит буквицей для этого же абзаца.

Нас не устроит буквица, стоящая особняком на строке (именно так получилось бы, если бы мы заключили её в тег div). Договоримся, что мы не хотим, чтобы первая буква как-нибудь выделялась на общем фоне в том случае, когда стилевые правила недоступны для броузера. В таком случае мы используем пару универсальных тегов span:


<p><span class="dropcap"><span>E</span></span>ver wanted a ...

Помните, что мы применяем фоновое изображение к внешнему тегу <span>, а внутренний используем для сокрытия текста. В этом примере мы зададим для внешнего тега "плавучесть" (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)]: Суть: содержимое тэга <span> скрывается путём задания предку тэга <span> нулевой высоты (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 (a.k.a. "Pixy") and Tom Gilder). Смысл в том, что текст скрывается расположенным поверх него пустым элементом <span>, имеющим фоновое изображение. При этом текст будет виден, если загрузка графики отключена (или картинка просто не загрузилась).