A story on web engines interoperability related to wavy text decorations

This is a blog post explaining the process of fixing an issue related to wavy text decorations in Blink, that ended up with a similar fix in WebKit.

Interesting to read about the work and thought-process behind at-first sight “seemingly simple features” such as the wavy underlines for Spelling and Grammar errors. Be sure to also read the two linked posts by Delan if you want to lift the hood up even further.

A story on web engines interoperability related to wavy text decorations →

Animating Text Underlines

Instead of resorting to faux underlines using injected content, Michelle Barker shares that we nowadays can animate the text-decoration-* properties to achieve similar (and better) results.

This approach however won’t work in Chromium, as only Firefox/Safari support animating text-underline-offset at the moment … but thankfully a tiny amount of CSS Houdini Magic can be sprinkled on top to make Chromium happy 🤩

See the Pen
Underlines (Chrome solution with Houdini)
by Michelle Barker (@michellebarker)
on CodePen.

Animating Text Underlines →

Multi-line gradient links

Zell Liew deconstructed and recreated the gradient links as seen on CSS-Tricks

When I saw the CSS Tricks redesign, I was hooked. I loved the links with gradients. I told myself I’m going to use gradient links for my next project.

The result looks like this:

Uses the aforementioned box-decoration-break to span styles across multiple lines along with text-decoration-color to tweak the color of the line below the link.

.gradient-text {
  background: linear-gradient(120deg, #ab4e19, #c99a2e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  text-decoration-color: #ab4e19;

Multi-line gradient links →

text-decoration-* CSS Properties Coming to Firefox

Glad to see this announcement by Mozillian Daniel Holbert:

As of today (Sept 12 2019), I’ve turned on support for the CSS properties text-decoration-skip-ink, text-decoration-thickness, and text-underline-offset, on all platforms.

As posted before, text-decoration-skip-ink gives you nicer underlines. The other two properties allow one to tweak the position and color of the underline. CSS Tricks recently published a good post on how to use them.

The features are now in Nightly and will be included in Firefox 70 🙂

“Intent to ship” Announcement →
Nicer CSS underlines with text-decoration-skip-ink: auto;
Styling Links with Real Underlines →