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.

some lines of text showing both red and blue, ruining the zebra effect.
Imagine how much worse you could dork it up with an <img> sitting inline or something.

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…

sub and sup characters totally missing visually from the text.
The sub and sup elements have disappeared and I don’t really understand why.

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


1 Actually it’s just John.

🀘

CodePen

I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen PRO

One response to “Zebra Stripe Lines of Text Even When They Wrap”

  1. Alexey Bulygin says:

    Hey Chris.
    I’ve little modified your solution and it works for me in all cases

    https://codepen.io/mdss/pen/eYLGraY

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️