내용으로 건너뛰기 문서 내비게이션으로 건너뛰기
원문 보기 GitHub에서 보기

RTL

레이아웃, 컴포넌트 및 유틸리티에서 Bootstrap의 오른쪽에서 왼쪽으로 읽는 텍스트의 지원을 활성화하는 방법을 알아보세요.

목차

익숙해지기

먼저 시작하기 페이지를 읽고 Bootstrap에 익숙해지는 것이 좋습니다. 어느정도 읽어보았다면 RTL을 활성화하는 방법에 대해 계속 읽어보세요.

또한 RTL에 대한 우리의 접근 방식을 주도하는 RTLCSS 프로젝트에 대해서도 읽어보시길 바랍니다.

Bootstrap의 RTL 기능은 아직 실험 단계이며 사용자 피드백을 바탕으로 발전해 나갈 예정입니다. 무언가를 발견했거나 개선할 점이 있나요? 이슈를 열어서 여러분들의 의견을 듣고 싶습니다.

HTML 요구 사항

현재 Bootstrap 기반 페이지에서 RTL을 활성화하기 위한 두 가지 엄격한 요구 사항이 있습니다.

  1. <html> 요소에 dir="rtl"을 설정하세요.
  2. <html> 요소에 lang="ar"와 같은 적절한 lang 속성을 추가해주세요.

여기서 CSS의 RTL 버전을 포함해야 합니다. 예를 들어, 다음은 RTL이 활성화된 컴파일 및 경량화된 CSS의 스타일시트입니다:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous">

스타터 템플릿

수정된 RTL 스타터 템플릿에 상기된 요구사항이 반영되어 있음을 알 수 있습니다.

<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css" integrity="sha384-dpuaG1suU0eT09tx5plTaGMLBsfDLzUCCUXOY2j/LSvXYuG6Bqs43ALlhIqAJVRb" crossorigin="anonymous">

    <title>مرحبًا بالعالم!</title>
  </head>
  <body>
    <h1>مرحبًا بالعالم!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL 예시

여러 RTL 예시 중 하나로 시작하세요.

접근

RTL 지원을 Bootstrap에 빌드하는 방법에는 CSS를 작성하고 사용하는 방법에 영향을 주는 두 가지 중요한 결정사항이 있습니다:

  1. 먼저 우리는 RTLCSS 프로젝트로 빌드하기로 결정했습니다. 이를 통해 LTR에서 RTL로 이동할 때 변경 및 재정의를 관리하기 위한 몇 가지 강력한 기능이 제공됩니다. 또한 하나의 코드베이스에서 두 가지 버전의 Bootstrap을 빌드할 수 있습니다.

  2. 두번째로 논리적 속성 접근 방식을 채택하기 위해 몇 가지 방향성 클래스의 이름을 변경했습니다. 대부분의 사용자는 flex 유틸리티 덕분에 이미 논리적 속성과 상호작용을 했습니다. 이것들은 left, right와 같은 방향 속성을 start와 end로 대체합니다. 이를 통해 오버헤드 없이 LTR 및 RTL에 적합한 클래스 이름과 값을 만듭니다.

예를 들어 margin-left에서 .ml-3 대신에 .ms-3을 사용할 수 있습니다.

Sass 소스 또는 컴파일된 CSS를 통한 RTL 작업은 기본 LTR과 크게 다르지 않습니다.

사용자 지정 소스

사용자 지정과 관련하여 선호되는 방법은 변수, 맵 및 믹스인을 활용하는 것입니다. 이 접근 방식은 RTLCSS가 작동하는 방식 덕분에 컴파일된 파일에서 사후 처리 되더라도 RTL에 대해 동일하게 작동합니다.

사용자 지정 RTL 값

RTLCSS 값 지시문을 사용하여 변수 출력을 RTL에 대해 다른 값으로 만들 수 있습니다. 예를 들어, 코드베이스 전체에서 $font-weight-bold의 가중치를 줄이려면 /*rtl: {value}*/ 구문을 사용할 수 있습니다:

$font-weight-bold: 700 #{/* rtl:600 */} !default;

이렇게 하면 기본 CSS 및 RTL CSS에 대해 다음과 같이 출력됩니다:

/* bootstrap.css */
dt {
  font-weight: 700 /* rtl:600 */;
}

/* bootstrap.rtl.css */
dt {
  font-weight: 600;
}

대체 글꼴 스택

맞춤 글꼴을 사용하는 경우 모든 글꼴이 라틴어가 아닌 알파벳을 지원하는 것은 아닙니다. 범유럽 계열에서 아랍어 계열로 전환하려면 글꼴 스택에서 /*rtl:insert: {value}*/를 사용하여 글꼴 계열의 이름을 수정해야 할 수 있습니다.

예를 들어 LTR용 Helvetica Neue 폰트에서 RTL용 Helvetica Neue Arabic으로 전환하는 경우 Sass 코드는 다음과 같을 수 있습니다:

$font-family-sans-serif:
  Helvetica Neue #{"/* rtl:insert:Arabic */"},
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  Arial,
  // Linux
  "Noto Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

LTR과 RTL을 동시에 사용하기

동일한 페이지에 LTR과 RTL이 모두 필요하신가요? RTLCSS String Maps 덕분에 이것은 매우 간단합니다. @import를 클래스로 줄바꿈하고 RTLCSS에 대한 커스텀 이름 바꾸기 규칙을 다음과 같이 설정하면 됩니다:

/* rtl:begin:options: {
  "autoRename": true,
  "stringMap":[ {
    "name": "ltr-rtl",
    "priority": 100,
    "search": ["ltr"],
    "replace": ["rtl"],
    "options": {
      "scope": "*",
      "ignoreCase": false
    }
  } ]
} */
.ltr {
  @import "../node_modules/bootstrap/scss/bootstrap";
}
/*rtl:end:options*/

Sass를 실행한 다음 RTLCSS를 실행하면 CSS 파일의 각 선택자에 .ltr이 추가되고 RTL 파일의 경우 .rtl이 추가됩니다. 이제 동일한 페이지에서 두 파일을 모두 사용할 수 있으며 컴포넌트 래퍼에서 .ltr 또는 .rtl을 사용하여 둘 중 하나의 방향을 사용할 수 있습니다.

LTR과 RTL을 결합한 구현으로 작업할 때 고려해야 할 경계 조건과 알려진 한계입니다.

  1. .ltr과 .rtl 간에서 전환할 때 그에 따른 dir 및 lang 속성을 추가해야 합니다.
  2. 두 파일을 모두 불러오면 실제 성능에 병목 현상이 발생할 수 있습니다. 최적화를 고려하고 둘 중 하나의 파일만 비동기적으로 로드해보세요.
  3. 이런 식으로 스타일을 중첩하면 form-validation-state() 믹스인이 의도한 대로 작동하지 않음으로 어느정도 직접 조정이 필요합니다. #31223을 참고해주세요.

브레드크럼

브레드크럼 구분자는 $breadcrumb-divider-flipped라는 고유한 새로운 변수가 필요한 유일한 경우이며 기본값은 $breadcrumb-divider입니다.

추가 자료