In CSS, why to have huge negative value for text-indent

Question

When I have an element like an anchor that serves as a logo, I will use negative text-indent value which is huge

a.logo {
  background: url(logo.gif) no-repeat;
  text-indent: -9999px;
}

So that logo looks like an image, plus the text is not visible.
Also, I need the text in the DOM, so that search engines can find it.

However,

I don't like huge negative values
I have seen a big scrollables in scenarios when opening-closing an accordion, on some browsers and tablets
I have heard that Browser when comes across any measurement value on a DOM Element, per the box model, it draws a box with at least that big value. This can be a performance issue while painting

I have also seen people using transparency techniques, tiniest font-sizes, font-color matching with logo background, etc. But they don't look elegant to me

Are there no semantic or elegant techniques to hide the displayed text from the user still have it in the DOM, even after HTML5 and CSS3?

Why don't you use an image and place `alt` tags instead of indenting the text and using a bg... search engines do pick up on `alt` tags inside images — CᴴᵁᴮᴮʸNᴵᴺᴶᴬ, Apr 25 '13 at 08:04

score 0 · Accepted Answer · answered Apr 25 '13 at 08:01

0

Why not do it the way h5bp does it?

.ir {
    border: 0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background: url(test.png);
    width: 300px;
    height: 75px;
}

For your reference, you also have a number of image replacement techniques here.

answered Apr 25 '13 at 08:01

Jezen Thomas

13,619
6
53
91

Thanks for the image replacement technique. I am going to change my `a` to `h3 a` and have a background for `h3` – Om Shankar Apr 25 '13 at 08:05
If it's for a logo/brand, I’d put it in a `h1`. I can’t verify this, but I think I read somewhere that Google recommends it. A quick Google search will give you article like [this one](http://www.hobo-web.co.uk/headers/). – Jezen Thomas Apr 25 '13 at 08:09

score 0 · Answer 2 · answered Apr 25 '13 at 08:19

you don't need to use text indent (if you don't want) Try this.

css code

.logo{
    width:65px;
    height:0;
    background:url(logo.png) 0 0 no-repeat;
    font-size:0;
    line-height:0;
    padding-top:15px;
    overflow:hidden;
    display:block;
}

In CSS, why to have huge negative value for text-indent

2 Answers2