RTL

ଆମର ଲେଆଉଟ୍, ଉପାଦାନ ଏବଂ ଉପଯୋଗିତା ମଧ୍ୟରେ ବୁଟଷ୍ଟ୍ରାପରେ ଡାହାଣରୁ ବାମକୁ ପାଠ୍ୟ ପାଇଁ ସମର୍ଥନ କିପରି ସକ୍ଷମ କରିବେ ଶିଖନ୍ତୁ |

ଏହି ପୃଷ୍ଠାରେ |

ପରିଚିତ ହୁଅ |

ଆମର ପ୍ରାରମ୍ଭ ପ୍ରାରମ୍ଭ ପୃଷ୍ଠା ମାଧ୍ୟମରେ ପ reading ି ପ୍ରଥମେ ବୁଟଷ୍ଟ୍ରାପ୍ ସହିତ ପରିଚିତ ହେବାକୁ ଆମେ ସୁପାରିଶ କରୁ | ଥରେ ଆପଣ ଏହା ମାଧ୍ୟମରେ ଦ run ଡ଼ିବା ପରେ, RTL କିପରି ସକ୍ଷମ ହେବ ସେଥିପାଇଁ ଏଠାରେ ପ reading ଼ିବା ଜାରି ରଖ |

ଆପଣ ମଧ୍ୟ RTLCSS ପ୍ରୋଜେକ୍ଟରେ ପ to ିବାକୁ ଚାହିଁପାରନ୍ତି , କାରଣ ଏହା RTL ପ୍ରତି ଆମର ଆଭିମୁଖ୍ୟକୁ ଶକ୍ତି ପ୍ରଦାନ କରେ |

ପରୀକ୍ଷାମୂଳକ ବ feature ଶିଷ୍ଟ୍ୟ |

RTL ବ feature ଶିଷ୍ଟ୍ୟ ଏପର୍ଯ୍ୟନ୍ତ ପରୀକ୍ଷାମୂଳକ ଏବଂ ବୋଧହୁଏ ଉପଭୋକ୍ତା ମତାମତ ଅନୁଯାୟୀ ବିକଶିତ ହେବ | କିଛି ସ୍ପଟ୍ ହୋଇଛି କି ପରାମର୍ଶ ଦେବାକୁ ଏକ ଉନ୍ନତି ଅଛି? ଏକ ସମସ୍ୟା ଖୋଲନ୍ତୁ , ଆମେ ଆପଣଙ୍କର ଅନ୍ତର୍ଦର୍ଶନ ପାଇବାକୁ ପସନ୍ଦ କରିବୁ |

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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 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-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL ଉଦାହରଣ |

ଆମର ଅନେକ RTL ଉଦାହରଣ ମଧ୍ୟରୁ ଗୋଟିଏ ସହିତ ଆରମ୍ଭ କରନ୍ତୁ |

ଉପାୟ

ବୁଟଷ୍ଟ୍ରାପରେ RTL ସମର୍ଥନ ନିର୍ମାଣ ପାଇଁ ଆମର ଆଭିମୁଖ୍ୟ ଦୁଇଟି ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ନିଷ୍ପତ୍ତି ସହିତ ଆସିଥାଏ ଯାହା ଆମର CSS ଲେଖିବା ଏବଂ ବ୍ୟବହାର କରିବା ଉପରେ ପ୍ରଭାବ ପକାଇଥାଏ:

ପ୍ରଥମେ, ଆମେ ଏହାକୁ RTLCSS ପ୍ରୋଜେକ୍ଟ ସହିତ ନିର୍ମାଣ କରିବାକୁ ସ୍ଥିର କଲୁ | LTR ରୁ RTL କୁ ଯିବାବେଳେ ଏହା ଆମକୁ କିଛି ଶକ୍ତିଶାଳୀ ବ features ଶିଷ୍ଟ୍ୟ ପ୍ରଦାନ କରେ | ଏହା ମଧ୍ୟ ଆମକୁ ଗୋଟିଏ କୋଡବେସ୍ ରୁ ବୁଟଷ୍ଟ୍ରାପ୍ ର ଦୁଇଟି ସଂସ୍କରଣ ନିର୍ମାଣ କରିବାକୁ ଅନୁମତି ଦିଏ |
ଦ୍ୱିତୀୟତ a, ଆମେ ଏକ ଯୁକ୍ତିଯୁକ୍ତ ଗୁଣଧର୍ମ ପଦ୍ଧତି ଗ୍ରହଣ କରିବାକୁ ଏକ ମୁଠାଏ ଦିଗଦର୍ଶନ ଶ୍ରେଣୀର ନାମ ପରିବର୍ତ୍ତନ କରିଛୁ | ଆମର ଅଧିକାଂଶ ଫ୍ଲେକ୍ସ ୟୁଟିଲିଟିଜ୍ ଯୋଗୁଁ ଲଜିକାଲ୍ ପ୍ରପର୍ଟି ସହିତ ଇଣ୍ଟରାକ୍ଟ କରିସାରିଛନ୍ତି - ସେମାନେ leftଏବଂ rightସପକ୍ଷରେ ଦିଗ ଗୁଣକୁ startବଦଳାନ୍ତି end| ଏହା କ any ଣସି ଓଭରହେଡ୍ ବିନା LTR ଏବଂ RTL ପାଇଁ ଶ୍ରେଣୀର ନାମ ଏବଂ ମୂଲ୍ୟଗୁଡ଼ିକୁ ଉପଯୁକ୍ତ କରିଥାଏ |

.ml-3ଉଦାହରଣ ସ୍ୱରୂପ, ବଦଳରେ margin-left, ବ୍ୟବହାର କରନ୍ତୁ .ms-3|

ଆମର ଉତ୍ସ ସାସ୍ କିମ୍ବା ସଙ୍କଳିତ CSS ମାଧ୍ୟମରେ RTL ସହିତ କାର୍ଯ୍ୟ କରିବା, ଯଦିଓ ଆମର ଡିଫଲ୍ଟ LTR ଠାରୁ ଅଧିକ ଭିନ୍ନ ହେବା ଉଚିତ୍ ନୁହେଁ |

ଉତ୍ସରୁ କଷ୍ଟମାଇଜ୍ କରନ୍ତୁ |

ଯେତେବେଳେ ଏହା କଷ୍ଟୋମାଇଜେସନ୍ କଥା ଆସେ , ଭେରିଏବଲ୍, ମାନଚିତ୍ର ଏବଂ ମିକ୍ସିନଗୁଡିକର ଲାଭ ଉଠାଇବା ହେଉଛି ପସନ୍ଦିତ ଉପାୟ | RTLC ପାଇଁ ଏହି ପଦ୍ଧତି ସମାନ ଭାବରେ କାମ କରେ, ଯଦିଓ ଏହା ସଙ୍କଳିତ ଫାଇଲଗୁଡ଼ିକରୁ ପୋଷ୍ଟ-ପ୍ରକ୍ରିୟାକରଣ ହୁଏ, 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 କୁ ପରିବର୍ତ୍ତନ କରିବାକୁ, ଆପଣଙ୍କର ସାସ୍ କୋଡ୍ ଏହିପରି ଦେଖାଯାଏ:

$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 ଷ୍ଟ୍ରିଙ୍ଗ୍ ମ୍ୟାପ୍ସ ପାଇଁ ଧନ୍ୟବାଦ , ଏହା ବହୁତ ସରଳ ଅଟେ | ଆପଣଙ୍କର @imports କୁ ଏକ ଶ୍ରେଣୀ ସହିତ ଗୁଡ଼ାନ୍ତୁ, ଏବଂ RTLCSS ପାଇଁ ଏକ କଷ୍ଟମ୍ ପୁନ ame ନାମ ନିୟମ ସେଟ୍ କରନ୍ତୁ:

/* 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*/

ସାସ୍ ଚଲାଇବା ପରେ RTLCSS, ତୁମର CSS ଫାଇଲଗୁଡିକର ପ୍ରତ୍ୟେକ ଚୟନକର୍ତ୍ତା .ltr, ଏବଂ .rtlRTL ଫାଇଲଗୁଡ଼ିକ ପାଇଁ ପ୍ରିପେଣ୍ଡ୍ ହେବ | ବର୍ତ୍ତମାନ ଆପଣ ଉଭୟ ପୃଷ୍ଠାରେ ସମାନ ପୃଷ୍ଠାରେ ବ୍ୟବହାର କରିବାକୁ ସକ୍ଷମ ଅଟନ୍ତି, ଏବଂ କେବଳ .ltrକିମ୍ବା .rtlଅନ୍ୟ ଦିଗକୁ ବ୍ୟବହାର କରିବା ପାଇଁ କେବଳ ଆପଣଙ୍କର ଉପାଦାନ ରାପର୍ ବ୍ୟବହାର କରନ୍ତୁ |

ଏଜ୍ କେସ୍ ଏବଂ ଜଣାଶୁଣା ସୀମିତତା |

ଏହି ଉପାୟଟି ବୁ able ିବା ଯୋଗ୍ୟ, ଦୟାକରି ନିମ୍ନଲିଖିତ ପ୍ରତି ଧ୍ୟାନ ଦିଅନ୍ତୁ:

ସୁଇଚ୍ କରିବାବେଳେ .ltrଏବଂ .rtlନିଶ୍ଚିତ କରନ୍ତୁ ଯେ ଆପଣ ସେହି ଅନୁଯାୟୀ ଯୋଗ dirଏବଂ langଗୁଣଗୁଡିକ ଯୋଗ କରନ୍ତି |
ଉଭୟ ଫାଇଲ୍ ଲୋଡ୍ କରିବା ଏକ ପ୍ରକୃତ କାର୍ଯ୍ୟଦକ୍ଷତା ହୋଇପାରେ: କିଛି ଅପ୍ଟିମାଇଜେସନ୍ କୁ ବିଚାର କରନ୍ତୁ, ଏବଂ ବୋଧହୁଏ ସେହି ଫାଇଲଗୁଡିକ ମଧ୍ୟରୁ ଗୋଟିଏକୁ ଅସନ୍ତୁଳିତ ଭାବରେ ଲୋଡ୍ କରିବାକୁ ଚେଷ୍ଟା କରନ୍ତୁ |
ଏହି ଉପାୟରେ ନେଷ୍ଟିଂ ଶ yles ଳୀଗୁଡିକ ଆମର form-validation-state()ମିକ୍ସିନକୁ ଉଦ୍ଦିଷ୍ଟ ଭାବରେ କାର୍ଯ୍ୟ କରିବାକୁ ବାରଣ କରିବ, ତେଣୁ ଆପଣ ଏହାକୁ ନିଜେ ଟିକେ ଟିକେ ଆବଶ୍ୟକ କରନ୍ତି | # 31223 ଦେଖନ୍ତୁ |

ବ୍ରେଡ୍ କ୍ରମ୍ ବିଛିନ୍ନକାରୀ ହେଉଛି ଏକମାତ୍ର ମାମଲା ଯାହାକି ଏହାର ନିଜସ୍ୱ ବ୍ରାଣ୍ଡ୍ ଭେରିଏବଲ୍ ଆବଶ୍ୟକ କରେ - ଯଥା - $breadcrumb-divider-flippedଡିଫଲ୍ଟ୍ $breadcrumb-divider|

RTL