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

Необходимо упомянуть несколько очень серьезных недостатков этого метода:

Во-первых, несмотря на то, что этот метод отлично подходит для поисковых роботов (в отличие от вставки простых изображений вместо текста), у пользователя возникнут проблемы при поиске заменённого текста (функция поиска в броузерах) или же при копировании его в буфер обмена.

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

Еще одно интересное обсуждение метода FIR в статье Дэйва Ши (Dave Shea) "In Defense of Fahrner Image Replacement" на сайте Digital-Web.com.

Список литературы

Для подготовки данной работы были использованы материалы с сайта http://www.webmascon.com/