דלג לתוכן הראשי
RTL — ימין לשמאל

בינאום נכון

הדגמה חיה של Next.js עם פריסת RTL, ניתוב מקומי ועיצוב Intl — מיומנויות הבינאום שצוותים ארגוניים באמת צריכים.

4 שפותRTL + LTRIntl APIמאפיינים לוגיים CSS
מציג ב:EnglishFrançaisالعربيةעברית

מה ההדגמה הזו מציגה

פריסת RTL

תמיכה מלאה מימין לשמאל באמצעות מאפיינים לוגיים של CSS. עבור לערבית או עברית — כל הפריסה מתהפכת ללא margin-left אחד בקוד.

עיצוב Intl

תאריכים, מספרים ומטבעות מעוצבים נכון עבור כל שפה דרך ה-Intl API המובנה. ללא ספרייה חיצונית. ללא עיצוב ידני.

ניתוב מקומי

כתובות URL מוּדעות שפה, מופעלות על ידי next-intl middleware. זיהוי Accept-Language מפנה משתמשים אוטומטית לשפה המועדפת עליהם.

השוואת עיצוב חיה

אותם ערכים, מעוצבים נכון עבור ארבע השפות בו-זמנית.

שפהתאריךמספרמטבעכיוון
enEnglishJanuary 15, 20241,234,567.89$9,999.99שמאל לימין
frFrançais15 janvier 20241 234 567,899 999,99 €שמאל לימין
arالعربية15 يناير 20241,234,567.89‏9,999.99 ر.س.‏ימין לשמאל
heעברית15 בינואר 20241,234,567.89‏9,999.99 ‏₪ימין לשמאל

מאפיינים לוגיים של CSS

עבור לערבית או עברית למעלה — הדף כולו מתהפך. ללא CSS כפול. ללא עקיפות JavaScript. רק זה:

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 Smithפורסם ב-15 בינואר 2024

כרטיס לדוגמה

כרטיס זה משתמש רק במאפיינים לוגיים של CSS. שנה כיוון למעלה כדי לראות אותו מתהפך.

מה RTL באמת משנה

אנגלית (LTR)

  • nav direction
  • border-inline-start
  • text-align: start
  • icon flips

ערבית (RTL)

  • nav direction
  • border-inline-start
  • text-align: start
  • icon flips

כל הדף משתמש במאפיינים אלה — כל שוליים, ריפוד וגבול. שנה שפה בסרגל הניווט כדי לראות זאת בפועל.