Некоторые техники замены текста картинками (image replacement)
Обзор некоторых способов замены текста картинками.
Зачем?
Часто хочется что бы заголовки были красивыми, и не хочется себя ограничивать парой тройкой шрифтов пользователя(из тех что есть у всех) - тут и приходят на помощь способы заменить этот текст (оставить его в коде для поисковиков и других юзер агентов) на картинки или флеш. Итак для начала заменяем такой код на картинку:
- <h1>Заголовок - картинка</h1>
1. Способы без добавления HTML
Именно их я, как правило, и использую, если не нужно сильно заморачиваться на поддержке броузерами. Самые популярные:
1. LIR (пример ) (так же известен как Phark Method)
- h1{
- text-indent: -9000px;
- overflow: hidden;
- height:80px;width:200px;
- background-image: url(”img.gif”);
- }
Этот первый я чаще всего и применяю. Хотя при отключенных картинках мы не увидим ничего :(. Руководствуюсь принципом - “нефиг”. :)
2. Метод Leahy/Langridge (подробнее)
- h1{
- padding: 80px 0 0 0;
- overflow: hidden;
- background-image: url(”img.gif”);
- height: 0px !important; /* для большинства броузеров */
- height /**/:80px; /* для блочной модели IE5.5 */
- }
Вместо 80px естественно нужно вставить свою высоту…
3. MIR (Malarkey Image Replacement) (подробнее)
- h1{
- letter-spacing :-1000em;
- height:80px;width:200px;
- background-image: url(”img.gif”);
- }
Довольно изящный метод.
Все три разумеется при отключенных картинках не покажут ничего. Следует это помнить. Доступность страдает - но иногда бывают ситуации в которых эти методы могут сильно выручить. Смотреть пример.
2. Способы c добавлением HTML
1. Метод Pixy (подробнее)
HTML:
- <h1>Заголовок - картинка<span></span></h1>
CSS:
- h1{
- margin:0; padding:0;
- position:relative;
- width:200px; height:80px;
- overflow:hidden;
- }
- h1 span {
- display:block;
- position:absolute; left:0; top:0; z-index:1;
- width:200px; height:80px;
- background:url(”img.gif”) top left no-repeat;
- }
Если картинки отключены текст будет видно. Один из лучших методов - главное не забыть вставить спан. По сути фоновая картинка ложится сверху на текст и при ее отсутствии текст просвечивает.
Есть еще несколько вариаций которые работают в тех же броузерах (ИЕ 5 и выше и все остальные более или менее новые) но отличаются немного структурой кода - Levin Alexander’s например.
2. Thierry Image (re)Placement (подробнее)
HTML:
- <h1><img src=”pic.gif” />Заголовок - картинка</h1>
CSS:
- h1 {
- height:80px;
- width:200px;
- overflow:hidden;
- position:relative;
- }
- h1 img {
- z-index:1;
- position:absolute;
- top:0;
- left:0;
- }
Другие способы
Среди прочих нельзя не упомянуть sIFR (и неофициальные апгрейды к нему) - замена с помощью флеша и джаваскрипта.
И некоторые методы замены картинками еще на сервере: Dynamic Text Replacement и на русском PHP+CSS: Динамичекая замена текста.
А так же то, к чему мы прийдем рано или поздно :), CSS3 метод замены текста:
- h1 {
- content: url(img.gif);
- }
Ссылки
Собственно не такой же ж я умник что бы самому вот это все придумать. :)
К тому же это далеко не полный список методов - лишь те, которые я практикую и считаю удобными для себя.
- Мои примеры - для теста
- Revised Image Replacement
- CSS Image Replacement and Alternatives to CSS Image Replacement
Линков из этих двух страничек хватит всерьез и надолго :)
С названиями полная путаница - поэтому называл по имени того кто выше в гугле. Хоть для какой то ориентации…
Спасибо, Thierry Image (re)Placement пока не встречал. Обязательно попробую.
Я делаю так.
h1 {
height:80px;
width:200px;
background:#fff url(someimage.gif);
}
h1 span {
display:none;
}
И HTML
<h1><span> Заголовок - картинка </span></h1>
Конечно, при выключенных картинках и включенном CSS не видно ничего. Это наверное самый примитивный IR. А вообще я за CSS3 метод :)
Кстати, Опера давно уже поддерживает CSS3 метод ;-)
коммент на правах рекламы :)
А я пробовал «Header Image Generator» :) (http://www.alistapart.com/articles/dynatext/) Работает на ура. Главное ttf-шрифт на сервер закачать :)
Странно, что нет методов (мне не попадались) вроде LIR-a, но где для сокрытия текста используются манипуляции с line-height. Это работает даже в IE 5.0. Правда, проверял не во всех браузерах. На маке, например, не проверял. Может есть какие-то противопаказания?
А как именно с помощью лайн-хейт Вы предлагаете?
очень большой или очень маленький? или отрицательный? Я как то и сам не пробовал - хотя и заметно что можно текст наверно смещать сильно по вертикали. Можно чуть подробнее?
http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
Что меня лично наводит на мысль о том, что гипотетический метод IR с помощью line-height - не самый лучший. Я наступал на грабли с этим проперти в более простейшей ситуации, чем IR.
Отрицательный не покатит, ИМХО :)
Не совсем понял кстати параллель? Там же просто в очередной раз написали что лайн-хейт можно без единиц употреблять? А как это связано с граблями при ее употреблении?
Test-case для проверки/
Похоже, line-height c большим значением работает в самых популярных браузeрах. Нулевой — так-сяк, а отрицательный не работает вообще. Но реальность, конечно, может оказаться сложнее.
А можно и с единицами :) Konqueror в моей разметке без едениц выдавал “страшную байду”, а с еденицами - все ок. Я, ясное дело сначала без едениц написал - пропустил через валидатор - а он - “говно мол, не катит”. Если бы тут Мейер свою заметку не написал, я бы наверное волосы на голове порвал :) Во как бывает
Паралель в том.что эксперимантировать с line-height с такой “скользкой” техникой как IR я считаю потенциально багоопасным.
На конкверор, конечно, можно забить, если забыть, что это “почти Safary”
>считаю потенциально багоопасным
Согласен. Хотя любой IR “багоопасен”, любой требует проверки. А этот, видимо, очень неплохо подходит для пятого IE, чем и привлекает.
[…] Есть идея использовать для замещения текста (image replacement) CSS-свойстов line-height. Идея требует проверки, но уже сейчас кажется вполне перспективной […]
Да - оперативно сработал :)
Это малозначимо - но вообще как факт - сначала случайно запустил 5.5 а не 5.01 - и при большом позитивном line-height - сверху от элемента соответствующее пустое пространство - чего, однако, не наблюдается в других ИЕ. Пожалуй letter-spacing в этом смысле чуть более универсален. Хотя как вариант - нулевой лайн хейт можно отдавать ИЕ безболезненно.
То бишь например вариант сочетания LIR (самый первый в посте и не работающий в ИЕ 5.0) очень даже привлекателен:
_line-height:0;
Эх! В 5.5-то я и не проверил :( До чего ж они разные эти IE. А я это уже в одном эскизе использовал. Пойду исправлять на _line-height:0 или что-нибудь в этом роде. Спасибо.
CSS-хаки - это круто, конечно, но с выходом ИЕ 7 будут большие проблемы. Опять придется переделывать все сайты.
Да и тестирование сайта во всех версиях ИЕ: 4, 5.0, 5.01, 5.5, 6.0, 7.0, а еще Файрфоксы, Оперы, Сафари, Konqueror - немножко напрягает.
Может, перестать изобретать велосипед, и просто оставить “по умолчанию” - чтобы весь текст выводился тем шрифтом, который указан в браузере (Times New Roman). Или выбрать Verdana - он выглядит гораздо лучше.
Но вот что мне не нравится - когда текст на сайте фиксированного размера. Читать неудобно! А разве текст не предназначен для чтения?
Я, конечно, знаю, как избавиться от фиксации размера шрифта в браузере, но при этом вся DIV-ная верстка жутко разъезжается, куски текста переплетаются, блоки перекрывают друг друга или уходят вниз. Получается нечитабельная помойка.
Совет: всегда проверяйте вид сайта при маленьком разрешении и с большим размером шрифта - узнаете много дового о верстке.
В общем, по-прежнему действует правило: хочешь сделать крутой современный сайт с наворотами, верстай DIV-ами и с большим количеством CSS. Хочешь быстро сделать простой и удобный сайт - делай табличную верстку с минимумом CSS.
У Вас получился замечательный монолог, строго подтверждающий Вашу правоту. :)
Но во первых никаких особенно страшных проблем с ИЕ 7 я не вижу пока что. А если учесть что до его выхода еще полгода. ТО об этом думать пока все же рано.
Во вторых если оно разьезжается значит сайт сверстан плохо. В идеале должно расширяться. И я в данном случае подаю плохой пример. Но это отнюдь не камень в сторону правильной верстки. В данном случае она ничем не отличается от табличной.
Совет - очень хороший :). В таком случае всегда проверяйте ваши сайты натаблицах мобильниками, поисковиками(на предмет кучи лишнего кода), принтерами на предмет печатных версий ит д. Узнаете еще больше нового.
А правило боюсь действует для Вас. :) Но никак не для меня.
Вы напоминаете крестьянина который ворчит на трактор и говорит - “да проще лопатой вскопать, чем трактор заводить, бензин заливать”… :)
Все прекрасно, только у меня почему то в первом способе никак не удается валидно приделать ссылку на заголовок :’(
а span как то не хочется…
Порообуй писать тот ЦСС для замены текста на картинку не для “h1″, а для “h1 a”. Добавив туда правило display:block
Должно получиться.
Может я чего не понимаю, но почему не проще сделать так:
h1 span { display: none; }
<h1>
<span>title</span>
<img src="img.gif"/>
</h1>
Да. Вроде как через скрытие логичнее получается. У меня картинка на заголовок полупрозрачная, и я сделал так:
h1 {
height:85px; width:700px;
overflow:hidden;
background: transparent url(”images/title.gif”) no-repeat;
}
h1 span {
visibility: hidden;
}
title
Где грабли выплывут?
Все зависит от задач которые вы ставите перед собой. К примеру - ПРОСТО надо заменить нечто на картинку - без заморочек с аксессабилити и тд - мне было бы стыдно добавлять СПАН я бы сделал без него.
Другой вариант - нужно заморочится на аксессабилити - то есть что бы как минимум с отключенными картинками показывало текст какой то хоть. Но тогда твой метод Иван не подходит.
С другой стороны что лично мне иногда претило бы использовать метод Максима - та картинка на которую я заменяю текст - иногда служит все же частью дизайна и лучше ей быть в фоне. + контент дублируется. Но для других случаев совсем не плохой вариант. У Тьерри некое подобие такого подхода - Thierry Image Placement.
Короче чаще зависит от конкретного случая - иногда чего уж греха таить можно и влепить пустой див, пока никто не видит и потом не спать ночами от угрызений совести. только так :)
Спасибо. Я уже потом допёр, что с отключёнными картинками заголовка не будет.
Опять же, я исходил из того что у меня заголовок с прозрачными областями… Но тут уж ничего не попишешь.
А HTML выглядит достаточно прилично: <h1><span>title</span></h1>
А какие есть варианты для замены INLINE элемента на картинку?
Например :) на картинку.
Самое прямолинейное решение с помощью javascript - http://www.whaleofadive.com/misc/siir/about.php - вообще же логичнее тогда оставить картинки :). Или сделать это на уровне сервера.
Не понял изврат с -1000em
Это для того что бы текст отобразился за пределами страницы, просто большое число что бы сдвинуть его(текст) из пределов видимости то бишь экрана. И что бы он не отображался поверх нашей картинки или чего либо еще на странице.
Так может просто в (или в css) сделать?
блин - я написал div style=”display:none” в кавычках, а его “съело”
Такой метод(-1000em) считается более безопасным - и читатели экрана прочитают текст в первом случае - во втором могут и не прочесть.
есть один масюсенький минус, если такой фигни понаделать на сайте многократно, то не удивляйтесь, ежели у вас упадёт посещяемость!!
Как говорится всё должно быть в меру!
я прото, что, чтобы под картинкой ебыл спрятан роман война и мир!
хорошая статья, спасибо
Скрытый текст по идее нехорошо, с точки зрения гугла…
Как называется классный шрифт, использованный на картинках в примерах?
Вряд ли я смогу восстановить :( - но разве это не Scriptina? Я вроде бы не использовал чего то очень необычного
Вроде бы нет, но очень похоже, спасибо!
P.S. Было бы здорово иметь нотификацию по емейлу о приходящих комментариях, а то приходится по 20 раз открывать страницу, чтобы посмотреть глазами, ответил кто или нет.
Я надеялся что RSS достаточно, но добавил и форму подписки, спасибо за идею.
Может я что-то где-то упустил, но я пользуюсь методом, который лишен недостатков. Возможно я не прав.
h1 img src=”pic.png” alt=”Главная” /h1
В браузерах отображается хорошо, с отключенными стилями картинки остаются, с отключенными картинками, альт заменяет сам заголовок. Когда всё отключено, также отображается верно. В чем подвох?
Ну некоторые оптимизаторы считают что альт меньше переливает в ссылку, или меньше веса придает словам, например.
А недостатков у метода действительно мало =) Разве что - чуть больше HTML, ведь нужно обязательно указать альт, адрес картинки, высоту и ширину.
Хех, спасибо, буду пробовать на своих пациентах )
h1{
text-indent: -9000px;
}
Пользователи с отключенной графикой не увидят текст. Я использую похожую технику, только без смещения текста: http://www.sexhtml.ru/css/menu/