Webmasters Gallery

2020 brought another wave of logical property features to major browsers and I’ve thoroughly enjoyed my investment into logical, rather than physical, web styling. I feel like I’ve learned a new way to speak about the box model that results in less written code with more global coverage.

p {
  /* 🚫 */ text-align: left;
  /* 👍 */ text-align: start;

  /* 🚫 */ margin-top: 1rem;
  /* 👍 */ margin-block-start: 1rem;
}

Like I described in the web.dev article I linked to above, a logical property is one that references a side, corner, or axis of the box model in context of the applicable language direction. It’s akin to referencing someone’s strong arm, rather than assuming it’s their right arm. “Right” is a physical arm reference, “strong” is a logical arm reference, contextual to the individual.

Once I got the hang of the updated syntax, I realized other places in the world had already solved their problems similarly! The web was just late to logical jargon. Here are a couple of other places that have already gone logical.

Nautical Orientation

Port and starboard are logical sides of the ship that are contextual to the vessel. I love how Wikipedia says confidently:

… nautical terms of orientation deal unambiguously with the structure of vessels, referring respectively to the left and right sides of the vessel, seen by an observer aboard the vessel looking forward.”

Vessel centric logical properties. While working with ships, use a ship language.

Skiers & Stages

Skier’s left is logical direction that’s based on a skier facing down the mountain. Without the logical language, skiers were confusing left and right, since it depended on where they stood when they declared the direction. If you’re on a chair lift facing up the mountain, left is right and right is left once you’ve gotten off the lift and started skiing back down the mountain. So that community came up with a logical way to talk about the direction. Their terminology, “Skier’s Right” and “Skier’s Left”, are essentially contextual logical properties. While working with skiers, use skier language.

Similarly, film studios use terms like “Stage One” and “Camera Two”. It helps logically orient everyone based on a common understand, not a relative direction.

Logical Conclusion

As an industry or community, we have had issues with physical focused styles. Adding padding to the left and right of a button is only fitting in some languages. It’s like you wrote the padding while facing the wrong way on the ship. Logical properties, via inline-start and inline-end, will fit all languages. It won’t matter which way you’re facing in the ship, it’s not about you anymore.

Give logical properties a play in the Pen below. Notice the browser is doing tons of work to keep your content readable across the globe. So rad.

button {
  padding-block: 1ch;
  padding-inline: 2ch;
  border-inline: 5px solid var(--brand-1);
}

To emulate the confidence that Wikipedia had in nautical logical directions: We, the web, can now unambiguously deal with the structure of our boxes by referring respectively to their sides, contextual to language direction. Describe the side once, in a way that is still relevant to you, but now relevant to everyone else too. Think less, deliver more.

p {
  max-inline-size: 50ch;
  margin-block: 1rem;
}

It’s critical to me that logical properties are centered around people. Its user-centric because its language direction respective. By using logical properties we invite the individual to bring their diversity, complexity and unpredictability to the table; we can embrace it and rely on the browser engines to properly lay it out.

hr {
  max-inline-size: 30ch;
  margin-inline: auto;
  border-block-start: 1px solid hsl(2rad 20% 20% / 20%);
}

Drop “top” and “left”-style thinking, and starting thinking logically with “block” and “start”-style properties. While working with web boxes, use a web box language.

The web’s “magic paper” is now even more magical as it can stay as natural to the user as possible. I love it.

P.S. You’ve been getting logical property trained since flexbox.

The post Late to Logical appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.