מדריך זה יספק לך טיפים וטכניקות מקיפים ליצירת קובץ CSS שעובד בצורה חלקה עבור פריסות RTL ו-LTR כאחד. באופן הזה, תוכל להשתמש באותו קובץ CSS עבור פיתוח אתרים בעברית ובאנגלית.

בעת פיתוח אתר אינטרנט או יישום אינטרנט שצריכים לתמוך בשפות מימין לשמאל (RTL) וגם בשפות משמאל לימין (LTR), חיוני שתהיה לך אסטרטגיית CSS חזקה.

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

השתמש במאפיינים וערכים לוגיים

מאפיינים וערכים לוגיים ב-CSS מאפשרים לך להגדיר סגנונות בהתבסס על מצב הכתיבה ולא על כיוונים פיזיים. הדבר שימושי במיוחד עבור תמיכת RTL.

/* Instead of */
margin-left: 10px;

/* Use */
margin-inline-start: 10px;

/* Similarly for padding, border, etc. */
padding-inline-end: 20px;
border-inline-start: 1px solid black;

השתמש בתכונה dir ב-HTML

התכונה dir ברכיבי HTML מציינת את כיוון הטקסט, שיכול להיות ltr (משמאל לימין) או rtl (מימין לשמאל).

<html dir="rtl">

מנף משתני CSS

משתני CSS (מאפיינים מותאמים אישית) יכולים לעזור לך לעבור בין ערכי RTL ו-LTR בצורה יעילה יותר.

:root {
    --primary-direction: left;
    --secondary-direction: right;
}

[dir="rtl"] {
    --primary-direction: right;
    --secondary-direction: left;
}

.box {
    float: var(--primary-direction);
}

השתמש בפסאודו-מחלקה div

הפסאודו מחלקה dir מחילה סגנונות המבוססים על כיוון הטקסט.

.container:dir(rtl) {
    text-align: right;
}

.container:dir(ltr) {
    text-align: left;
}

פריסות Flexbox ו-Grid

פריסות Flexbox ו-Grid מצוינות ליצירת עיצובים רספונסיביים המתאימים היטב לכיווני טקסט שונים. השתמש במאפיינים flex-direction ו-grid באופן הגיוני.

.flex-container {
    display: flex;
    flex-direction: row;
}

[dir="rtl"] .flex-container {
    flex-direction: row-reverse;
}

נהל יישור טקסט

ישר טקסט באמצעות מאפיינים לוגיים כמו start או end במקום right או left.

.text {
    text-align: start; /* aligns left in LTR, right in RTL */
}

השתמש במאפיין מצב כתיבה writing-mode

מאפיין writing-mode מגדיר את כיוון הטקסט ויכול להיות שימושי עבור פריסות מורכבות.

.vertical-text {
    writing-mode: vertical-rl; /* text flows vertically right-to-left */
}

גיליונות סגנון ספציפיים לשפה

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

<link rel="stylesheet" href="styles-ltr.css" media="all" title="ltr">
<link rel="stylesheet" href="styles-rtl.css" media="all" title="rtl">

<script>
    document.querySelectorAll('link[title="rtl"]').forEach((link) => {
        if (document.documentElement.dir !== 'rtl') {
            link.disabled = true;
        }
    });
</script>

שקול שיקוף רכיבי ממשק משתמש

ייתכן שרכיבי ממשק משתמש מסוימים, כמו סמלים ותמונות, יצטרכו להיות שיקוף בפריסות RTL. השתמש בטרנספורמציות CSS בשביל זה.

.icon {
    transform: scaleX(1); /* normal direction */
}

[dir="rtl"] .icon {
    transform: scaleX(-1); /* mirrored direction */
}

יצירת קובץ CSS עבור שפות RTL ו-LTR