CSS-Unterstreichungen sind in Chrome zu dünn und zu niedrig

Bei der Überprüfung der neuen CSS-Eigenschaften text-decoration-thickness und text-underline-offset sind mir zwei Fehler in Chrome aufgefallen, die ich in diesem Artikel mit Ihnen teilen möchte.

Inhaltsverzeichnis

• Standard-Unterstreichungen sind inkonsistent
• Glücklicherweise können wir die Standardeinstellungen der Browser überschreiben
• Chrome-Fehler 1: Unterstreichungen sind unter macOS zu dünn
• Chrome-Fehler 2: Unterstreichungen sind zu niedrig
• Helfen Sie mit, die Chrome-Fehler zu priorisieren

Lassen Sie uns zunächst eines anerkennen

Standard-Unterstreichungen sind inkonsistent

Fügen wir einem einfachen Web-Page einen Textlink hinzu, setzen Sie seine font-family auf Arial und vergleichen Sie die Unterstreichungen über Browser und Betriebssysteme hinweg.

Wie Sie sehen können, ist die Standard-Unterstreichung über Browser hinweg inkonsistent. Jeder Browser wählt seine eigene Standarddicke und vertikale Position (Abstand von der Grundlinie) für die Unterstreichung. Dies steht im Einklang mit dem CSS Text Decoration Modul, das das folgende Standardverhalten (auto Wert) spezifiziert:

Der User-Agent wählt eine angemessene Dicke für Textdekorationslinien. [...] Der User-Agent wählt einen angemessenen Abstand für Unterstreichungen.

Glücklicherweise können wir die Standardeinstellungen der Browser überschreiben

Es gibt zwei neue, weit verbreitete CSS-Eigenschaften, die es uns ermöglichen, Dicke und Abstand für unsere Unterstreichungen präzise zu definieren

• text-decoration-thickness
• text-underline-offset

Mit diesen Eigenschaften können wir konsistente Unterstreichungen auch über zwei sehr unterschiedliche Browser hinweg erstellen, wie z. B. den Gecko-basierten Firefox auf Android und den WebKit-basierten Safari auf macOS.

h1 {
  text-decoration: underline;
  text-decoration-thickness: 0.04em;
  text-underline-offset: 0.03em;
}

Hinweis: Die Eigenschaft text-decoration-thickness hat auch einen speziellen Wert from-font, der Browser anweist, die von der Schriftart bevorzugte Unterstreichungsbreite zu verwenden, falls verfügbar. Ich habe diesen Wert getestet mit einigen verschiedenen Schriftarten, aber die Unterstreichungen waren inkonsistent.

OK, dann kommen wir zu den beiden Chrome-Fehlern, die ich zuvor erwähnt habe.

Chrome-Fehler 1: Unterstreichungen sind unter macOS zu dünn

Wenn Sie die Eigenschaft text-decoration-thickness auf einen schriftenbasierten Längenwert setzen, der sich zu einem nicht-ganzzahligen Pixelwert berechnet, „rundet“ Chrome diesen Wert ab, anstatt ihn auf die nächste ganze Zahl zu runden. Wenn beispielsweise die deklarierte Dicke 0.06em beträgt und sich dies zu 1.92px berechnet, zeichnet Chrome eine Dicke von 1px anstelle von 2px. Dieses Problem ist auf macOS beschränkt.

a {
  font-size: 2em; /* computes to 32px */
  text-decoration-thickness: 0.06em; /* computes to 1.92px */
}

Beachten Sie im folgenden Screenshot, wie die Textdekorationslinien in Chrome (dritte Zeile) doppelt so dünn sind wie in Safari und Firefox.

Weitere Informationen zu diesem Fehler finden Sie unter Chromium-Problem #1255280.

Chrome-Fehler 2: Unterstreichungen sind zu niedrig

Die Eigenschaft text-underline-offset ermöglicht es uns, den Abstand zwischen der alphabetischen Grundlinie und der Unterstreichung (dem Abstand der Unterstreichung von der Grundlinie) präzise einzustellen. Leider ist diese Funktion derzeit in Chrome nicht korrekt implementiert, und infolgedessen ist die Unterstreichung zu niedrig positioniert.

h1 {
  text-decoration: underline;
  text-decoration-color: #f707;

  /* disable “skip ink” */
  -webkit-text-decoration-skip: none; /* Safari */
  text-decoration-skip-ink: none;

  /* cover the entire descender */
  text-decoration-thickness: 0.175em; /* descender height */
  text-underline-offset: 0; /* no offset from baseline */
}

Aufgrund dieses Fehlers ist es in Chrome nicht möglich, die Unterstreichung bis zur Grundlinie zu verschieben.

Weitere Informationen zu diesem Fehler finden Sie unter Chromium-Problem #1172623.

Hinweis: Wie Sie vielleicht auf dem obigen Bild bemerkt haben, zeichnet Safari Unterstreichungen über den Unterlängen anstatt darunter. Dies ist ein WebKit-Fehler, der erst kürzlich behoben wurde. Die Korrektur sollte in der nächsten Version von Safari veröffentlicht werden.

Helfen Sie mit, die Chrome-Fehler zu priorisieren

Die beiden neuen CSS-Eigenschaften zur Gestaltung von Unterstreichungen sind eine willkommene Ergänzung zu CSS. Hoffentlich werden die beiden damit verbundenen Chrome-Fehler früher als später behoben. Wenn diese CSS-Features für Sie wichtig sind, lassen Sie Ihre Stimme gehört werden, indem Sie die Fehler im Chromium-Fehlerverfolgungssystem mit einem Stern markieren.