RTL

ನಮ್ಮ ಲೇಔಟ್, ಘಟಕಗಳು ಮತ್ತು ಉಪಯುಕ್ತತೆಗಳಾದ್ಯಂತ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಬಲದಿಂದ ಎಡಕ್ಕೆ ಪಠ್ಯಕ್ಕೆ ಬೆಂಬಲವನ್ನು ಹೇಗೆ ಸಕ್ರಿಯಗೊಳಿಸುವುದು ಎಂಬುದನ್ನು ತಿಳಿಯಿರಿ.

ಈ ಪುಟದಲ್ಲಿ

ಪರಿಚಯ ಮಾಡಿಕೊಳ್ಳಿ

ನಮ್ಮ ಪ್ರಾರಂಭದ ಪರಿಚಯ ಪುಟದ ಮೂಲಕ ಓದುವ ಮೂಲಕ ಮೊದಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ಪರಿಚಿತರಾಗಲು ನಾವು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ . ಒಮ್ಮೆ ನೀವು ಅದರ ಮೂಲಕ ಓಡಿದ ನಂತರ, RTL ಅನ್ನು ಹೇಗೆ ಸಕ್ರಿಯಗೊಳಿಸುವುದು ಎಂಬುದನ್ನು ಇಲ್ಲಿ ಓದುವುದನ್ನು ಮುಂದುವರಿಸಿ.

ನೀವು RTLCSS ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಓದಲು ಬಯಸಬಹುದು , ಏಕೆಂದರೆ ಇದು RTL ಗೆ ನಮ್ಮ ವಿಧಾನಕ್ಕೆ ಶಕ್ತಿ ನೀಡುತ್ತದೆ.

ಪ್ರಾಯೋಗಿಕ ವೈಶಿಷ್ಟ್ಯ

RTL ವೈಶಿಷ್ಟ್ಯವು ಇನ್ನೂ ಪ್ರಾಯೋಗಿಕವಾಗಿದೆ ಮತ್ತು ಬಳಕೆದಾರರ ಪ್ರತಿಕ್ರಿಯೆಯ ಪ್ರಕಾರ ಬಹುಶಃ ವಿಕಸನಗೊಳ್ಳುತ್ತದೆ. ಏನನ್ನಾದರೂ ಗುರುತಿಸಲಾಗಿದೆಯೇ ಅಥವಾ ಸೂಚಿಸಲು ಸುಧಾರಣೆ ಇದೆಯೇ? ಸಮಸ್ಯೆಯನ್ನು ತೆರೆಯಿರಿ , ನಿಮ್ಮ ಒಳನೋಟಗಳನ್ನು ಪಡೆಯಲು ನಾವು ಬಯಸುತ್ತೇವೆ.

ಅಗತ್ಯವಿರುವ HTML

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್-ಚಾಲಿತ ಪುಟಗಳಲ್ಲಿ RTL ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಎರಡು ಕಟ್ಟುನಿಟ್ಟಾದ ಅವಶ್ಯಕತೆಗಳಿವೆ.

ಅಂಶದ dir="rtl"ಮೇಲೆ ಹೊಂದಿಸಿ .<html>
ಅಂಶದ ಮೇಲೆ langನಂತಹ ಸೂಕ್ತವಾದ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ .lang="ar"<html>

ಅಲ್ಲಿಂದ, ನೀವು ನಮ್ಮ CSS ನ RTL ಆವೃತ್ತಿಯನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ. ಉದಾಹರಣೆಗೆ, RTL ಸಕ್ರಿಯಗೊಳಿಸಿದ ನಮ್ಮ ಸಂಕಲನ ಮತ್ತು ಚಿಕ್ಕದಾದ CSS ಗಾಗಿ ಸ್ಟೈಲ್‌ಶೀಟ್ ಇಲ್ಲಿದೆ:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" 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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL ಉದಾಹರಣೆಗಳು

ನಮ್ಮ ಹಲವಾರು RTL ಉದಾಹರಣೆಗಳಲ್ಲಿ ಒಂದನ್ನು ಪ್ರಾರಂಭಿಸಿ .

ಅಪ್ರೋಚ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಆರ್‌ಟಿಎಲ್ ಬೆಂಬಲವನ್ನು ನಿರ್ಮಿಸುವ ನಮ್ಮ ವಿಧಾನವು ಎರಡು ಪ್ರಮುಖ ನಿರ್ಧಾರಗಳೊಂದಿಗೆ ಬರುತ್ತದೆ ಅದು ನಾವು ನಮ್ಮ ಸಿಎಸ್‌ಎಸ್ ಅನ್ನು ಹೇಗೆ ಬರೆಯುತ್ತೇವೆ ಮತ್ತು ಬಳಸುತ್ತೇವೆ ಎಂಬುದರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ:

ಮೊದಲಿಗೆ, ನಾವು ಅದನ್ನು RTLCSS ಯೋಜನೆಯೊಂದಿಗೆ ನಿರ್ಮಿಸಲು ನಿರ್ಧರಿಸಿದ್ದೇವೆ . LTR ನಿಂದ RTL ಗೆ ಚಲಿಸುವಾಗ ಬದಲಾವಣೆಗಳನ್ನು ಮತ್ತು ಅತಿಕ್ರಮಣಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಇದು ನಮಗೆ ಕೆಲವು ಪ್ರಬಲ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀಡುತ್ತದೆ. ಒಂದು ಕೋಡ್‌ಬೇಸ್‌ನಿಂದ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಎರಡು ಆವೃತ್ತಿಗಳನ್ನು ನಿರ್ಮಿಸಲು ಇದು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
ಎರಡನೆಯದಾಗಿ, ತಾರ್ಕಿಕ ಗುಣಲಕ್ಷಣಗಳ ವಿಧಾನವನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಲು ನಾವು ಕೆಲವು ದಿಕ್ಕಿನ ತರಗತಿಗಳನ್ನು ಮರುಹೆಸರಿಸಿದ್ದೇವೆ. ನಿಮ್ಮಲ್ಲಿ ಹೆಚ್ಚಿನವರು ಈಗಾಗಲೇ ನಮ್ಮ ಫ್ಲೆಕ್ಸ್ ಉಪಯುಕ್ತತೆಗಳಿಗೆ ಧನ್ಯವಾದಗಳು ತಾರ್ಕಿಕ ಗುಣಲಕ್ಷಣಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಿದ್ದೀರಿ-ಅವರು ನಿರ್ದೇಶನ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬದಲಾಯಿಸುತ್ತಾರೆ leftಮತ್ತು rightಪರವಾಗಿ startಮತ್ತು end. ಯಾವುದೇ ಓವರ್ಹೆಡ್ ಇಲ್ಲದೆಯೇ LTR ಮತ್ತು RTL ಗೆ ವರ್ಗದ ಹೆಸರುಗಳು ಮತ್ತು ಮೌಲ್ಯಗಳನ್ನು ಸೂಕ್ತವಾಗಿಸುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, ಫಾರ್ ಬದಲಿಗೆ .ml-3, margin-leftಬಳಸಿ .ms-3.

RTL ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವುದು, ನಮ್ಮ ಮೂಲ Sass ಅಥವಾ ಕಂಪೈಲ್ ಮಾಡಿದ CSS ಮೂಲಕ, ನಮ್ಮ ಡೀಫಾಲ್ಟ್ LTR ಗಿಂತ ಹೆಚ್ಚು ಭಿನ್ನವಾಗಿರಬಾರದು.

ಮೂಲದಿಂದ ಕಸ್ಟಮೈಸ್ ಮಾಡಿ

ಗ್ರಾಹಕೀಕರಣಕ್ಕೆ ಬಂದಾಗ , ವೇರಿಯೇಬಲ್‌ಗಳು, ನಕ್ಷೆಗಳು ಮತ್ತು ಮಿಕ್ಸಿನ್‌ಗಳ ಲಾಭವನ್ನು ಪಡೆಯುವುದು ಆದ್ಯತೆಯ ಮಾರ್ಗವಾಗಿದೆ. ಈ ವಿಧಾನವು RTL ಗಾಗಿ ಒಂದೇ ರೀತಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ, ಇದನ್ನು ಸಂಕಲಿಸಿದ ಫೈಲ್‌ಗಳಿಂದ ನಂತರ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲಾಗಿದ್ದರೂ ಸಹ, RTLCSS ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದಕ್ಕೆ ಧನ್ಯವಾದಗಳು .

ಕಸ್ಟಮ್ 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}*/ಪ್ಯಾನ್-ಯುರೋಪಿಯನ್‌ನಿಂದ ಅರೇಬಿಕ್ ಕುಟುಂಬಕ್ಕೆ ಬದಲಾಯಿಸಲು , ಫಾಂಟ್ ಕುಟುಂಬಗಳ ಹೆಸರುಗಳನ್ನು ಮಾರ್ಪಡಿಸಲು ನಿಮ್ಮ ಫಾಂಟ್ ಸ್ಟಾಕ್‌ನಲ್ಲಿ ನೀವು ಬಳಸಬೇಕಾಗಬಹುದು .

ಉದಾಹರಣೆಗೆ, Helvetica Neue WebfontLTR ನಿಂದ Helvetica Neue ArabicRTL ಗೆ ಬದಲಾಯಿಸಲು, ನಿಮ್ಮ 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 ಸ್ಟ್ರಿಂಗ್ ನಕ್ಷೆಗಳಿಗೆ ಧನ್ಯವಾದಗಳು , ಇದು ತುಂಬಾ ಸರಳವಾಗಿದೆ. ನಿಮ್ಮ @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, ಮತ್ತು .rtlRTL ಫೈಲ್‌ಗಳಿಗಾಗಿ ಪೂರ್ವಭಾವಿಯಾಗಿ ಮಾಡಲಾಗುತ್ತದೆ. ಈಗ ನೀವು ಒಂದೇ ಪುಟದಲ್ಲಿ ಎರಡೂ ಫೈಲ್‌ಗಳನ್ನು ಬಳಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ, ಮತ್ತು ಒಂದು ಅಥವಾ ಇನ್ನೊಂದು ದಿಕ್ಕನ್ನು ಬಳಸಲು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಹೊದಿಕೆಗಳನ್ನು ಸರಳವಾಗಿ .ltrಬಳಸಿ .rtl.

ಎಡ್ಜ್ ಪ್ರಕರಣಗಳು ಮತ್ತು ತಿಳಿದಿರುವ ಮಿತಿಗಳು

ಈ ವಿಧಾನವು ಅರ್ಥವಾಗುವಂತಹದ್ದಾಗಿದ್ದರೂ, ದಯವಿಟ್ಟು ಈ ಕೆಳಗಿನವುಗಳಿಗೆ ಗಮನ ಕೊಡಿ:

ಬದಲಾಯಿಸುವಾಗ .ltrಮತ್ತು , ನೀವು ಸೇರಿಸುವ ಮತ್ತು ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ಗುಣಲಕ್ಷಣಗಳನ್ನು .rtlಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ .dirlang
ಎರಡೂ ಫೈಲ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುವುದು ನಿಜವಾದ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಯಾಗಿರಬಹುದು: ಕೆಲವು ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ಪರಿಗಣಿಸಿ ಮತ್ತು ಆ ಫೈಲ್‌ಗಳಲ್ಲಿ ಒಂದನ್ನು ಅಸಮಕಾಲಿಕವಾಗಿ ಲೋಡ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸಿ .
ಈ ರೀತಿಯಲ್ಲಿ ಗೂಡುಕಟ್ಟುವ ಶೈಲಿಗಳು ನಮ್ಮ form-validation-state()ಮಿಕ್ಸಿನ್ ಉದ್ದೇಶಿಸಿದಂತೆ ಕೆಲಸ ಮಾಡುವುದನ್ನು ತಡೆಯುತ್ತದೆ, ಆದ್ದರಿಂದ ನೀವೇ ಅದನ್ನು ಸ್ವಲ್ಪಮಟ್ಟಿಗೆ ತಿರುಚಬೇಕಾಗುತ್ತದೆ. #31223 ನೋಡಿ .

ಬ್ರೆಡ್‌ಕ್ರಂಬ್ ವಿಭಜಕವು ತನ್ನದೇ ಆದ ಹೊಚ್ಚ ಹೊಸ ವೇರಿಯೇಬಲ್ ಅಗತ್ಯವಿರುವ ಏಕೈಕ ಪ್ರಕರಣವಾಗಿದೆ-ಅಂದರೆ -ಗೆ $breadcrumb-divider-flippedಡೀಫಾಲ್ಟ್ ಆಗಿದೆ $breadcrumb-divider.

RTL