Text-decoration g, j, p, q, y

[Gernot Back]

Hallo Martin,

Die Buchstaben g, j, p, q, y haben Unterlängen
Bei border-bottom werden die Unterlängen nicht geschnitten.

Richtig, daran hatte ich auch schon gedacht. Das wäre aber von der Optik her eher ein Pluspunkt für die Verwendung von border-bottom anstatt einer echten Unterstreichung.

Wenn es darum geht, dem usability-erschwerenden Eindruck entgegenzuwirken, es handele sich bei der unterstrichenen Textpassage um einen anklickbaren Link, der sich bei einer Webseite immer aufdrängt, gebe ich dir Recht. Aber mit unterschiedlichen Unterstrichstärken und -farben könnte man da ja auch eine Differenzierung von üblichen Links einführen.

Mit Border-Bottom geht es allerdings leichter, den Strich in einer anderen Stärke und in einer anderen Farbe zu definieren als den "unterstrichenen" Text.

Ich habe da mal experimentiert. Der folgende Code wird bei meinen Browsern nur in Mozilla-Derivaten so interpretiert wie ich das haben möchte:

  
em { font-family:Arial,verdana,Helvetica,Swiss,sans-serif;  
   font-weight:900;  
   color:red;  
   font-style:normal;  
   text-decoration:underline;  
}  
  
em span {  
   font-weight:100;  
   color:black;  
}  

Es gäbe da aber auch noch die Möglichkeit, mit einem Hintergrundbild zu arbeiten, bei dem man die Strichstärke und -farbe nach Gusto definiert. Das hat freilich den Nachteil, dass dieses in bestimmten Ausgabemedien (Druck, Handy, etc.) üblicherweise gar nicht angezeigt wird.

  
em {  
   font-family:Arial,verdana,Helvetica,Swiss,sans-serif;  
   font-style:normal;  
   font-weight:normal;  
   color:black;  
   background:url(dreiRotePixelUeberEinander.gif) repeat-x 0 .98em;  
}  

Gruß Gernot