RTL rehegua
Eikuaa mba’éichapa ikatu emboguata pytyvõ jehaipyre akatúa guive asu gotyo Bootstrap-pe ore ñemohenda, componente ha tembipuru’i rupi.
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 mba’ekuaarã RTL rehegua ha’e gueteri experimental ha oiméne oevolucionáta umi puruhára he’iháicha. ¿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ĩ
lang
atributo oñemohenda porãva, ,-ichalang="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-+qdLaIRZfNu4cVPK/PxJJEy0B0f3Ugv8i482AKY7gwXwhaCroABd086ybrVKTa0q" 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-+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 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
left
haright
a favorstart
haend
. 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-3
para 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-bold
kó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 Helvetica Neue Webfont
hag̃ua LTR Helvetica Neue Arabic
-gui RTL-pe g̃uarã, nde código Sass 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 @import
s 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 .rtl
RTL vorekuérape g̃uarã. Koꞌág̃a ikatu reipuru mokõive vore peteĩ páhinape, ha reipuru rei .ltr
térã .rtl
ne 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
.ltr
ha.rtl
, eñangareko emoĩdir
ha emoĩlang
atributo he’iháicha. - Ojekargávo mokõive vore ikatu ha’e peteĩ cuello de botella rendimiento añeteguáva: ehechami peteĩ 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 mbujape ryru káso
Pe separador pan miga rehegua haꞌehína peteĩ káso añoite oikotevẽva imbaꞌekuaarã pyahu imbaꞌeteéva— haꞌehína $breadcrumb-divider-flipped
—oñemohenda por defecto $breadcrumb-divider
.