Sollte Kollision mit Textabsteigern unterstreichen?

Das Textdekorationsmodul von CSS3 enthält eine Text-Unterstreichungsposition- Eigenschaft, die angibt, ob die Unterstreichung unter dem gesamten Text positioniert werden soll:

oder direkt unterhalb der Grundlinie, sodass sie mit Textabkömmlingen kollidiert:

Okay, wir alle wissen, wie Unterstreichung nur als letzte Möglichkeit verwendet werden sollte, aber… wenn Sie es verwenden wollen, wie wird es am häufigsten durchgeführt? Welche Vor- und Nachteile hat jeder Unterstreichungsstil?

Was ist am häufigsten?

Nun, einige Typografen werden sagen, dass das Unterstreichen wahrscheinlich insgesamt vermieden werden sollte und dass das Unterstreichen nur für die Verwendung auf Schreibmaschinen oder für Hyperlinks im Web geeignet ist. Ich möchte jedoch hinzufügen, dass es bei Kreativität darum geht, Möglichkeiten zu erkennen, um Regeln auf kreative Weise zu brechen. Wie sehr Sie sich von diesem Leitfaden leiten lassen, liegt ganz bei Ihnen.

Im Web ist es am gebräuchlichsten, wenn es sich direkt unterhalb der Grundlinie überlappt. Dies liegt jedoch nur daran, dass dies bis jetzt das Standard-Rendering für große Browser war.

Bei Schreibmaschinen überlappt das Unterstreichen die Nachkommastellen, jedoch etwas anders: Es liegt zwischen Ihren beiden Beispielen ( Beispiel ). Wenn Sie sich die Grundlinie des Unterstrichs ansehen, z. B. die unterste Schleife von goder die unterste Serife von p(in einer Serifenschrift), befindet sich dort die Unterstreichung. So "verbindet" es sich mit dem Boden der Abseilgeräte.

Vor-und Nachteile

Der Vorteil der Überlappung der Unterstreichung mit Ihren Unterstrichen besteht darin, dass der Zeilenabstand (oder "führende") überhaupt nicht beeinflusst wird. Sie müssen den Abstand zwischen den Zeilen nicht vergrößern, um die Unterstreichung aufzunehmen.

Der Vorteil davon, dass Sie keine Abstriche machen müssen, ist die Lesbarkeit, wenn dies wichtig ist. Sie hätten jedoch den Nachteil, dass Sie den Abstand zwischen den Zeilen vergrößern müssen. Wenn Ihre Situation ohnehin viel Zeilenabstand zulässt, dann machen Sie es auf jeden Fall.

Wenn Sie das Web verwenden, ist das Unterstreichen stark mit Hyperlinks verbunden. Daher sollte jegliche Verwendung von Unterstreichungen für Text, der nicht Teil eines Links ist, vermieden werden. Kennzeichnen Sie das, was Sie auf andere Weise kennzeichnen möchten - fett , kursiv oder mit GROSSBUCHSTABEN.

Ich bin der Meinung, dass unterstrichene Texte im Allgemeinen so geringfügig sind, dass der Unterschied für den Leser nicht vorhanden ist. Dies ist eines der Dinge, die dem Designer sehr am Herzen liegen , den Lesern jedoch niemals. Meiner Meinung nach ist alles eher eine stilistische Entscheidung.

Ich bevorzuge die Grundlinienpositionierung mit einer Pause an den Abseilstellen: dh text-decoration-skip: ink;das wird derzeit aber nicht wirklich unterstützt. Ich bin so weit gegangen, zwei Klassen zu haben und den Unterstrichen eine Spanne hinzuzufügen, um die Unterstreichung von ihnen zu entfernen. (Text wird durch PHP ersetzt, es muss also nicht viel Code erstellt werden).

Ich werde den Trick für den unteren Rand (oder das untere Attribut) wegen des Versatzes nie verwenden. Ich finde, bei meinen Lesern ist der Versatz der Unterstreichung für sie weit, weit, weit ablenkender als alles andere.

Ich versuche, zu fett, kursiv, fett kursiv oder zu Farbabweichungen zu wechseln, anstatt wenn möglich zu unterstreichen.

Die Beschreibungtext-decoration: underline in der CSS 2.1-Spezifikation definiert den Effekt als Unterstreichung ohne Details, aber Browser implementieren ihn so, dass er nur wenig unterhalb der Grundlinie angezeigt wird. Daher schneidet es häufig Nachkommen (und diakritische Zeichen, die unter einem Buchstaben platziert sind).

Im CSS3-Textentwurf gibt es die text-underline-positionPosition, aber sie scheint von keinem Browser unterstützt zu werden. (Laut css666.com-Info wird es vom IE unterstützt, aber zumindest in IE 9 scheint die Unterstützung darauf beschränkt zu sein, die Eigenschaft zu erkennen und den Wert auto, den Anfangswert, zu akzeptieren - es handelt sich also wirklich nicht um Unterstützung.) Update : Tatsächlich , IE (ab Version 6) bietet etwas mehr Unterstützung , aber Sie können wirklich nur die Unterstreichung über dem Text (!) Und nicht darunter platzieren.

Wie in der Antwort von Scott und im Kommentar von Joonas beschrieben, können Sie einen unteren Rand verwenden, um eine Unterstreichung zu simulieren, und dann haben Sie eine ziemlich gute Kontrolle über den „Unterstreichungsstil“. Dies könnte zB für unterstrichene Links geeignet sein, die für sich stehen, nicht inline. Für Inline-Text, bei dem Sie möglicherweise unterstreichen möchten, z. B. weil Sie HTML-formatierte Drucksachen sind, die Unterstreichungen enthalten, ist die normale CSS-Unterstreichung wahrscheinlich besser - da diese Unterstreichung mehr oder weniger den Drucktraditionen entspricht.