Sehr dünne Link-Unterstreichungen

[oxo888oxo]

Hallo

Es geht mir um das Thema Link-Unterstreichung. Man soll aus verschiedenen Gründen Links ja unterstrichen darstellen.

Auf meiner Website setze ich das auch um. Aber die Unterstreichung hätte ich gerne noch dezenter.

Ich habe heute eine Website gefunden, auf der das sehr schön gelungen ist. Und zwar diese hier: https://kulturbanause.de/

Könnt Ihr mir sagen, wie man es hinbekommt, dass die Unterstreichungen so schön dünn sind?

Gruß Ingo

[Rolf B]

Hallo oxo888oxo,

rechte Maustaste, "Untersuchen", im Elemente-Inspektor anschauen, fertig. Es ist ein border-bottom.

Ich denke, aus Zugänglichkeitsgründen ist es egal, ob Text unterstrichen ist oder eine Border hat.

Der Unterschied ist

• der Abstand zum Text. Eine Unterstreichung ist dichter am Text und wird bei Unterlängen unterbrochen. Eine Border ist unterhalb der Unterlängen.
• des Verhalten in Blockelementen. Eine Border ist am unteren Rand des Elements, d.h. mehrzeiliger Text wird nicht Zeile für Zeile unterstrichen. Solange das <a> Element ein Inline-Element ist, fällt das nicht auf

Wenn Du eine echte Unterstreichung willst, die aber dünner sein soll als der Default, dann schau Dir text-decoration-thickness an.

Denk aber auch dran, dass diese Unterstreichung auch erkennbar sein soll. Der Browser stellt sicher, dass sie mindestens 1px dick ist, aber wenn Du eine schwach kontrastierende Farbe nimmst (so wie die Kulturbanausen), dann sieht man sie mitunter gar nicht mehr. Dabei darfst Du nicht von deiner eigenen Sehkraft ausgehen. Wer auch mit Brille nur 50% sieht, soll immer noch erkennen können, dass da ein Link ist.

Rolf

[MudGuard]

Hi,

Wenn Du eine echte Unterstreichung willst, die aber dünner sein soll als der Default, dann schau Dir text-decoration-thickness an.

evtl. könnte man auch mit text-decoration-style: dotted; eine schwächer wirkende Unterstreichung erreichen.

cu,
Andreas a/k/a MudGuard

[oxo888oxo]

Hallo Rolf

Wenn Du eine echte Unterstreichung willst, die aber dünner sein soll als der Default, dann schau Dir text-decoration-thickness an.

Oh ja super. Das kannte ich noch garnicht. Habe ich gerade mal auf meiner Seite angewendet. Und es gefällt mir schon mal sehr gut. Danke Dir.

Den Abstand der Unterstreichung zum Text kann man sicher nicht "einfach" per CSS verändern, oder?

Gruß Ingo

[oxo888oxo]

Hallo nochmal

Ich habe es jetzt mit "text-decoration-thickness; 1px;" und "text-underline-position:under;" gemacht. Und so schuat es schon sehr viel schöner aus. Und die Links sind immer noch gut und einfach als solche Erkenbar.

Was haltet Ihr davon? Schaut hier: https://spaceart.de/produkte/mba008-mondbasis-alpha-1-deluxe-eagle-gift-set.php

Gruß Ingo

[Rolf B]

Hallo oxo888oxo,

argh - diese CSS-Eigenschaften vermehren sich schneller als Corona-Viren.

text-underline-position kennt unser Wiki noch gar nicht.

Und text-underline-offset auch nicht - die suchst Du vermutlich.

Rolf

[Rolf B]

Hallo Ingrid,

zumindest im Tutorial-Artikel zu Textdekoration steht's jetzt drin. Referenzartikel kann jeder schreiben, der Lust dazu hat (nein, Matthias, du hast keine Lust!)

Rolf

[nix]

Darf ich gleich noch ein Karnickel drauflegen? Also (auch) wegen „dichter am Text und wird bei Unterlängen unterbrochen“. (Und gleich daneben brauen sie an einem text-decoration-skip herum; anscheinend war das vor kurzem sogar noch ein text-decoration-skip: ink …)

[Rolf B]

Hallo nix,

text-decoration-skip-ink habe ich mit ins Wiki eingebaut, für westliche Schriften ist diese Eigenschaft im "auto" Zustand perfekt und braucht keine Beachtung.

text-decoration-skip ist sozusagen der große Bruder davon und gilt als experimentell. Das, was MDN dazu schreibt, basiert auf der Spec von 2018. In 2020 sah das bereits anders aus, offenbar haben die Spec-Autoren (eine Apple-Google Kooperation) gemerkt, dass die Browserhersteller auf die 2018er Version keinen Bock hatten.

Was davon nun wie in den Brausern gelandet ist, müsste man nun mühsam aus den Release Notes der Browser herauspopeln. Bei Google finde ich einen Hinweis, dass sie text-decoration-skip missbilligen und entfernen wollen - in den Entwicklerwerkzeugen von Chrome und Firefox sieht es auch so aus, als wäre diese Eigenschaft in Chrome nicht vorhanden.

Da muss man abwarten, ob sich noch was entwickelt. Es ist alles noch Working Draft, auch wenn schon Teile in den Browsern sind.

Liste aller CSS Module mit ihrem Status

Rolf

[nix]

Nur ein kleiner Anhag zu dem, was ich auf die Schnelle da gefunden habe: text-decoration-skip ist anscheinend mittlerweile von „fast fertig“ wieder in die Ecke „frühe Baustelle“ geschoben worden.

Gesucht hatte ich, weil ich mich vage daran erinnert habe, etwas über Unterstreichungen „mit und ohne Lücken“ gelesen zu haben. W3.org? Ich weiß es nicht mehr. Und nach dem oben erwähnten „Baustelle in Bewegung“ lohnt sich da ein Nachbohren vmtl. auch nicht groß.

Ach ja: FF scheint text-decoration-skip-ink zu mögen, hält von text-decoration-skip aber nichts. Safari mag text-decoration-skip mit und ohne -ink. Meinen jedenfalls die Inspektoren …

[Rolf B]

Hallo nix,

danke für den Hinweis. Bei Safari meint auch MDN, dass er die non-ink Version kennen würde.

Apple halt, immer was Besonderes 😉. Aber welche Werte akzeptieren die? Die von 2018 oder die von 2020?

Rolf

[nix]

Hab’ mal schnell zwei Beispiele ausgeliehen. Das sieht im aktuelle Safari dann mal so aus:

Und: er mag keine „kurzen Hände“, jedenfalls nicht alle:
Also habe ich im Inspektor („mit gelben Fingern“) schnell noch die Langstrecken-Version drangebastelt. Sonst wär’s ja nur umsonst gewesen.

<html>
<head>
  <style>
    :root { font-size: 16pt; }
    * { margin: 0; padding: 0; }
    div { margin: 6pt; padding: 6pt; border: 1pt solid green; }
    .e1 p {
      font-size: 3em;
      text-decoration: underline; text-decoration-skip: edges;
    }
    .e2 p {
      font-size: 1.5em;
      text-decoration: underline blue; text-decoration-skip-ink: auto;
    }
    .no-skip-ink { text-decoration-skip-ink: none; }
    .skip-ink-all { text-decoration-skip-ink: all; }
    kbd { margin-block: 1lh; color: blue; }
  </style>
</head>
<body>
  <div class="e1">
    <p>Hey, grab a cup of <em>coffee!</em></p>
    <kbd>https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip</kbd>
  </div>
  <div class="e2">
    <p>You should go on a quest for a cup of coffee.</p>
    <p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
    <p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
    <p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p>
    <kbd>https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip-ink</kbd>
  </div>
</body>
</html>

[Gunnar Bittersmann]

@@nix

Interessant, dass bei so ziemlich allen Schriften (in meinem Beispiel lateinisch, griechisch, kyrillisch, georgisch, armenisch, arabisch, hebräisch, Devanagari, Kannada, birmanisch, tibetisch) Lücken in der Unterstreichung gemacht werden; nicht aber bei Hanzi/Kanji. (Kana und Hangul-Zeichen ragen eher nicht in die Unterlänge.)

In einer Schrift steht nicht „Pythagoras“ (da wäre keine Unterlänge). Wer findet’s?

Kwakoni Yiquan

[Gunnar Bittersmann]

@@Gunnar Bittersmann

In einer Schrift steht nicht „Pythagoras“ (da wäre keine Unterlänge). Wer findet’s?

סוקרטס – Sokrates

Von den hebräischen Buchstaben reichen nur das Qof ק und die Endformen von Kaf ך, Nun ן, Pe ף und Tsade ץ runter in den Keller.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

wenn ich Google Translate anwerfe, bekomme ich für Pythagoras

畢 達 哥 拉 斯

Spaces dazwischen von mir für bessere Erkennbarkeit. Das erste Ideogramm weicht leicht ab, das zweite ist total anders. Teils ist es gleich, aber bei Dir rennt da eher Aristoteles weg, der sein Handtuch sucht. Bei mir ist viel mehr Gestrüpp drin. Die letzten 3 sind gleich. Google transkribiert meins als "Bì dá gē lā sī".

Whatever - er unterstreicht es bei mir gnadenlos, egal ob ich skip-ink auf auto oder all setze. Vielleicht hängt es auch am Font.

Rolf

[MudGuard]

Hi,

Interessant, dass bei so ziemlich allen Schriften (in meinem Beispiel lateinisch, griechisch, kyrillisch, georgisch, armenisch, arabisch, hebräisch, Devanagari, Kannada, birmanisch, tibetisch) Lücken in der Unterstreichung gemacht werden;

in der Aufzählung in Klammern fehlt das letzte - chinesisch.

das birmanisch sieht hübsch aus (drittes von unten).

cu,
Andreas a/k/a MudGuard

[Der Martin]

Hallo,

Eine Unterstreichung [...] wird bei Unterlängen unterbrochen.

nach meiner Erfahrung ist das in Chromia so, in Geckos nicht.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Eine Unterstreichung [...] wird bei Unterlängen unterbrochen.

nach meiner Erfahrung ist das in Chromia so, in Geckos nicht.

Dann ist deine Erfahrung entweder alt oder sie trügt oder Firefox verhält sich auf verschiedenen Betriebssystemen unterschiedlich. An letzteres glaube ich am wenigsten.

Screenshot: Beispiel im Firefox auf macOS.

Kwakoni Yiquan

[MudGuard]

Hi,

Screenshot: Beispiel im Firefox auf macOS.

Firefox auf Windows sieht ähnlich aus.

cu,
Andreas a/k/a MudGuard

[nix]

Das scheint sich zwar schon weitgehend erledigt zu haben, aber ich habe gerade noch etwas zum Thema und drum herum gefunden.