Некоторые техники замены текста картинками (image replacement)

23 February, 2006

XHTML/CSS, Дизайн

Обзор некоторых способов замены текста картинками.

Зачем?

Часто хочется чтобы заголовки были красивыми, и не хочется себя ограничивать парой тройкой шрифтов пользователя (из тех что есть у всех) — тут и приходят на помощь способы заменить этот текст (оставить его в коде для поисковиков и других юзер агентов) на картинки или флэш. Итак для начала заменяем такой код на картинку:

  1. <h1>Заголовок – картинка</h1>

1. Способы без добавления HTML

Именно их я, как правило, и использую, если не нужно сильно заморачиваться на поддержке браузерами. Самые популярные:
1. LIR (пример ) (так же известен как Phark Method)

  1. h1{
  2. text-indent: -9000px;
  3. overflow: hidden;
  4. height:80px;width:200px;
  5. background-image: url(“img.gif”);
  6. }

Этот первый я чаще всего и применяю. Хотя при отключенных картинках мы не увидим ничего :(. Руководствуюсь принципом: «нефиг». :)

2. Метод Leahy/Langridge (подробнее)

  1. h1{
  2. padding: 80px 0 0 0;
  3. overflow: hidden;
  4. background-image: url(“img.gif”);
  5. height: 0px !important; /* для большинства броузеров */
  6. height /**/:80px; /* для блочной модели IE5.5 */
  7. }

Вместо 80px естественно нужно вставить свою высоту.

3. MIR (Malarkey Image Replacement) (подробнее)

  1. h1{
  2. letter-spacing :-1000em;
  3. height:80px;width:200px;
  4. background-image: url(“img.gif”);
  5. }

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

2. Способы c добавлением HTML

1. Метод Pixy (подробнее)
HTML:

  1. <h1>Заголовок – картинка<span></span></h1>

CSS:

  1. h1{
  2. margin:0; padding:0;
  3. position:relative;
  4. width:200px; height:80px;
  5. overflow:hidden;
  6. }
  7. h1 span {
  8. display:block;
  9. position:absolute; left:0; top:0; z-index:1;
  10. width:200px; height:80px;
  11. background:url(“img.gif”) top left no-repeat;
  12. }

Если картинки отключены текст будет видно. Один из лучших методов, главное не забыть вставить спан. По сути фоновая картинка ложится сверху на текст и при ее отсутствии текст просвечивает.
Есть еще несколько вариаций которые работают в тех же браузерах (ИЕ 5 и выше и все остальные более или менее новые) но отличаются немного структурой кода: Levin Alexander’s например.
2. Thierry Image (re)Placement (подробнее)
HTML:

  1. <h1><img src=”pic.gif” />Заголовок – картинка</h1>

CSS:

  1. h1 {
  2. height:80px;
  3. width:200px;
  4. overflow:hidden;
  5. position:relative;
  6. }
  7. h1 img {
  8. z-index:1;
  9. position:absolute;
  10. top:0;
  11. left:0;
  12. }

Другие способы

Среди прочих нельзя не упомянуть sIFRнеофициальные апгрейды к нему) — замена с помощью флеша и джаваскрипта.
И некоторые методы замены картинками еще на сервере: Dynamic Text Replacement и на русском PHP+CSS: Динамичеcкая замена текста.
А так же то, к чему мы прийдем рано или поздно :), CSS3 метод замены текста:

  1. h1 {
  2. content: url(img.gif);
  3. }

Ну или простой и банальный font-face, который наконец заработает везде.

Ссылки

Собственно не такой же ж я умник что бы самому вот это все придумать. :)
К тому же это далеко не полный список методов, лишь те, которые я практикую и считаю удобными для себя.

Линков из этих двух страничек хватит всерьез и надолго :)
С названиями полная путаница, поэтому называл я по имени того кто выше в гугле. Хоть для какой то ориентации.

XHTML/CSS, Дизайн

45 комментариев к “Некоторые техники замены текста картинками (image replacement)”

Flack | 1. 23 February, 2006

Спасибо, Thierry Image (re)Placement пока не встречал. Обязательно попробую.

ganges | 2. 23 February, 2006

Я делаю так.

h1 {
height:80px;
width:200px;
background:#fff url(someimage.gif);
}
h1 span {
display:none;
}

И HTML

<h1><span> Заголовок – картинка </span></h1>

Конечно, при выключенных картинках и включенном CSS не видно ничего. Это наверное самый примитивный IR. А вообще я за CSS3 метод :)

Kildor | 3. 23 February, 2006

Кстати, Опера давно уже поддерживает CSS3 метод ;-)

akella | 4. 23 February, 2006

коммент на правах рекламы :)

MAX | 5. 23 February, 2006

А я пробовал «Header Image Generator» :) (http://www.alistapart.com/articles/dynatext/) Работает на ура. Главное ttf-шрифт на сервер закачать :)

uggallery | 6. 26 February, 2006

Странно, что нет методов (мне не попадались) вроде LIR-a, но где для сокрытия текста используются манипуляции с line-height. Это работает даже в IE 5.0. Правда, проверял не во всех браузерах. На маке, например, не проверял. Может есть какие-то противопаказания?

akella | 7. 27 February, 2006

А как именно с помощью лайн-хейт Вы предлагаете?
очень большой или очень маленький? или отрицательный? Я как то и сам не пробовал – хотя и заметно что можно текст наверно смещать сильно по вертикали. Можно чуть подробнее?

ganges | 8. 27 February, 2006

http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/

Что меня лично наводит на мысль о том, что гипотетический метод IR с помощью line-height – не самый лучший. Я наступал на грабли с этим проперти в более простейшей ситуации, чем IR.
Отрицательный не покатит, ИМХО :)

akella | 9. 27 February, 2006

Не совсем понял кстати параллель? Там же просто в очередной раз написали что лайн-хейт можно без единиц употреблять? А как это связано с граблями при ее употреблении?

uggallery | 10. 27 February, 2006

Test-case для проверки/

Похоже, line-height c большим значением работает в самых популярных браузeрах. Нулевой — так-сяк, а отрицательный не работает вообще. Но реальность, конечно, может оказаться сложнее.

ganges | 11. 27 February, 2006

А можно и с единицами :) Konqueror в моей разметке без едениц выдавал “страшную байду”, а с еденицами – все ок. Я, ясное дело сначала без едениц написал – пропустил через валидатор – а он – “говно мол, не катит”. Если бы тут Мейер свою заметку не написал, я бы наверное волосы на голове порвал :) Во как бывает

Паралель в том.что эксперимантировать с line-height с такой “скользкой” техникой как IR я считаю потенциально багоопасным.

На конкверор, конечно, можно забить, если забыть, что это “почти Safary”

uggallery | 12. 27 February, 2006

>считаю потенциально багоопасным

Согласен. Хотя любой IR “багоопасен”, любой требует проверки. А этот, видимо, очень неплохо подходит для пятого IE, чем и привлекает.

UGgallery -Замещение текста с помощь... | 13. 27 February, 2006

[…] Есть идея использовать для замещения текста (image replacement) CSS-свойстов line-height. Идея требует проверки, но уже сейчас кажется вполне перспективной […]

akella | 14. 27 February, 2006

Да – оперативно сработал :)

Это малозначимо – но вообще как факт – сначала случайно запустил 5.5 а не 5.01 – и при большом позитивном line-height – сверху от элемента соответствующее пустое пространство – чего, однако, не наблюдается в других ИЕ. Пожалуй letter-spacing в этом смысле чуть более универсален. Хотя как вариант – нулевой лайн хейт можно отдавать ИЕ безболезненно.
То бишь например вариант сочетания LIR (самый первый в посте и не работающий в ИЕ 5.0) очень даже привлекателен:
_line-height:0;

uggallery | 15. 27 February, 2006

Эх! В 5.5-то я и не проверил :( До чего ж они разные эти IE. А я это уже в одном эскизе использовал. Пойду исправлять на _line-height:0 или что-нибудь в этом роде. Спасибо.

Арки | 16. 15 May, 2006

CSS-хаки – это круто, конечно, но с выходом ИЕ 7 будут большие проблемы. Опять придется переделывать все сайты.

Да и тестирование сайта во всех версиях ИЕ: 4, 5.0, 5.01, 5.5, 6.0, 7.0, а еще Файрфоксы, Оперы, Сафари, Konqueror – немножко напрягает.

Может, перестать изобретать велосипед, и просто оставить “по умолчанию” – чтобы весь текст выводился тем шрифтом, который указан в браузере (Times New Roman). Или выбрать Verdana – он выглядит гораздо лучше.

Но вот что мне не нравится – когда текст на сайте фиксированного размера. Читать неудобно! А разве текст не предназначен для чтения?

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

Совет: всегда проверяйте вид сайта при маленьком разрешении и с большим размером шрифта – узнаете много дового о верстке.

В общем, по-прежнему действует правило: хочешь сделать крутой современный сайт с наворотами, верстай DIV-ами и с большим количеством CSS. Хочешь быстро сделать простой и удобный сайт – делай табличную верстку с минимумом CSS.

akella | 17. 15 May, 2006

У Вас получился замечательный монолог, строго подтверждающий Вашу правоту. :)

Но во первых никаких особенно страшных проблем с ИЕ 7 я не вижу пока что. А если учесть что до его выхода еще полгода. ТО об этом думать пока все же рано.

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

Совет – очень хороший :). В таком случае всегда проверяйте ваши сайты натаблицах мобильниками, поисковиками(на предмет кучи лишнего кода), принтерами на предмет печатных версий ит д. Узнаете еще больше нового.

А правило боюсь действует для Вас. :) Но никак не для меня.
Вы напоминаете крестьянина который ворчит на трактор и говорит – “да проще лопатой вскопать, чем трактор заводить, бензин заливать”… :)

Shimon | 18. 26 May, 2006

Все прекрасно, только у меня почему то в первом способе никак не удается валидно приделать ссылку на заголовок :'(

а span как то не хочется…

akella | 19. 27 May, 2006

Порообуй писать тот ЦСС для замены текста на картинку не для “h1”, а для “h1 a”. Добавив туда правило display:block
Должно получиться.

Максим Вуец | 20. 3 June, 2006

Может я чего не понимаю, но почему не проще сделать так:
h1 span { display: none; }
<h1>
<span>title</span>
<img src="img.gif"/>
</h1>

Ivan A-R | 21. 6 June, 2006

Да. Вроде как через скрытие логичнее получается. У меня картинка на заголовок полупрозрачная, и я сделал так:

h1 {
height:85px; width:700px;
overflow:hidden;
background: transparent url(“images/title.gif”) no-repeat;
}
h1 span {
visibility: hidden;
}

title

Где грабли выплывут?

akella | 22. 6 June, 2006

Все зависит от задач которые вы ставите перед собой. К примеру – ПРОСТО надо заменить нечто на картинку – без заморочек с аксессабилити и тд – мне было бы стыдно добавлять СПАН я бы сделал без него.
Другой вариант – нужно заморочится на аксессабилити – то есть что бы как минимум с отключенными картинками показывало текст какой то хоть. Но тогда твой метод Иван не подходит.

С другой стороны что лично мне иногда претило бы использовать метод Максима – та картинка на которую я заменяю текст – иногда служит все же частью дизайна и лучше ей быть в фоне. + контент дублируется. Но для других случаев совсем не плохой вариант. У Тьерри некое подобие такого подхода – Thierry Image Placement.
Короче чаще зависит от конкретного случая – иногда чего уж греха таить можно и влепить пустой див, пока никто не видит и потом не спать ночами от угрызений совести. только так :)

Ivan A-R | 23. 9 June, 2006

Спасибо. Я уже потом допёр, что с отключёнными картинками заголовка не будет.

Опять же, я исходил из того что у меня заголовок с прозрачными областями… Но тут уж ничего не попишешь.

А HTML выглядит достаточно прилично: <h1><span>title</span></h1>

Dcat | 24. 15 August, 2006

А какие есть варианты для замены INLINE элемента на картинку?
Например :) на картинку.

akella | 25. 15 August, 2006

Самое прямолинейное решение с помощью javascript – http://www.whaleofadive.com/misc/siir/about.php – вообще же логичнее тогда оставить картинки :). Или сделать это на уровне сервера.

Купер | 26. 18 August, 2006

Не понял изврат с -1000em

akella | 27. 18 August, 2006

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

Купер | 28. 18 August, 2006

Так может просто в (или в css) сделать?

Купер | 29. 18 August, 2006

блин – я написал div style=”display:none” в кавычках, а его “съело”

akella | 30. 19 August, 2006

Такой метод(-1000em) считается более безопасным – и читатели экрана прочитают текст в первом случае – во втором могут и не прочесть.

аниме | 31. 4 April, 2007

есть один масюсенький минус, если такой фигни понаделать на сайте многократно, то не удивляйтесь, ежели у вас упадёт посещяемость!!

Как говорится всё должно быть в меру!
я прото, что, чтобы под картинкой ебыл спрятан роман война и мир!

Grin | 32. 21 June, 2007

хорошая статья, спасибо

Михаил | 33. 1 November, 2007

Скрытый текст по идее нехорошо, с точки зрения гугла…

Скакунов Александр | 34. 2 November, 2007

Как называется классный шрифт, использованный на картинках в примерах?

akella | 35. 2 November, 2007

Вряд ли я смогу восстановить :( – но разве это не Scriptina? Я вроде бы не использовал чего то очень необычного

Скакунов Александр | 36. 2 November, 2007

Вроде бы нет, но очень похоже, спасибо!

P.S. Было бы здорово иметь нотификацию по емейлу о приходящих комментариях, а то приходится по 20 раз открывать страницу, чтобы посмотреть глазами, ответил кто или нет.

akella | 37. 3 November, 2007

Я надеялся что RSS достаточно, но добавил и форму подписки, спасибо за идею.

ArtDesigner | 38. 9 January, 2008

Может я что-то где-то упустил, но я пользуюсь методом, который лишен недостатков. Возможно я не прав.
h1 img src=”pic.png” alt=”Главная” /h1

В браузерах отображается хорошо, с отключенными стилями картинки остаются, с отключенными картинками, альт заменяет сам заголовок. Когда всё отключено, также отображается верно. В чем подвох?

akella | 39. 9 January, 2008

Ну некоторые оптимизаторы считают что альт меньше переливает в ссылку, или меньше веса придает словам, например.
А недостатков у метода действительно мало =) Разве что – чуть больше HTML, ведь нужно обязательно указать альт, адрес картинки, высоту и ширину.

Guyver | 40. 24 January, 2008

Хех, спасибо, буду пробовать на своих пациентах )

Никита | 41. 1 March, 2008

h1{
text-indent: -9000px;
}

Пользователи с отключенной графикой не увидят текст. Я использую похожую технику, только без смещения текста: http://www.sexhtml.ru/css/menu/

Del'ka | 42. 24 July, 2008

сегодня нашёл совершненно замечательный способ через :after
http://habrahabr.ru/blog/css/37811.html

хорош тем чо при отключенных картинках виден текст, но при этом нет несемантических span.

cssing :: Архив :: Оценка качества верстки | 43. 4 October, 2008

[…] Последний хоткей кстати проявляет “плохие” image replacement […]

Перспективный блоггер | 44. 14 May, 2009

Смотрю в ff3, в методе Маларки наблюдаю на картинке первую букву текста – “З”, что вполне естественно, т.к. отрицательный letter-spacing не изменяет позицию первой буквы.

Здесь нужно бы еще отрицательный text-indent на ширину первой буквы добавить, но тогда это уже будет метод, объединенный с методом Фарка.

Вредная верстка | Server Room | 45. 26 January, 2012

[…] Но как?! Читаем про LIR и Pixy. […]

Оставить комментарий