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

Метод #1 (FIR – Fahrner Image Replacement)

Суть метода заключается в сокрытии текста одним из свойств css – display:none;

Базовая строка заключается в дополнительный элемент:

<h2><span>text here</span></h2>

Затем для внешнего контейнера устанавливаем фоновое изображение, а внутренний скрываем:

h2 {background:url(img.jpg) 0 0 no-repeat; width:100px; height:20px;}
h2 span {display:none;}

К недостаткам метода можно отнести нечитабельность при отключении картинок, а также некоторое «недоверие» поисковиков к скрытым элементам.

Метод #2 (Phark)

Этот способ предполагает сдвиг текста за пределы экрана c помощью большого отрицательного значения для text-indent

h2 { background:url(img.jpg) 0 0 no-repeat; width:100px; height:20px; text-indent:-10000px;}

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

<h2>text here</h2>

Недостаток тот же что и в методе FIR – отсутствие текста при отключении изображений.

Метод #3 (Gilder-Levin)

Нужный нам результат достигается путем наложения картинки на текст, вместо его сокрытия. Такое возможно благодаря относительной и абсолютной моделям позиционирования.

Добавим в нужный нам элемент пустой дескриптор span:

<h2><span></span>text here</h2>

И с помощью CSS сделаем его «над» родительским контейнером:

h2 {position:relative; width:100px; height:20px;}
h2 span {position:absolute; width:100%; height:100%; background:url(img.jpg) 0 0 no-repeat;}

Недостатками стоит отметить несемантичность верстки (на которую, справедливости ради, многие даже и не смотрят) и невозможность использовать прозрачные изображеня.

Метод #4 (javascript)

Яваскрипт позволяет перед показом странички заменить стандартный шрифт на нужный. Например, с помощью библиотеки cufon

Метод #5 (sIFR)

Состоит в передаче строк текста в flash-ролик, который нужным образом их выводит. В сочетании с javascript достаточно дописывать для нужных html элементов только класс, все остальное берут на себя надстройки.

Скачать последнюю версию sIFR можно тут — http://dev.novemberborn.net/sifr3/nightlies/

Больше статей и материалов по web-разработке в tg-канале - подписывайтесь!

Подписаться в telegram

2 комментария “Методы замены текста на веб-страницах

  1. Гурский Игорь

    Метод #2 (Phark)
    Где-то я слышал что такое счас поисковики банят. (Может не прав, я не помню точно)

    Метод #3 (Gilder-Levin)
    Наверное наилучший из всех, не раз видел на сайтах.

  2. orenkomp.ru

    Значение должно быть достаточно велико, чтобы при любом разрешении монитора текст не отображался на странице.

Добавить комментарий

Ваш адрес email не будет опубликован.