September 19th: Color Fonts, Dynamic Island Doom, and Generative Growth

Chris' Corner

I needed to apply border-radius to only some corners of an element the other day. I’ve worked with CSS long enough that I’ve memorized the slightly-strange syntax for individual corners. For example, border-top-right-radius. I’ve always found it weird how the placement instructions are in the middle. Like if I owned a Donut Shop and was opening another location on the North side of the city, it would be weird to call it Donut North Shop when Donut Shop North feels more natural.

In Jeremy Keith’s Let’s get logical, ultimately he’s putting a point again on logical properties and how they aren’t (yet) consistently available across all things in CSS that have to do with direction and size. But he started with some border-radius stuff that I appreciated, as like I said, I was just doing individual corner stuff the other day.

My brain went: oh! I know this! Let’s think about the term border-top-right-radius. We’re trying not to say top anymore as that’s not as friendly in situations where we’re flip directions. Instead it’s the block direction and in the English language I’m used to, top maps to start. So top == block-start. Likewise, right is the inline direction and maps to end. So right == inline-end. So if we replace those terms, we get: border-block-start-inline-end-radius. But alas, no.

The syntax border-block-start-inline-end-radius is not correct. Jeremy notes that you just “have to keep the order of properties in mind”. It’s actually in the format of border-[block direction]-[inline-direction]-radius. You skip the block or inline, as it is implied by the placement. OK! So what I think of in English as border-top-right-radius is border-start-end-radius.

It tripped me up for a second reason too. When I first failed, I just did was I always do: look it up. I maintained the border-radius entry on CSS-Tricks several times myself, but it doesn’t yet include the syntax for logical property usage (someone should update that entry for the writer program!). Even more surprisingly, the MDN article doesn’t have it either. At the moment, you just kinda need to know logical properties exist and reference what you need from the logical property listings. The never-ending dance of web platform evolution and documentation.

---

I’ve always loved “I needed to accomplish this design thing the other day” blog posts. They do double duty. For one, they lay out a situation and offer a solution, which is interesting for people who come across that situation, and make for interesting reading even if you haven’t come across it for the right audience. For another, they get people thinking about how they might solve the same thing, if they had to. (That’s all highly in the spirit of our Challenges, by the way.)

Here’s an example from Eric Meyer: Flexibly Centering an Element with Side-Aligned Content. The idea is there a block of text of variable width that needs to be centered. The whole thing needs centering, but not the text itself.

Centering blocks is usually pretty easy. Even outside of a flexbox or grid environment, where it’s a natural part of things, the trick is usually margin: 0 auto; which sets the left and right margins to auto as succinctly as possible, centering the block. But block-level elements typically stretch to fill their container, so those auto margins won’t do much. If you set a width, fine, but remember in Eric’s situation the width is unknown.

There’s a cool CSS trick that helps here. Not even a trick really, a natural part of CSS, it’s just not particularly well known. You can set the width of an element to max-content, meaning a block-level element still can stretch as wide as the context it is in, but if the content doesn’t push it that far, it just won’t go that far. Then we use the left/right auto margins trick to center it and… done!

.thing {
  max-width: max-content;
  margin: 0 auto;
}

But weren’t we just talking about logical properties? We’re failing to use them in both declarations here. Rather than width, we can think about the inlinedirection. Rather than using margin, which does not map to logical properties, we can reach for a property that is specifically inline, to begin with. So:

.thing {
  max-inline-size: max-content;
  margin-inline: auto;
}

CSS rules. If that looks strange to you, I get it — but try to embrace it. I think the strange look only comes from being indoctrinated with CSS before logical properties. If you learn CSS with logical properties, it won’t be strange at all. And in fact, it’s literally more logical.