Zebra Stripe Lines of Text Even When They Wrap

The trick is essentially the same as the gradient text trick. Make the letters act as the mask, and set the background to a gradient. It’s just this time, the gradient will be solid alternating colors.

.zebra-text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    to bottom, red 1lh, blue 1lh, blue);
  background-size: 100% 2lh;
}Code language: CSS (css)

The trick is the lh units. New! Line-height units! Cool!

Just Chrome so far, so best to wrap this kind of stuff in an @supports:

@supports (height: 1lh) and (-webkit-background-clip: text) {
  .zebra-text {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to bottom, red 1lh, blue 1lh, blue);
    background-size: 100% 2lh;
  }
}Code language: CSS (css)

I don’t know that this was particularly doable without the lh unit. You could probably do it on a one-off basis by figuring out some magic numbers, but it would be terribly inflexible and prone to breakage. I also wish the -webkit- properties felt more stable.

Not Bulletproof

While line-height as a unit is pretty neat and does have a niche use here… it’s not bulletproof. That is, the space between lines isn’t solely dictated by line height.

For example, Šime pointed out that just <sub> and <sup> can start to screw it up.

That got me thinking about this other post idea I’ve been noodling on, which is just how much “secret forgotten knowledge” can get tucked away into CSS. Just all kinds of little stuff that probably should continue living on a particular site, but is at risk of being cleared away in redesigns. One of those things is related do <sub> and <sup> and it’s this little snippet that normalizes line-height even after you use them:

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}Code language: CSS (css)

I love that. I don’t think those elements should mess with vertical rhythm. Secret hidden knowledge that’s easy to lose track of in CSS.

But anyway if I add that and look in Chrome (the only browser supporting this cocktail of CSS), I get…

Anyway, when a rendering engine luminary like David says it’s problematic, it is, but hey danger is my middle name¹.

---

¹ Actually it’s just John.