މައިގަނޑު ކޮންޓެންޓަށް ސްކިޕް ކުރާށެވެ ޑޮކްސް ނެވިގޭޝަނަށް ސްކިޕް ކުރާށެވެ
in English

އާރުޓީއެލް އެވެ

އަޅުގަނޑުމެންގެ ލޭއައުޓް، ކޮމްޕޯނެންޓް، އަދި ޔުޓިލިޓީސް ހުރަސްކޮށް ބޫޓްސްޓްރެޕްގައި ކަނާތުން ވާތް ފަރާތަށް ލިޔުމަށް ސަޕޯޓް އެނެބަލް ކުރާނެ ގޮތް ދަސްކުރައްވާށެވެ.

މި ޞަފްޙާގައެވެ

އަހުލުވެރިވާށެވެ

އަޅުގަނޑުމެން ލަފާދެނީ ފުރަތަމަ ބޫޓްސްޓްރެޕް އަށް އަހުލުވެރިވުމަށް އަޅުގަނޑުމެންގެ ގެޓިންގ ސްޓާރޓެޑް އިންޓްރޮޑަކްޝަން ޕޭޖް ކިޔައިގެންނެވެ . އެކަން ދުއްވައި ނިމުމުން، އާރުޓީއެލް އެނެބަލް ކުރާނެ ގޮތް މިތަނުން ކިޔުން ކުރިއަށް ގެންދާށެވެ.

You may also want to read up on the RTLCSS project , އެއީ އާރުޓީއެލްއާ މެދު އަޅުގަނޑުމެންގެ އުސޫލަށް ބާރު ލިބޭތީ.

އެކްސްޕެރިމެންޓަލް ފީޗާ އެވެ

އާރުޓީއެލް ފީޗާއަކީ އަދިވެސް ތަޖުރިބާކާރު ފީޗާއެއް ކަމަށާއި ޔޫޒަރުންގެ ފީޑްބެކަށް ބަލާއިރު ތަރައްގީވާނެ ކަމަށް ބެލެވެ އެވެ. އެއްޗެއް ފެނިއްޖެތޯ ނުވަތަ ލަފާދޭން ރަނގަޅު ކަމެއް އޮތްތޯ؟ Open an issue , އަޅުގަނޑުމެން ވަރަށް އުފާވާނެ ތިޔަބޭފުޅުންގެ ވިސްނުންތައް ލިބޭތޯ.

ބޭނުންވާ އެޗްޓީއެމްއެލް

ބޫޓްސްޓްރެޕް ޕަވަރޑް ޕޭޖްތަކުގައި އާރްޓީއެލް އެނެބަލް ކުރުމަށް ހަރުކަށި ދެ ޝަރުތެއް ވެއެވެ.

  1. އެލިމެންޓްގެ dir="rtl"މައްޗަށް ސެޓް ކުރާށެވެ .<html>
  2. އެލިމެންޓްގެ މައްޗަށް އެކަށީގެންވާ langއެޓްރިބިއުޓެއް، ފަދައިން އިތުރުކުރުން.lang="ar"<html>

އެތަނުން އަޅުގަނޑުމެންގެ ސީއެސްއެސްގެ އާރްޓީއެލް ވަރޝަނެއް ހިމަނަން ޖެހޭނެއެވެ. މިސާލަކަށް، މިއީ އާރްޓީއެލް އެނެބަލްކޮށްފައި ހުންނަ އަޅުގަނޑުމެންގެ ކޮމްޕައިލްކޮށް މިނިފައިޑް ސީއެސްއެސް އަށް ސްޓައިލްޝީޓް އެވެ:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

ސްޓާޓަރ ޓެމްޕްލޭޓް

މި ބަދަލުކުރެވިފައިވާ އާރްޓީއެލް ސްޓާޓަރ ޓެމްޕްލޭޓުން މަތީގައިވާ ޝަރުޠުތައް ރިފްލެކްޓްވާތަން ފެނިވަޑައިގަންނަވާނެއެވެ.

<!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>

އާރުޓީއެލްގެ މިސާލުތައް

އަޅުގަނޑުމެންގެ ބައެއް އާރުޓީއެލް މިސާލުތަކުގެ ތެރެއިން އެއް މިސާލުން ފަށައިގަންނަވާށެވެ .

ކުރިމަތިލުން

ބޫޓްސްޓްރެޕް އަށް އާރުޓީއެލް ސަޕޯޓް ބިނާކުރުމަށް އަޅުގަނޑުމެންގެ އުސޫލު އަންނަނީ އަޅުގަނޑުމެންގެ ސީއެސްއެސް ލިޔެ ބޭނުންކުރާ ގޮތަށް އަސަރުކުރާ މުހިންމު ދެ ނިންމުމަކާއެކު:

  1. ފުރަތަމަ އަޅުގަނޑުމެން ނިންމީ އާރުޓީއެލްސީއެސްއެސް ޕްރޮޖެކްޓާއެކު އެތަން ބިނާކުރަން. މިއީ އެލްޓީއާރު އިން އާރުޓީއެލް އަށް ބަދަލުވާއިރު ބަދަލުތަކާއި އޮވަރރައިޑްތައް މެނޭޖްކުރުމަށް ބޭނުންވާ ބައެއް ވަރުގަދަ ފީޗާސްތައް އަޅުގަނޑުމެންނަށް ލިބިގެންދާ ކަމެކެވެ. އަދި އެއް ކޯޑްބޭސްއަކުން ބޫޓްސްޓްރެޕްގެ ދެ ވަރޝަން ބިލްޑް ކުރުމުގެ ފުރުސަތު ވެސް ލިބިގެންދެއެވެ.

  2. ދެވަނަ ކަމަކަށް، އަޅުގަނޑުމެން މިވަނީ ލޮޖިކަލް ޕްރޮޕަޓީސް އެޕްރޯޗެއް ގެންގުޅުމަށްޓަކައި އަތްމަތި ދަތި ޑިރެކްޝަނަލް ކްލާސްތަކަށް ނަން ބަދަލުކޮށްފައެވެ. ތިޔަބޭފުޅުންގެ ތެރެއިން ގިނަ ބަޔަކު މިހާރުވެސް އަޅުގަނޑުމެންގެ ފްލެކްސް ޔުޓިލިޓީސްގެ ސަބަބުން ލޮޖިކަލް ޕްރޮޕަޓީތަކާ މުޢާމަލާތު ކުރައްވާފައި ވެއެވެ-އެއީ ޑިރެކްޝަން ޕްރޮޕަޓީތަކުގެ ބަދަލުގައި leftއަދި rightއިން ފަވާރ startއަދި end. އެއީ އެއްވެސް އޯވަހެޑެއް ނެތި ކްލާސް ނަންތަކާއި އަގުތައް އެލްޓީއާރު އަދި އާރުޓީއެލް އަށް އެކަށީގެންވާ ގޮތަކަށް ހެދުމެވެ.

މިސާލަކަށް .ml-3for ގެ ބަދަލުގައި margin-leftބޭނުން ކުރާށެވެ .ms-3.

އާރުޓީއެލް އާއި އެކު މަސައްކަތް ކުރުމަކީ، އަޅުގަނޑުމެންގެ ސޯސް ސާސް ނުވަތަ ކޮމްޕައިލް ކުރެވިފައިވާ ސީއެސްއެސް މެދުވެރިކޮށް، އަޅުގަނޑުމެންގެ ޑިފޯލްޓް އެލްޓީއާރު އާއި މާބޮޑު ތަފާތެއް ވެގެން ނުވާނެއެވެ.

ސޯސް އިން ކަސްޓަމައިޒް ކުރުން

ކަސްޓަމައިޒޭޝަން އަށް ވާހަކަ ދައްކާއިރު ، އިސްކަންދެވޭ ގޮތަކީ ވެރިއޭބަލްސް، މެޕްސް، އަދި މިކްސިންސްގެ ފައިދާ ނެގުމެވެ. މި އުސޫލު އާރްޓީއެލް އަށް ވެސް މަސައްކަތް ކުރަނީ ހަމަ އެގޮތަށް، ކޮމްޕައިލް ކުރެވިފައިވާ ފައިލްތަކުން ޕޯސްޓް ޕްރޮސެސް ކުރެވުނު ނަމަވެސް، އާރްޓީއެލްސީއެސްއެސް މަސައްކަތް ކުރާ ގޮތުގެ ސަބަބުންނެވެ .

ކަސްޓަމް އާރްޓީއެލް ވެލިއުސް

RTLCSS value directives ބޭނުންކޮށްގެން , ވެރިއޭބަލް އައުޓްޕުޓެއް އާރްޓީއެލް އަށް ތަފާތު ވެލިއުއެއް ހެދިދާނެއެވެ. މިސާލަކަށް، $font-weight-boldމުޅި ކޯޑްބޭސް އަށް ބަރުދަން ކުޑަކުރުމަށްޓަކައި، /*rtl: {value}*/ސިންޓެކްސް ބޭނުންކުރެވިދާނެއެވެ:

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

އަޅުގަނޑުމެންގެ ޑިފޯލްޓް ސީއެސްއެސް އަދި އާރުޓީއެލް ސީއެސްއެސް އަށް ތިރީގައިވާ ގޮތަށް އައުޓްޕުޓް ކުރާނެ އެއްޗެއް:

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

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

ބަދަލު ފޮންޓް ސްޓޭކް

ކަސްޓަމް ފޮންޓެއް ބޭނުންކުރާ ހާލަތުގައި، ހުރިހާ ފޮންޓަކުން ލެޓިން ނޫން އަކުރުތަކަށް ސަޕޯޓް ނުކުރާކަން ސަމާލުކަން ދޭށެވެ. /*rtl:insert: {value}*/ޕެން-ޔޫރަޕިއަން އާއިލާއިން އަރަބި އާއިލާއަށް ބަދަލުވުމަށްޓަކައި، ފޮންޓް އާއިލާތަކުގެ ނަންތައް ބަދަލުކުރުމަށްޓަކައި ފޮންޓް ސްޓޭކްގައި ބޭނުންކުރަން ޖެހިދާނެއެވެ .

މިސާލަކަށް، Helvetica Neue Webfontފޯރ އެލްޓީއާރ އިން Helvetica Neue Arabicފޯރ އާރްޓީއެލް އަށް ބަދަލުވުމަށްޓަކައި، ތިބާގެ ސާސް ކޯޑް މިގޮތަށް ފެންނާނެއެވެ:

$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;

އެލްޓީއާރު އާއި އާރުޓީއެލް އެއްފަހަރާ

އެއް ޕޭޖެއްގައި އެލްޓީއާރު އާއި އާރުޓީއެލް ވެސް ބޭނުންވޭތޯ؟ ޝުކުރިއްޔާ RTLCSS String Maps , މިއީ ކިތަންމެހާވެސް ސީދާ ކަމެކެވެ. ތިބާގެ @imports ކްލާހަކުން އޮޅާލާ، އަދި 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*/

After running Sass then RTLCSS, each selector in your CSS files will be prepended by .ltr, and .rtl for RTL files. Now you’re able to use both files on the same page, and simply use .ltr or .rtl on your components wrappers to use one or the other direction.

Edge cases and known limitations

While this approach is understandable, please pay attention to the following:

  1. When switching .ltr and .rtl, make sure you add dir and lang attributes accordingly.
  2. Loading both files can be a real performance bottleneck: consider some optimization, and maybe try to load one of those files asynchronously.
  3. Nesting styles this way will prevent our form-validation-state() mixin from working as intended, thus require you tweak it a bit by yourself. See #31223.

The breadcrumb case

The breadcrumb separator is the only case requiring its own brand new variable— namely $breadcrumb-divider-flipped —defaulting to $breadcrumb-divider.

Additional resources