🌎 WCAG 2.1 and 2.2 include criteria concerning the comprehensibility of content, which depends not only on the user's physical ability but also on their literacy, native language, and cultural context.

Let's Code 👨‍💻

  
    :root {
        --background-color: #FFFFFF; /* Neutral white, default color */
    }

    [lang="zh"] { /* Chinese */
        --background-color: #ff5151; /* Blue tone for Chinese, avoiding white */
    }

    body {
        background-color: var(--background-color);
    }
  

Let's Code 👨‍💻

  
    .example {
      margin-block-start: 10rem; //equivalent to margin-top in ltr
      margin-block-end: 10rem; //equivalent to margin-bottom in ltr
      
      margin-inline-start: 10rem; //equivalent to margin-left in ltr
      margin-inline-end: 10rem; //equivalent to margin-right in ltr
    }
  
    .example-together {
      margin-block: 10rem; //equivalent to margin-top and margin-bottom in ltr
      margin-inline: 10rem; //equivalent to margin-left and margin-right in ltr
    }
  

Let's Code 👨‍💻

  
    .example {
      padding-block-start: 10rem; //equivalent to padding-top in ltr
      padding-block-end: 10rem; //equivalent to padding-bottom in ltr
      
      padding-inline-start: 10rem; //equivalent to padding-left in ltr
      padding-inline-end: 10rem; //equivalent to padding-right in ltr
    }
  
    .example-together {
      padding-block: 10rem; //equivalent to padding-top and padding-bottom in ltr
      padding-inline: 10rem; //equivalent to padding-left and padding-right in ltr
    }
  

Let's Code 👨‍💻

  
    .example {
      position: absolute;
      inset-block-start: 10rem; //equivalent to top in ltr 
      inset-block-end: 10rem; //equivalent to bottom in ltr
      
      inset-inline-start: 10rem; //equivalent to left in ltr
      inset-inline-end: 10rem; //equivalent to right in ltr
    }
    .example-together {
      position: absolute;
      inset-block: 10rem; //equivalent to top and bottom in ltr
      inset-inline: 10rem; //equivalent to left and right in ltr
    }

Let's Code 👨‍💻

  
    .vertical-left-aligned {
      writing-mode: vertical-lr;
    }

Let's Code 👨‍💻

  
    .vertical-left-invert-aligned {
      writing-mode: sideways-lr;
    }

Let's Code 👨‍💻

  
    .vertical-right-aligned {
      writing-mode: vertical-rl;
    }

Let's Code 👨‍💻

  
    .vertical-right-inverted-aligned {
      writing-mode: sideways-rl;
    }

⚠️ It's important to manage the font according to the language ⚠️

     
    body {
      font-family: 'Lobster' // only Latin Font
    }
    
    body:lang(ar) {
      font-family: Noto Sans Arabic, sans-serif;
    }
    
    

The 'save' icon is not universal, it's generational

A "universal" checkout process that prioritizes credit cards fails in contexts where other methods are the norm

- Don't look for ONE solution for everyone

- Create a flexible system that recognizes diverse mental models and presents the most appropriate solution

• prefers-color-scheme 🎨
• prefers-reduced-motion 🏃🏻‍♀️
• forced-color 👨🏻‍🎨
(⸝⸝> ᴗ•⸝⸝)