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

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 до пятисот процентов первую букву? Что скажете, если мы используем вместо этого изображение? Конечно же, не хотелось бы лишиться первой буквы в том случае, если картинка не загружена. Немного изменив описанную выше методику, мы сможем использовать для буквицы практически любой шрифт, какой захотим. Например, давайте снова обратимся к старому доброму ShelleyAllegro и создадим на его основе букву "E", которая послужит буквицей для этого же абзаца.

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

<spanclass="dropcap">Everwanteda ...

Помните, что мы применяем фоновое изображение к внешнему тегу , а внутренний используем для сокрытия текста. В этом примере мы зададим для внешнего тега "плавучесть" (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.dropcapspan {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+

Важные примечания

Метод не смог пройти проверку несколькими популярными программами, читающими пользователю текст с экрана. См. статьюнасайтеAListApart: FactsandOpinionAboutFahrnerImageReplacement.

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

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

Как и при работе с любой другой контент-преобразующей (content-altering) методикой, перед тем, как ее применять, следует тщательно взвесить все преимущества и недостатки при решении конкретных задач вёрстки. Со времени написания статьи появилось ещё несколько методов, решающих подобную задачу - каждый со своими достоинствами. Однако ни один из методов так и не является универсальным решением трюка с подменой текста на изображение. Ниже приведён краткий перечень альтернативных способов:

Преобразование Лихи/Лэнгриджа [Leahy/LangridgeImageReplacement (LIR)]

Суть: содержимое тэга скрывается путём задания предку тэга нулевой высоты (height: 0;) и невидимости (overflow: hidden;). Затем задаётся верхний отступ (padding-top), соответствующий высоте фонового изображения. Метод предложен в одно и тоже время Симусом Лихи и Стюартом Лэнгриджем (SeamusLeahyandStuartLangridge).

Сдвиг текста методом Рандла (Rundle's Text-Indent Method)

Майк Рандл (MikeRundle) изобрёл простой трюк с использованием CSS-свойства "text-indent" для сдвига участка текста за пределы видимой области элемента.

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

Метод предложен Петром Станичеком и Томом Гильдером (PetrStanicek (a.k.a. "Pixy") andTomGilder). Смысл в том, что текст скрывается расположенным поверх него пустым элементом , имеющим фоновое изображение. При этом текст будет виден, если загрузка графики отключена (или картинка просто не загрузилась).

Еще одно интересное обсуждение метода FIR в статье Дэйва Ши (DaveShea) "InDefenseofFahrnerImageReplacement" на сайте Digital-Web.com.