RTL

எங்கள் தளவமைப்பு, கூறுகள் மற்றும் பயன்பாடுகள் முழுவதும் பூட்ஸ்டார்ப்பில் வலமிருந்து இடப்புற உரைக்கான ஆதரவை எவ்வாறு இயக்குவது என்பதை அறிக.

இந்தப் பக்கத்தில்

பழகிக்கொள்ளுங்கள்

எங்கள் தொடக்க அறிமுகப் பக்கத்தைப் படிப்பதன் மூலம் முதலில் பூட்ஸ்டார்ப்பைப் பற்றி நன்கு தெரிந்துகொள்ள பரிந்துரைக்கிறோம் . நீங்கள் அதை இயக்கியதும், 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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-OXTEbYDqaX2ZY/BOaZV/yFGChYHtrXH2nyXJ372n2Y8abBhrqacCEe+3qhSHtLjy" 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-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 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-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
    -->
  </body>
</html>

RTL எடுத்துக்காட்டுகள்

எங்களின் பல RTL எடுத்துக்காட்டுகளில் ஒன்றைக் கொண்டு தொடங்கவும் .

அணுகுமுறை

பூட்ஸ்டார்ப்பில் RTL ஆதரவை உருவாக்குவதற்கான எங்கள் அணுகுமுறை இரண்டு முக்கியமான முடிவுகளுடன் வருகிறது, இது எங்கள் CSS ஐ எவ்வாறு எழுதுவது மற்றும் பயன்படுத்துகிறோம் என்பதைப் பாதிக்கும்:

முதலில், RTLCSS திட்டத்துடன் அதை உருவாக்க முடிவு செய்தோம் . LTR இலிருந்து RTL க்கு மாறும்போது மாற்றங்கள் மற்றும் மேலெழுதுதல்களை நிர்வகிப்பதற்கான சில சக்திவாய்ந்த அம்சங்களை இது வழங்குகிறது. ஒரு கோட்பேஸிலிருந்து பூட்ஸ்டார்ப்பின் இரண்டு பதிப்புகளை உருவாக்கவும் இது அனுமதிக்கிறது.
இரண்டாவதாக, தர்க்கரீதியான பண்புகள் அணுகுமுறையைப் பின்பற்ற சில திசை வகுப்புகளுக்கு மறுபெயரிட்டுள்ளோம். உங்களில் பெரும்பாலோர் ஏற்கனவே எங்களின் ஃப்ளெக்ஸ் பயன்பாடுகளுக்கு நன்றி தர்க்கரீதியான பண்புகளுடன் தொடர்பு கொண்டுள்ளீர்கள்—அவை போன்ற leftமற்றும் rightஆதரவாக startதிசை பண்புகளை மாற்றுகின்றன end. இது LTR மற்றும் RTL க்கு வகுப்புப் பெயர்கள் மற்றும் மதிப்புகளை எந்த மேல்நிலையும் இல்லாமல் பொருத்துகிறது.

எடுத்துக்காட்டாக, .ml-3for க்குப் பதிலாக 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;
}

மாற்று எழுத்துரு அடுக்கு

நீங்கள் தனிப்பயன் எழுத்துருவைப் பயன்படுத்தினால், எல்லா எழுத்துருக்களும் லத்தீன் அல்லாத எழுத்துக்களை ஆதரிக்காது என்பதை நினைவில் கொள்ளவும். Pan-European இலிருந்து அரபுக் குடும்பத்திற்கு மாற /*rtl:insert: {value}*/, எழுத்துரு குடும்பங்களின் பெயர்களை மாற்ற உங்கள் எழுத்துரு அடுக்கில் பயன்படுத்த வேண்டியிருக்கலாம்.

எடுத்துக்காட்டாக, Helvetica NeueLTR Helvetica Neue Arabicக்கான எழுத்துருவிலிருந்து RTLக்கு மாற, உங்கள் 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, மற்றும் .rtlRTL கோப்புகளுக்காக முன்பதிவு செய்யப்படும். இப்போது நீங்கள் இரண்டு கோப்புகளையும் ஒரே பக்கத்தில் பயன்படுத்த முடியும், மேலும் ஒன்று .ltrஅல்லது .rtlமற்றொரு திசையைப் பயன்படுத்த உங்கள் கூறுகளின் ரேப்பர்களைப் பயன்படுத்தவும்.

விளிம்பு வழக்குகள் மற்றும் அறியப்பட்ட வரம்புகள்

இந்த அணுகுமுறை புரிந்துகொள்ளக்கூடியதாக இருந்தாலும், பின்வருவனவற்றில் கவனம் செலுத்துங்கள்:

.ltrமற்றும் மாறும்போது .rtl, அதற்கேற்ப சேர்க்கும் dirமற்றும் langபண்புக்கூறுகளை உறுதிப்படுத்தவும்.
இரண்டு கோப்புகளையும் ஏற்றுவது ஒரு உண்மையான செயல்திறன் இடையூறாக இருக்கலாம்: சில மேம்படுத்தலைக் கருத்தில் கொண்டு , அந்தக் கோப்புகளில் ஒன்றை ஒத்திசைவின்றி ஏற்ற முயற்சிக்கலாம் .
இந்த வழியில் கூடு கட்டும் ஸ்டைல்கள் எங்கள் form-validation-state()மிக்சின் நோக்கம் போல் வேலை செய்வதைத் தடுக்கும், எனவே அதை நீங்களே சிறிது மாற்றிக் கொள்ள வேண்டும். #31223 பார்க்கவும் .

ப்ரெட்க்ரம்ப் பிரிப்பான் அதன் சொந்த புத்தம் புதிய மாறி தேவைப்படும் ஒரே சந்தர்ப்பமாகும் - அதாவது - $breadcrumb-divider-flippedஇயல்புநிலை $breadcrumb-divider.

RTL