Новый метод замены текста картинкой, или избавляемся от -9999px

[@derSmoll]

Да, заранее прошу прощение за форматирование, первый пост :(

[@GrassNetworks]

А ларчик-то просто открывался )))
Спасибо!

[@ozoned]

Еще можно использовать способ line-height: 9999em; который вытолкнет текст не в стороны а вниз. И который также не зависит от выравнивания.

[@IkaR49]

Я уже давно втаких случаях использовал «color: transparent», но без обнуления шрифта. Проблем особых не наблюдается.

[@IkaR49]

«В таких» раздельно, конечно же.

[@Assorium]

h1 {
	background-image:url(img/1326900333.jpg);
	height:240px;
	width:384px;
	background-repeat: no-repeat;
	
	color:transparent;
	overflow:hidden;
}

Что я сделал не так? link
Попробуйте выделить картинку.

[@zoOB]

А каким методом вы пытаетесь спрятать текст? У вас нет ни padding, ни text-ident, ни font:0…

[@n0b0dy]

Очевидно при помощи color: transparent;
А overflow: hidden; не даёт «вылазить» тексту дальше указанного элемента.

Единственная досадная мелочь − это то, что при выделении текст всё же проявится.

[@zoOB]

Единственная досадная мелочь − это то, что при выделении текст всё же проявится.

Об этом и речь… Чтобы избежать этого и нужен или text-indent:-9999px, или padding:%height_image% px, или font:0

[@bolk]

Или переопределить ::selection.

[@Aux]

Это же здорово! пользователи смогут полноценно копировать контент.

[@great_m]

Досадно, но можно красиво стилизировать текст и использовать это как «пасхальное яйцо».

[@Assorium]

Это был вопрос пользователю IkaR49
Просто не на тот линк нажал…

Я уже давно втаких случаях использовал «color: transparent», но без обнуления шрифта. Проблем особых не наблюдается

[@IkaR49]

Добавьте «curesor: pointer» или «cursor: default» и пользователю не придёт в голову, что здесь можно что-то выделить :) Костыль, основанный на психологии, но любой метод скрытия текста является костылём. Зато нет проблем с кроссбраузерностью.

[@bolk]

Я вот так делал:

del {
    font-size: 0px;
    letter-spacing: 0px;
    color: white;
    color: transparent;
    color: rgba(0,0,0,0);
    text-decoration: none;
    line-height: 0;
}

[@kolyuchii]

А вот вам ещё один способ.
Используются псевдоэлементы. Так что IE8+.

[@cbone]

Тут обязательно у картинки должен быть фон в цвет background'а родителя. Не подойдёт если используется какая-нибудь текстура.

[@kolyuchii]

Свой пример я написал сразу же после прочтения заголовка поста. Пример как бы намекает, что проблема, поднятая в статье несколько надумана.

[@Ti_webdev]

А вот вам ещё один способ.

много буков

[@ilyaerin]

А почему бы встраивать шрифты в сайт и писать текст текстом?

[@DenisZ]

Ну вот, заминусовали и не объяснили. У меня возник похожий вопрос. Есть же cufon, google font в конце концов… Боязнь «утяжелить» страницу?

[@r00tGER]

Редко, когда чистый текст, например логотипы. Даже если и будут шрифт подходящий, то придется решать задачу совмещения с графикой. А логически — это единый объект — картинка.

[@ilyaerin]

Простите, но логотип это логотип, и он должен быть одной картинкой. В статье же разговор о тексте, например, заголовках.

[@r00tGER]

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

С лого я согласен на все 100%, что семантически это картинка, а не фон.

Тем не менее, полно плохих примеров, где весь хидер одним джепегов в бекгроунде.

[@invidia]

вы вообще сути не поняли или не верстали никогда

Сейчас меню навигации верстают примерно так:

<nav>
	<ul>
		<li><a href="#">главная</a></li>
		<li><a href="#">неглавная</a></li>
		<li><a href="#">контакты</a></li>
	</ul>
</nav>

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

[@DenisZ]

Название звучит как: «Новый метод замены текста картинкой, или избавляемся от -9999px». Замена текста. Вот и возникли вопросы.
Если текст для заголовка, который может меняться, то есть более удобные способы, мне кажется.
Если ссылку нужно стилизировать картинкой (домик, например, для возврата на главную), то почему не использовать «alt» и «title»?

Объясните пожалуйста, чем alt у картинки в ссылке хуже скрытого текста с точки зрения поисковика? Если уж речь зашла о них.

[@webmasters_by]

Да стилизовать можно как угодно эти пункты меню, прятать текст то зачем? Если пункты меню в виде иконок, то правильнее использовать атрибуты alt и title

А как вы думаете, поисковикам понравится скрытый текст? Это будет напоминать поисковой спам, за который всегда банили.

[@invidia]

забавно читать такой ответ от человека, который постит тут мануалы по верстке

[@webmasters_by]

К чему вы это написали я не понял, видимо, других аргументов не нашли.

Но может вы приведете конкретный пример в каких случаях приходится прятать текст?

[@Ti_webdev]

Есть желание максимальное количество графики переложить в одно изображение — спрайт.
Тем самым снижая количество запросов к серверу.

[@Assorium]

Насколько я помню, была проблема в рендеринге шрифтов. Они при разных условиях (браузер, ОС) выглядели по разному.

[@DenisZ]

Последнее время не замечал такой проблемы. Это у cufon? В каких браузерах, ОС?

[@Assorium]

Извиняюсь. Сейчас проверил в Opera, Firefox, Safari, Chrome все отображается одинаково.
Использовал в одном из проектов его где-то год-полтора назад и были различия, вроде в Opera шрифт отображался не гладким.

[@VasilioRuzanni]

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

[@invidia]

alt — аттрибут тега img, он не имеет никакого отношения к оформлению элементов стилями
тайтл тоже совсем для других целей

[@invidia]

ой, это ответ сюда

[@DenisZ]

Ну естественно, alt и title не имеют отношения к оформлению, но вы же говорите о том, что ссылка должна иметь текст для поисковика и использовать картинки (иконки) без текста — не хорошо. Вот и возник вопрос, а почему нельзя использовать иконку в ссылке как картинку и задать ей alt, title на радость поисковикам? В чем минус этой идеи?

[@invidia]

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

[@invidia]

Кроме того, если вы вставите картинки для кнопок прямо в html, что само по себе противоречит принципу разделения контента, как потом их стилизовать по :hover и т.п.?

[@DenisZ]

Мы уже о кнопках говорим? А начали с «заголовков».

[@invidia]

В общем, не хочу углубляться с сео-дебри, в которых относительно слабо компетентен.
Весь интернет использует отрицательный text-indent, а вы можете использовать картинки с альтами, никаких проблем. Тем более, товарищ вон подтвердил про «рабочие примеры».
Анкор всегда влиял на релевантность в первую очередь, возможно со временем альты будут равноценны или даже лучше.
Удачи.

[@Dolios]

Т.е. вы точно не знаете, но спорите? И единственный ваш аргумент: «миллионы мух не могут ошибаться». Странная позиция.

[@ilyaerin]

Если картинка — это сслылка, то нет никакой проблемы в построении карты сайта поисковиком.

[@DenisZ]

Я не силен в оптимизации, вот и спрашиваю. Я считал, что alt для картинки обернутой в ссылку нормально индексируется. Я ошибался?

[@ilyaerin]

Нет, вы правы. Все отлично индексируется. Есть рабочие примеры.

[@egorinsk]

Это все плохие решения. Почему? Потому, что надо исходить не из абстрактной «семантики», а из решения минимум 2 задач: корректного отображения текста на разных устройствах (в т.ч. при отключеннных картинках) и корректного понимания текста поисковыми системами.

Этот способ не решает ни первой проблемы (если отключить картинки, текст не виден), ни второй (поисковики, увидев что у текста нулевой размер шрифта, могут игнорировать его).

Потому я обычно делаю так: спан с position:relative, display: inline-block, overflow: hidden, в нем текст, поверх него спан с position: absolute и фоном в виде картинки (с непрозраным фоном). Если картинка не загрузилась, виден текст под ней.

Но этот способ не позволяет использовать прозрачную картинку (так как через нее будет просвечивать текст). Может, можно его как-то доработать? Чтобы, например, поместить текст и картинку в общий контейнер и картинка при загрузке сдвигала текст за пределы видимости? Что-то у меня нет решения.

[@lautsevich]

При использовании alt'а с примененным к нему CSS, можно получить адекватный текст на месте отключенной картинки.

[@ilyaerin]

Чем не устраивает вариант встраивания нужного шрифта в сайт?

[@egorinsk]

Вообще, хороший вариант, лучше чем приведен в статье, и чем приведен у меня (просто раньше внешние шрифты не всеми браузерами поддерживались, вот с тех времен я этот способ и использую), единственное, что может быть иногда ради 10 букв тянуть шрифт (пусть даже порезанный) неоправданно. Плюс, надо еще проверить, не будет ли это тормозить в ИЕ6/7.

[@derSmoll]

Я бы сформулировал по-другому — эти решения неплохие, просто они не идеальны. Ваш способ имеет право на жизнь, но во многих случаях он будет избыточен из-за двух спанов, а position:absolute может повести себя непредсказуемо в некоторых мобильных браузерах. Да и в старых ИЕ могут возникнуть нюансы, если на странице есть куча лайтбоксов и поп-апов — нужно отслеживать, чтобы правильно наследовался z-index.

Мне кажется, что хороший вариант решения этой задачи может быть решен с помощью js или средствами сервера — отслеживать состояние окна браузера и делать соответствующую развилку, как это сейчас делается с помощью тех же yepnope.js или если более глобально — modernizr.

Для нас, как для разработчиков, это будет более геморно, однако в конечном итоге до пользователя дойдет самый оптимальный вариант

[@egorinsk]

Что за подход? Для ИЕ можно сделать через старый добрый одноразовый CSS expression вставку тега IMG.

[@random1911]

варианты с нулевым размером шрифта и псевдоэлементами не применимы к старым браузерам. А то светлое будущее, в котором не осталось старых браузеров, пока еще далеко за горами. Так что зря вы, на мой взгляд, привели эти примеры.
Надо будет опробовать метод Зельдмана. Даже если он не работает в ИЕ6, для того старичка неизбежно пишется отдельный стилевой файл, в который никто не мешает воткнуть -9999px.

[@great_m]

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

А если говорить про зарубежных клиентов то это вообще мрак. Не так давно имел дело с компанией, в которой у 4 из 7 человек на iPad 2 стояла iOS 3, а на маках 3 версия Firefox и древний Safari.

[@sunnybear]

всегда писал -999em и экономил байт!

[@Sytrus]

Мне ближе два других варианта:

<a href="#"><img src="картинка.png" alt="тут писать текст"></a>

либо, который кстати чаще использую:

<a href="#"><span>тут писать текст</span></a>

в стилях так:

a {background:url('картинка.png') no-repeat} /* соответственно ширина, высота и display: block */
a span {display:none}

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

Разумеется использую их там, где font-face не помогает!

[@derSmoll]

Без твоих комментов этот пост был бы неполным, спасибо :)

[@Sytrus]

Что-то я не пойму, разве при отключенной графике будет виден текст в способе с -9999px? Тем более второй вариант с display:none полезен для ПС имхо, и, когда я так делаю (надо было об это сразу написать), думаю именно о ПС, а не о слепых и тех, кто за МКАДом, — в чем возможно не прав.

[@derSmoll]

Последнее было проверенно мною на практике — несколько сайтов, где неумышленно было приличное количество элементов с display:none и visibility:hidden, серьезно выпали из индекса сначала яндекса, потом гугла…

[@Sytrus]

Способе с display: none я не считаю клоакингом, потому что имеется в виду следующее:
На изображении «Hello world!» и в коде соответственно

<a href="#"><span>Hello world!</span></a>

а не

<a href="#"><span>купите Hello world! бесплатно  Hello world! скачать  Hello world! и т.п.</span></a>

[@Sytrus]

Кстати, кроме ПС, текст будет виден при отключенных картинках и css, что тоже важно.

[@Sytrus]

И еще в защиту способа с display: none :) Если картинка образована спрайтом, способ также весьма полезен, имхо.

[@Sytrus]

Хорошо, убедил! :) Пересмотрю свое отношение к другим способам или же предпочту использовать тег img с аттрибутом alt ;)

[@Sytrus]

На сколько мне известно поисковый бот не читает css, а потому такое скрытие (если говорить именно о ПС) более «человечно», чем куча рекламы в теге . Хотя, про ПС это уже отдельный разговор.

[@Sytrus]

надо же, тег съелся.
*в теге

<noindex>

[@Shpankov]

IMHO, нужен SVG+Web-fonts. При этом индексироваться будет сам текст на картинке. Плюс появляется возможность отображать текст на картинке на том языке, который установлен в браузере.

[@fatal]

Зелдман пишет:

My friend Scott Kellum, design director at Treesaver, has now sent me this refactored code for hiding text, which I hereby christen the Kellum Method:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Т.е. не Зелдман этот метод придумал, а просто о нём рассказал.

[@bisserof]

смею предложить еще один способ, которым я периодически пользуюсь. Его смысл заключется в ацки огромном размере шрифта:

.logo {
  background: url(logo.png);
  font-size: 999em;
  height: 50px;
  overflow: hidden;
  width: 100px;
}

[@derSmoll]

А такой размер шрифта не может влиять на производительность?

[@bisserof]

замеров производительности не производил, тормозов не замечал

[@derSmoll]

Спасибо, добавил в пост

[@Elendai]

Эмм. А в чем проблема-то? Почти как начал верстать и понимать SEO принципы, верстаю так и не думал, что есть методы даже чьим-то именем названные.

<style>
.logo{
   display:block;
   overflow:hidden;
   width:imgWidth px;
   height:imgHeight px;
}
</style>
<a href="/" class="logo"><img src="img.png" align="left"/>название сайта</a>

Если картинки нет или отключена — видим текст. Есть — выталкивает текст и видим только картинку. Из старого тестил только в IE6-7, но ничего не указывает на не кроссбраузерность.