Glitch 2022 header: color fringes around links

There’s a new blog post out about how Glitch made that colorful header on their homepage.

The header.


I’ve long wondered why there is sort of a color border on the links.

image

Enlarged view of “WebXR” link, rendered in Firefox on Windows.

Now that there’s a blog post about it out, it’s finally clear. It’s because you’re looking at this

image

on top of this

image

on top of this

image

The pixels at the periphery of the text are partially inside the text and partially outside. The renderer knows as much as:

  • the light blue covers the whole pixel
  • the purple gradient covers part of the pixel and goes over the light blue
  • the yellow covers part of the pixel and goes over everything else

The purple and yellow actually cover the same part, but the renderers in browsers don’t know that. So it ends up drawing a pixel that’s combination of all three, even though there ought to be no purple. I wrote an article about this once.

https://wh0.github.io/2019/11/05/rasterization.html


What would be good is if we could have the purple layer not draw the text corresponding to those links, then the browser would only have to blend light blue and yellow.

But the text also kiiinda needs to be there, so that the text layout remains the same.

A modified version of the header with the linked words simply removed from the gradient layer.

No problem, right? Invisible text is how they make the colored links layer line up. They just set the text color to transparent.

image

Styling used in the colored links layer. More CSS makes the links have color other than transparent.

But there’s no such luck doing the same there here. The gradient text is done by using a background gradient with background-clip: text, and with the text already transparent (i.e. thus not contributing any additional color to the background gradient).

image
Styling of the gradient layer. I’m guessing they use -webkit-text-fill-color instead of color so that a reasonable color can be set for graceful degradation.

What turns out to be just right is visibility: hidden. As MDN describes it,

The visibility CSS property shows or hides an element without changing the layout of a document.

The gradient layer with linked words hidden using visibility: hidden.

Full composition.

image

Enlarged view of “WebXR” link, rendered in Firefox on Windows.


oh and a remix of the demo on glitch with a one-liner diff

diff --git a/style.css b/style.css
index 90a4022..e3065c7 100644
--- a/style.css
+++ b/style.css
@@ -214,6 +214,7 @@ span.fake-link {
   font-size: inherit;
   font-weight: inherit;
   text-decoration: none;
+  visibility: hidden;
 }
 
 span.link-wrapper {
6 Likes

nice catch, to be honest i never even noticed the color fringes but i also don’t wear my glasses at the computer. i’ve passed this on to jesse to check out!

3 Likes

[redacted photo of jenn using a macbook pro in a gltich video several years ago]

photographic evidence that jenn uses a macbook pro with retina display, such high dpi displays having lower proportion of pixels on the boundary of text, so that the effect is less noticeable

6 Likes

Respectfully, I do not want my face posted on here so I redacted the photo - but good eye on the Macbook Pro! It is definitely much less noticeable, those pixels, but they are definitely there!

4 Likes