יומן · טיפוגרפיה ו־RTL
ערבית ועברית ברשת, ללא פשרה.
רוב האתרים הרב־לשוניים מתייחסים לערבית ולעברית כתוספת CSS. אסור. כך אנו מגדירים טיפוגרפיית RTL כך שתיקרא באותה סמכות כמו המקור הלטיני.
- זמן קריאה
- 7
- מאת
- גיד קוואסמי
- פורסם
- 2 באפריל 2026
1. dir היא עמדה, לא דגל
הגדרת dir="rtl" על השורש היא ההתחלה, לא הסוף. כל קומפוננטה — ניווט, פירורי לחם, טופס, טבלה, פוטר — צריכה להיבדק לשימוש בתכונות לוגיות (margin-inline-start, padding-inline-end, inset-inline-start) במקום left/right. אם היפוך מפתיע אותך, המקור hardcoded; שכתב לוגית.
2. צמד ערבית ועברית אמיתיות
אל תסמוך על הגליפים הערביים או העבריים שמגיעים בתוך משפחה לטינית. צמד משפחה ערבית ייעודית (Tajawal, IBM Plex Sans Arabic, RH Zak) ומשפחה עברית ייעודית (Heebo, Frank Ruhl Libre) עם משפחת התצוגה והטקסט הלטיניים. התאם x-height ומשקל כך שאותה פסקה בשלוש שפות תיקרא באותו צבע.
בדוק עם טקסט אמיתי, לא lorem ipsum. הקצב של ערבית ועברית מעצב את אורך השורה אחרת — מידה שנוחה באנגלית עלולה להרגיש דלילה בערבית.
3. ספרות, פיסוק, יישור
החלט פעם אחת והחל בכל מקום: ספרות ערביות מזרחיות או מערביות? השתמש באותה מערכת ספרות בכל אינדקסי הניווט, תאריכים, כיתובים. סימני פיסוק מתהפכים אוטומטית עם dir="rtl" — מירכאות, סוגריים, פסיקים — אך ודא שהגופנים שלך כוללים את הגליפים הנכונים לשני המצבים.
כותרות מיושרות לתחילת השורה. ב־RTL, ההתחלה היא הקצה הימני. אל תכפה יישור־ימינה עם class; סמוך על text-align: start.
4. למראה את הפריסה, לא את המשמעות
אייקונים שמצביעים קדימה (חיצים, פירורי לחם, חיצי קרוסלה) צריכים להתהפך ב־RTL. אייקונים שנושאים משמעות (לוגואים, לבבות, כפתורי פליי) לא. הבדיקה: האם קורא מקומי יזהה את האייקון אם תהפוך אותו? אם כן, הפוך; אם לא, השאר.
הפרס על עשיית זה נכון הוא בלתי נראה — קוראים לא שמים לב ל־RTL טוב כי הוא פשוט נקרא. הם שמים לב ל־RTL רע בשורה הראשונה.