Disposition RTL
Prise en charge complète de droite à gauche via les propriétés logiques CSS. Passez en arabe ou en hébreu — toute la mise en page se retourne sans un seul margin-left dans le code.
LTR — Gauche à droite
L'internationalisation bien faite
Une démonstration Next.js en direct de la disposition RTL, du routage par locale et du formatage Intl — les compétences i18n dont les équipes entreprise ont vraiment besoin.
4 LocalesRTL + LTRAPI IntlProp. logiques CSS
Consultation en:EnglishFrançaisالعربيةעברית
Ce que cette démo illustre
Formatage Intl
Dates, nombres et devises formatés correctement pour chaque locale via l'API Intl native. Aucune bibliothèque tierce. Aucun formatage manuel.
Routage par locale
URL sensibles à la locale propulsées par next-intl middleware. La détection Accept-Language redirige automatiquement les utilisateurs vers leur locale préférée.
Comparaison de formatage en direct
Les mêmes valeurs, formatées correctement pour les quatre locales simultanément.
| Locale | Date | Nombre | Devise | Direction |
|---|---|---|---|---|
enEnglish | January 15, 2024 | 1,234,567.89 | $9,999.99 | Gauche à droite |
frFrançais | 15 janvier 2024 | 1 234 567,89 | 9 999,99 € | Gauche à droite |
arالعربية | 15 يناير 2024 | 1,234,567.89 | 9,999.99 ر.س. | Droite à gauche |
heעברית | 15 בינואר 2024 | 1,234,567.89 | 9,999.99 ₪ | Droite à gauche |
Propriétés logiques CSS
Passez en arabe ou en hébreu ci-dessus — toute la page se retourne. Pas de CSS dupliqué. Pas de surcharges JavaScript. Juste ceci :
card.module.css
.card {
padding-inline: 1.5rem; /* ≠ padding-left/right */
margin-block-end: 1rem; /* ≠ margin-bottom */
border-inline-start: 2px solid var(--color-accent); /* ≠ border-left */
text-align: start; /* ≠ text-align: left */
inset-inline-start: 0; /* ≠ left: 0 */
}
/* No margin-left. No margin-right.
Direction is handled by the browser. */Jane SmithPublié le 15 janvier 2024
Carte exemple
Cette carte n'utilise que des propriétés logiques CSS. Changez la direction ci-dessus pour la voir se retourner.
Ce que le RTL change vraiment
Anglais (LTR)
- nav direction
- border-inline-start
- text-align: start
- icon flips
Arabe (RTL)
- nav direction
- border-inline-start
- text-align: start
- icon flips
Toute la page utilise ces propriétés — chaque marge, rembourrage et bordure. Changez la locale dans la barre de navigation pour le voir en direct.