Angular 14中编写仅RTL方向生效的CSS/SCSS代码方法

我有一个导航栏（navbar）和搜索栏，当将语言从英文（EN）切换为阿拉伯语（AR）时，页面需从左到右（LTR）方向切换为从右到左（RTL）方向，但切换后导航栏与搜索栏出现布局错乱，搜索图标和语言选项位置异常。若调整样式适配RTL模式，LTR模式下的布局又会失效，因此我希望编写一段仅在RTL方向下生效的CSS/SCSS代码，我使用的是Angular 14框架。

相关代码 #

HTML代码 #

<div [dir]="changedir()">
  <button type="button" class="responsiveNav">
    <i class="fa-solid fa-bars"></i>
  </button>
  <ul class="navbar container-fluid">
    <li routerLink="/Home">{{ "HOME" | translate }}</li>
    <li routerLink="/Food/Stores">{{ "STORES" | translate }}</li>
    <li (click)="NavigateToAccount()">{{ "ACCOUNT" | translate }}</li>
    <li routerLink="/Authorization/Login">{{ "LOGIN" | translate }}</li>
    <li routerLink="/User/Cart" class="cart">
      <button type="button">
        <i class="fa-solid fa-cart-plus"></i><span class="cartno">0</span>
      </button>
    </li>

    <li class="lang">
      <i class="fa-solid fa-globe"></i
      ><i style="margin-left: 5px" class="fa-solid fa-chevron-down"></i>
      <ul class="langblock" @Fade>
        <li (click)="transfn('en')">EN</li>
        <li (click)="transfn('ar')">AR</li>
      </ul>
    </li>
  </ul>
</div>

导航栏组件SCSS代码 #

.responsiveNav{
  display: none;
  outline: none;
  position: fixed;
  top: 0px;
  z-index: 20;
  color: white;
  background-color: black;
  width: 50px;
  height: 50px;
}
.responsiveNav:active{
  background-color: gray;
}
.navbar{
  display: flex;
  background-color: #FFC300 ;
  list-style-type: none;
  align-items: center;
  justify-content: center;
  border: 3px black solid;

  li{
    font-family: 'Oswald', sans-serif;
    font-size: x-large;
    &:hover{
      color: #C70039;
      cursor: pointer;
    }
    button{
      border: none;
      outline: none;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      background-color: #FFC300;
      .cartno{
        border-radius: 40%;
        width: 20px;
        height: 20px;
        background-color: #C70039;
        color: white;
        position: absolute;
        top: -9px;
        left: 25px;

        font-size: x-small;
        border: 1px solid black;
        text-align: center;
      }
    }
  }

  .lang{
    position: relative;
    .langblock{
      background-color: #FFC300 ;
      color: black;
      position: absolute;
      width:47px;
      top: 10px;
      left:-5px;
      border: 3px black solid;
      display: none;

      list-style-type: none;
      box-sizing: border-box;
      li{
        left:-23px;
        position:relative ;
        margin-left: 0;
        align-items: center;
        &:hover{
          color: #C70039;
          box-sizing: border-box;
          cursor: pointer;
        }
      }
    }

    &:hover{
      .langblock{
        display: block ;
      }
    }
  }
  li{
    margin: 10px;
  }
}
@media (max-width:700px) {
  .responsiveNav{
    display: block;
    &:hover + .navbar{
      display: flex;
    }
  }
  .navbar{
    display: flex;
    position: fixed;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
    display: none;
    &:hover{
      display: flex;
    }

    li{
      font-size: large;
    }
  }
}

导航栏组件TypeScript代码 #

import { trigger_Example } from './../../Animations/Fade.Animations';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss'],
  animations: [trigger_Example],
})
export class NavbarComponent implements OnInit {
  currentlang!: string;
  UEmail: string = 'g';

  constructor(public translate: TranslateService, private router: Router) {}

  ngOnInit(): void {}
  transfn(lang: string) {
    this.translate.use(lang);
    localStorage.setItem('language', lang);
    this.currentlang = lang;
  }
  changedir() {
    if (localStorage.getItem('language') == 'ar') {
      return 'rtl';
    }
    return 'ltr';
  }
  NavigateToAccount() {
    this.router.navigate(['User/Account/', this.UEmail]);
  }
}

布局截图 #

• 布局正常（LTR模式）：
• 布局错乱（RTL模式）：

使用CSS属性选择器[dir="rtl"]可以精准匹配RTL模式的容器，编写仅在该模式下生效的样式，不会影响LTR布局。以下是针对当前问题的修复代码：

// 仅在RTL模式下生效的样式
[dir="rtl"] {
  .navbar {
    // 反转导航项排列顺序，符合RTL阅读习惯
    flex-direction: row-reverse;

    .cart button .cartno {
      // 购物车数字从左侧定位改为右侧
      left: auto;
      right: 25px;
    }

    .lang {
      .langblock {
        // 语言下拉框从左侧定位改为右侧
        left: auto;
        right: -5px;

        li {
          // 下拉项位置同步调整为右侧定位
          left: auto;
          right: -23px;
        }
      }
    }
  }

  // 调整响应式导航按钮位置到右侧
  .responsiveNav {
    right: 0;
  }
}

// 移动端RTL适配
@media (max-width:700px) {
  [dir="rtl"] {
    .navbar {
      // 移动端保持垂直排列，无需反转
      flex-direction: column;
    }
  }
}

关键说明 #

1. 精准匹配RTL容器：[dir="rtl"]选择器只会作用于设置了RTL方向的元素，完全隔离LTR模式的样式。
2. flex布局反转：通过row-reverse让导航项从右到左排列，符合阿拉伯语阅读逻辑。
3. 绝对定位元素适配：将原本使用left定位的元素改为right定位，修正RTL模式下的位置偏移。
4. 响应式兼容：移动端导航为垂直布局，无需反转方向，保持原有交互逻辑。

将这段代码添加到导航栏SCSS文件末尾即可解决布局错乱问题，同时保留LTR模式的正常显示。

内容的提问来源于stack exchange，提问作者Bahy Mohamed