Foros del Web » Creando para Internet » CSS »

Usar text-indent negativo para ocultar textos

Estas en el tema de Usar text-indent negativo para ocultar textos en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/10/2013, 12:07
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 12 años, 2 meses
Puntos: 1
Usar text-indent negativo para ocultar textos

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?
  #2 (permalink)  
Antiguo 22/10/2013, 12:41
Avatar de oldie  
Fecha de Ingreso: septiembre-2013
Mensajes: 24
Antigüedad: 6 años, 2 meses
Puntos: 0
Respuesta: Usar text-indent negativo para ocultar textos

y por que no le pones un visiblility: hidden; ?
  #3 (permalink)  
Antiguo 22/10/2013, 12:43
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 6 años, 3 meses
Puntos: 578
Respuesta: Usar text-indent negativo para ocultar textos

Cita:
Iniciado por oldie Ver Mensaje
y por que no le pones un visiblility: hidden; ?
O mejor: display:none;
  #4 (permalink)  
Antiguo 22/10/2013, 14:07
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.483
Antigüedad: 17 años, 4 meses
Puntos: 2111
Respuesta: Usar text-indent negativo para ocultar textos

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:
Ver original
  1. text-indent: 100%;
  2. white-space: nowrap;
  3. 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.
  #5 (permalink)  
Antiguo 22/10/2013, 17:28
Avatar de ryugen
Colaborador
 
Fecha de Ingreso: agosto-2008
Ubicación: Rosario, Santa Fe
Mensajes: 350
Antigüedad: 11 años, 3 meses
Puntos: 187
Respuesta: Usar text-indent negativo para ocultar textos

Qué tal sino la clase visuallyhidden de HTML5 Boilerplate?
Código CSS:
Ver original
  1. /*
  2.  * Hide only visually, but have it available for screenreaders: h5bp.com/v
  3.  */
  4.  
  5. .visuallyhidden {
  6.     border: 0;
  7.     clip: rect(0 0 0 0);
  8.     height: 1px;
  9.     margin: -1px;
  10.     overflow: hidden;
  11.     padding: 0;
  12.     position: absolute;
  13.     width: 1px;
  14. }
  15.  
  16. /*
  17.  * Extends the .visuallyhidden class to allow the element to be focusable
  18.  * when navigated to via the keyboard: h5bp.com/p
  19.  */
  20.  
  21. .visuallyhidden.focusable:active,
  22. .visuallyhidden.focusable:focus {
  23.     clip: auto;
  24.     height: auto;
  25.     margin: 0;
  26.     overflow: visible;
  27.     position: static;
  28.     width: auto;
  29. }

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.

Etiquetas: negativo, text-indent, textos, usar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:38.