Is Your CSS Logical?

CSS Internationalization

If your web applications are used globally, you must design them to adapt to various linguistic needs. For example, languages like English and Spanish are written from left-to-right (LTR); Arabic and Hebrew are written from right-to-left (RTL); Mongolian and traditional Japanese are written from top to bottom.

So, when you use a CSS declaration like this:

p {

    margin-left: 2rem;

}

Do you mean that (1) you want to add space to the physical left of the paragraph, or (2) you want to add some space before the content starts? For a fully internationalized UI, the correct answer is always (2).

The Logical Solution

You could create separate stylesheets for LTR and RTL languages and load them conditionally. There are even tools like the

Using logical properties, the initial example shown at the beginning of this aticle can be rewritten like this:

p {

    border-block-start: 2px solid red;

    margin-inline-start: 2rem;

    inline-size: 80ch;

}

Updating an existing CSS stylesheet to use logical properties might seem daunting at first. However, most of the work involves simply replacing left with inline-start, right with inline-end, top with block-start, and bottom with block-end. Some properties require different renaming; for example, border-bottom-left-radius becomes border-end-start-radius, height becomes block-size, etc.

The effort is well worth it, as this is a future-proof solution that ensures your website is accessible to everyone. For instance, the to use logical properties.

Logical Properties Reference

Here's a reference table of all the logical properties to help you update your own projects:

Learn More

• 🙌
  Vollständiger Original-Bericht

  Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

  ↗ Original-Artikel auf dev.to lesen