RTL rehegua

Eikuaa mba’éichapa ikatu emboguata pytyvõ jehaipyre akatúa guive asu gotyo Bootstrap-pe ore ñemohenda, componente ha tembipuru’i rupi.

Ko páhinape

Ejekuaa porãke

Ro’e porã reikuaa raẽ hag̃ua Bootstrap remoñe’ẽvo ore página Ñepyrũrã Ñepyrũrã rupive . Eñani rire hese, esegi emoñe’ẽ ko’ápe mba’éichapa ikatu emboguata RTL.

Ikatu avei releese yvateve pe proyecto RTLCSS rehegua , omombaretégui ore enfoque RTL rehegua.

Característica experimental rehegua

Pe RTL mba’ekuaarã ha’e gueteri experimental ha oiméne oevolucionáta he’iháicha umi puruhára remiandu. ¿Rehechápa peteĩ mbaʼe térã reguereko peteĩ mejora resugeríva? Eipe'a peteĩ kuatiañe'ẽ , rovy'aiterei rohupyty hag̃ua ne remiandu.

HTML oñeikotevẽva

Oĩ mokõi mba’e’oka mbarete oñembohapéva RTL umi página Bootstrap rupive.

Oñemohenda elemento rehe dir="rtl".<html>
Oñemoĩ peteĩ langatributo oñemohenda porãva, ,-icha lang="ar", <html>elemento rehe.

Upégui, tekotevẽta remoĩ peteĩ versión RTL ore CSS rehegua. Techapyrã, ko’ápe oĩ kuatia estilo ñande CSS oñemboheko ha oñemboguejývape g̃uarã RTL oñembohapéva reheve:

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

Plantilla de inicio

Ikatu rehecha umi mbaꞌe ojejeruréva yvategua ojehechaukáva ko plantilla RTL ñepyrũrã oñemoambuévape.

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

Eñepyrũ peteĩ ore heta RTL techapyrãgui .

Ñemboja

Ore enfoque romopu’ã haĝua RTL pytyvõ Bootstrap-pe oúva mokõi decisión iñimportánteva reheve oguerekóva impacto mba’éichapa rohai ha roipuru ore CSS:

Peteĩha, rodesidi romopu’ã proyecto RTLCSS ndive . Kóva omeꞌe ñandéve mbaꞌeporã ipuꞌakapáva ñamohenda hag̃ua ñemoambue ha ñemboyke jaha jave LTR-gui RTL-pe. Avei oheja ñandéve ñamopuꞌa mokõi versión Bootstrap rehegua peteĩ codebase-gui.
Mokõiha, rombohéra jey peteĩ puñado clase direccional rehegua ro’adopta hag̃ua peteĩ enfoque propiedades lógicas rehegua. La mayoría pende apytépe peñe’interactuama umi propiedad lógica ndive ore utilidad flex-pe aguyje —ha’ekuéra omyengovia umi propiedad dirección rehegua ha’eháicha leftha righta favor startha end. Upéva ojapo umi mboꞌepy réra ha valor oñemohenda porãva LTR ha RTL-pe g̃uarã mbaꞌeveichagua mbaꞌerepy ÿre.

Techapyrã, .ml-3para rangue margin-left, eipuru .ms-3.

Ombaꞌapóvo RTL ndive, ñande fuente Sass rupive térã CSS oñembohekopyréva rupive, ndahaꞌeivaꞌerã tuicha iñambue ñande LTR por defecto-gui jepémo upéicha.

Emohenda fuente guive

Oñeñeꞌe jave personalización rehe , tape ojeiporavóva haꞌehína ojeaprovecha hag̃ua umi variable, mapa ha mixin. Ko enfoque ombaꞌapo peteĩcha RTL-pe g̃uarã, jepémo oñemboguata rire umi vore oñembohekopyrévagui, aguyje mbaꞌeichaitépa ombaꞌapo RTLCSS .

Umi valor RTL jeporupyre rehegua

Oipurúvo RTLCSS valor directivas , ikatu ojejapo peteĩ variable osëva peteĩ valor iñambuéva RTL-pe g̃uarã. Techapyrã, emboguejy hag̃ua ipohýiva $font-weight-boldkódigo ryru pukukue javeve, ikatu eipuru /*rtl: {value}*/ñe’ẽjoaju:

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

Mba’épa osẽta ko’ãvape ñande CSS ha RTL CSS ñepyrũrãme g̃uarã:

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

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

Pila de fuente alternativa rehegua

Pe káso reiporúramo peteĩ letra jeporupyre, eikuaa porãke naentéroi umi letra oipytyvõha pe alfabeto ndahaʼéiva latín. Ojeike hag̃ua Paneuropeo-gui árabe rogayguakuérape, ikatu tekotevẽ reipuru /*rtl:insert: {value}*/nde letra pila-pe emoambue hag̃ua letra familia réra.

Techapyrã, eñemoambue hag̃ua Helvetica Neueletra LTR- Helvetica Neue Arabicpe g̃uarãgui RTL-pe g̃uarã, ne código Sass ikatu ojehecha kóicha:

$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 ha RTL peteĩ jave

¿Reikotevẽ mokõive LTR ha RTL peteĩ páhinape? Aguyje RTLCSS String Maps -pe , kóva ha’e peteĩ mba’e hekopete. Embojere nde @imports peteĩ mbo’esyry reheve, ha emohenda peteĩ regla réra jeporupyre RTLCSS-pe g̃uarã:

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

Oñemombaꞌapo rire Sass upéi RTLCSS, peteĩteĩva jeporavoha oĩva nde CSS vorekuérape oñemboguapy mboyve .ltr, ha .rtlRTL vorekuérape g̃uarã. Koꞌág̃a ikatu reipuru mokõive vore peteĩ páhinape, ha reipuru rei .ltrtérã .rtlne componentekuéra envoltura-pe reipuru hag̃ua peteĩ térã ambue dirección.

Umi káso borde ha limitación ojekuaáva

Ko mbaʼe oñentende porãramo jepe, eñatendékena koʼã mbaʼére:

Oñemoambuévo .ltrha .rtl, eñangareko emoĩ dirha emoĩ langatributo he’iháicha.
Ojekargávo mokõive vore ikatu ha’e peteĩ cuello de botella rendimiento añeteguáva: ehechamína algún optimización , ha ikatu eñeha’ã ekargá peteĩva umi vore asíncronamente .
Umi estilo de anidación péicha ojokóta ore form-validation-state()mixin ombaꞌapo hag̃ua oñehaꞌarõháicha, upéicha oikotevẽ remboheko michĩmi ndejehegui. Ehecha #31223 .

Pe separador pan miga rehegua haꞌehína pe káso añoite oikotevẽva imbaꞌekuaarã pyahu imbaꞌeteéva— haꞌehína $breadcrumb-divider-flipped—oñemohenda por defecto $breadcrumb-divider.