3 posts tagged with "css"

When I started learning about CSS many years back, I learned that border-radius: 50% turns a shape into an ellipse.

div {
	width: 100px;
	height: 100px;
	background-color: hotpink;
	border-radius: 50%;
}

I never questioned why. But as you might guess, 50% is not some kind of "ellipse hack". It all makes sense.

We recently did some font feature tweaks at work. For one thing, we changed the appearance of 0 (number zero) to include a slash (like 0), to make it easier to differentiate from capital letter O. I learned a few things in the process that I'd like to share!

Slashed zeros​

There are two main ways to configure slashed zeros.

1. font-feature-settings: "zero" 1;
2. font-variant: slashed-zero;

In the last months, I have been diving into the beautiful world of logical properties. The CSS spec has one sentence that I think describes what logical properties are in a nice way:

[Logical] properties are writing-mode relative equivalents of their corresponding physical properties.

Physical properties are simple to reason about, since they represent physical directions. Top, right, bottom and left are absolute directions. Left is always left—simple as that. Logical properties, on the other hand, are relative—the physical direction they correspond to varies.

As mentioned, the absolute nature of physical properties makes them simple to reason about. However, the absolute nature is also a limitation.