Usar text-indent negativo para ocultar textos

[aguila_393]

Esta bien usar por ejemplo text-indent:-5000px; para ocultar un texto de un div? Estoy haciendo una barra para seleccionar el idioma del sitio, y entonces hice algo asi:
<a id="english" href="..."> English </a>

y en el CSS:
#english{width:24px;height:24px;text-indent:-5000px;display:block}

De esta manera me queda la imagen de la bandera del idioma y no aparece el texto. Esta bien hacer esto? O directamente no hay que poner el texto?

[oldie]

y por que no le pones un visiblility: hidden; ?

[PHPeros]

Iniciado por oldie

y por que no le pones un visiblility: hidden; ?

O mejor: display:none;

[pzin]

Si oculta la visibilidad o el elemento, entonces ya no hay elemento, obviamente.

Es mejor la misma técnica pero con una metodología diferente:

Código CSS:

text-indent: 100%;
white-space: nowrap;
overflow: hidden;
 

U otra cosa, por ejemplo usando un padding de mayor valor que la altura del elemento.

Así el navegador no tiene que dibujar una caja de tantos pixeles.

Por otro lado, tal vez sería mejor indicar en los atributos title o rel lo del idioma. Al fin y al cabo, los buscadores si leen y dan importancia a sus valores.

[ryugen]

Qué tal sino la clase visuallyhidden de HTML5 Boilerplate?

Código CSS:

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
 
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
 
/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
 
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}
 

Fuente: https://github.com/h5bp/html5-boiler.../main.css#L147

Para este ejemplo particular como bien dice pzin me inclinaría por el atributo title o inclusive el alt de la img. Pero para ocultar texto visualmente uso la clase presentada arriba.