DH
David Hellmann
2011/04/04

Text-Indent – Text verstecken aber bitte richtig!

Oft passiert es, dass man Grafiken anstelle von Text einsetzt. Da man aber auch möchte, dass der Text dennoch, für zum Beispiel Suchmaschinen, lesbar ist, bedient man sich der ein oder anderen Möglichkeit das zu erreichen. Eine davon und auch die von mir bevorzugte ist die CSS-Eigenschaft „Text-Indent“. Sie macht nicht mehr oder weniger als den Text zu verschieben. Das ganze hat den Vorteil, dass der eigentliche Text, den man durch eine Grafik ersetzen möchte, dennoch im Quelletext erscheint und somit auch lesbar ist. Wenn man auf einer Seite, die Text-Indent nutzt, die Stylesheet-Datei deaktiviert sieht man ganz gut, dass die Texte auftauchen.

Beispiel für die Nutzung

      
        <h1>Hier steht der Headline Text</h1>
      
    
      
        h1 {
	background:url(h1_headline.png) 0 0 no-repeat;
	text-indent:-99999px;
}
      
    

Warum dieser Artikel?

Ganz einfach. Oft sieht man es, dass der Wert von Text-Indent zu gering gewählt wird. Letztens bin ich über diese Seite hier gestoßen: http://kacperbeduch.pl/ und dort tritt genau das ein was eigentlich nicht sein sollte. Der Entwickler dieser Seite hat einen Text-Indent Wert von −1000px gewählt. Ich sitze hier an einem 27“ Monitor mir 2540px in der Breite. Was passiert bei mir? Die Texte werden einfach zu wenig verschoben und tauchen im linken Teil der Website auf.

Kacperbeduch

Klar, wer hat schon so ein großes Display... Aber darum geht es mir nicht. Wenn ich den Wert setze dann kann ich ihn auch gleich so setzen, dass man alle Möglichkeiten abdeckt. Ich setze den Wert daher immer sehr hoch an wie zum Beispiel −99999px womit man auf der sicheren Seite sein sollte. Letztendlich ist es halt ein kleiner Makel den man vermeiden kann. Das war es auch schon :)

comments powered by Disqus

Maybe interesting…

UP