Loading
Build a Flexible Ribbon Banner in Tailwind CSS Tutorial (10 exercises)
solution

Precise Banner Width Calculation

Figuring out the banner width

This step is probably the trickiest of the whole challenge.

And this is where most implementations end up using magic numbers. While doing research on different implementations, I have noticed time and time again values like this:

This screams magic value to me. And if it’s not, there is nothing hinting at how this value is what was landed on.

Go ahead, search “corner ribbon CSS” on google and go check out how that banner width is implemented!

I’ll wait here.

Ok, now let’s think about it. What should our banner width really be?

Moving to percentage-based values

First of all - we should definitely use a percentage based value, not an absolute unit like pixels.

That way, if our ribbon container changes size, our banner will adjust proportionally.

Let’s look at what we have right now:

Banner width calculation - wipLoading

Our banner container’s width is set to w-32, and our banner itself has a width of w-40.

And apparently that’s not enough.

Let’s start by switching to a percent-based width. I’ll apply w-full, which is 100%. It’s not going to work, but that’s a starting point:

Banner width calculation - wip2Loading

Yep, not enough.

What about 200%? That utility doesn’t exist out of the box, but we can use an arbitrary value to generate that on the fly:

Banner width calculation - wip3Loading

Wheeeeew. That’s way too much.

And you might think that it’s not a big deal, since we’re going to crop the banner to hide what goes outside the parent by applying overflow-hidden to the parent container:

Banner width calculation - wip4Loading

Even if we center the text inside the banner with text-center, it’s still going to be an issue, unless we get really close:

Banner width calculation - wip5Loading

What if the banner width was 150%?

Banner width calculation - wip6Loading

Oh wow. Did we just nail that?!

No, we did not. We might get away with it, since we’re cropping the extra bit of banner.

But look at it. You know that text is not perfectly centered. And now you cannot unsee it.

We don’t want to settle for “might get away with it”. Let’s do it properly.

I’ll remove the overflow-hidden class on the parent, to reveal how off we actually were:

Banner width calculation - wip7Loading

Heh. Not even close!

140%?

Banner width calculation - wip8Loading

Ok, now we are really close.

Looks like our width is just above 140% of the parent.

141%?

What are we doing here?

Magic numbers. That’s what we’re doing. We’re nudging that width up and down until it looks almost right.

And to this I say STOP! Let’s figure out the real, logical value this banner width should have.

Let’s do some 7th grade school geometry

What are we trying to measure here?

We want the distance between the top-left and bottom-right of the parent container.

Back to drawing shapes. Take a look at this shape.

Banner width calculation - wip9Loading

I cut the parent container into a triangle. A right-angled triangle. And all of a sudden it’s pretty clear what we’re trying to measure.

We’re measuring the length of a right-angled triangle’s longest edge, also called the hypotenuse.

And right now, you should feel memories from school geometry classes.

You probably learned how to calculate the length of a triangle’s edge. You probably learned about the Pythagorean Theorem.

And you probably never used it until today 😅

Banner width calculation - wip10Loading

If we know the width of the 2 edges, we can figure out the exact width of the third one.

We’re working with a square. Since we’re using percentage-based values, let’s assume our a and b edges are each 100 in width (100%):

Banner width calculation - wip11Loading

Hey, look. 141.42% is the exact width of our ribbon banner.

We were super close with our 141%!

But there’s a huge difference now: we can explain why this value is what it is.

We went from nudging random values up and down to having a scientific explanation for the exact width. With a theorem to back it up.

Let’s try it out in our CSS:

Banner width calculation - wip12Loading

Sweet! Pixel perfect.

Now matter how much we zoom in, it’s exactly right.

Banner width calculation - wip13Loading

Transcript

The first thing we should do is move away from an absolute unit value like pixels and use something like a percentage-based value. Right now, we're using w-40, but look at what happens if I change the dimension of the container element to something like 48.

As you can see, the ribbon banner itself is not going to adapt to this, so let's go back to 32, and we're going to use a percentage-based value. I'll start with w-full, which is 100 percent. That's going to be too short, but now, if the container width changes, the ribbon width will remain proportional to the container.

100 percent width is obviously not enough. What about 200 percent? We don't have that value out of the box, but we can use arbitrary values to go width 200 percent. Whoa, this is clearly too much now. It's breaking out of our view port.

What about 150 percent? It's getting close. You might think that we can get away with this, especially because we're going to crop out the excess of the ribbon. Yeah, if we look at the figma file for a second, we can see that our banner rectangle here is being cropped to the area of the container.

We'll eventually translate this in CSS by using overflow-hidden on the container. Let me show you that real quick. On the container element here, I'll add overflow-hidden. Eventually, this would not have a background color either. We just have it to see what happens now.

Our text is still cropped, but if we also had a text-center class on the ribbon, you would likely get away with this. We're not going to settle for that here. We want to have the exact value, and we want to be able to explain why, which is the key part. While we need the overflow-hidden class eventually, I'll remove it for now. I'll bring back the background color of bg-amber-100.

150 percent is too much. What about 140 percent? Ooh, it's getting really close. Let me open this in a browser so I can zoom in real close. You can see we're not quite there, but it's getting really close. Maybe 141 percent? Mm, that looks very, very close.

What are we doing here? Magic numbers, [gasp] that's what we're doing here. To this, I say stop. [electronic stop sound] Let's figure out the real, logical value that our banner should have. Instead of nudging our width one percent at a time like we started doing, let's start thinking about what we're trying to measure here.

Let's go back to drawing imaginary shapes in our figma file. Take a look at that shape here, a right-angled triangle to be precise. All of a sudden, it's pretty clear what we're trying to measure. We're measuring the length of a right-angled triangle's longest edge, which is also called the hypotenuse.

You probably learned at some point about the Pythagorean theorem. That's pretty hard to say for me in English, and it's also probably been a long while since you used that theorem last. If you take a right-angled triangle where the longest edge is C, A^2 + B^2 = C^2.

In our case, let's say the value of A was one and B was one as well. You can see the value of C would be approximately 1.41. Wait, remember the width we've used in our code? 141 percent. If our container's height and width were both 100 percent, the diagonal of that square would be roughly 141.42 percent.

I can copy that value and use that here. You can see that now width is set with extreme precision. More importantly, we have an explanation for this value. We went from nudging our width bit by bit to having a scientific explanation for why we have an exact value with a theorem to back it up.