Facebook
Twitter
RSSמדריך HTML – עברית בדפי HTML
ישנם שתי דרכים עיקריות לכתוב דפי HTML בעברית. בפרק זה נציג את 2 הגישות לכתיבת HTML בעברית, ונציין מתי כדאי להשתמש בכל אחת מהן.
1. הוספת ב- dir=rtl לתגיות בדף
בשיטה זו מוסיפים לאלמנט כלשהו בדף ה- HTML את המאפיין dir=rtl. לדוגמא:
<p dir="rtl">טקסט בעברית</p>
לכל אלמנט ניתן להוסיף את המאפיין dir (קיצור של direction), שיכול לקבל 2 ערכים המציינים את כיוון הטקסט:
- ltr – קיצור של Left To Right יציין שכיוון הטקסט הוא משמאל לימין (כמו באנגלית)
- rtl – קיצור של Right to Left יציין כי כיוון הטקסט הוא מימין לשמאל (מתאים לעברית)
לאיזה אלמנט נוסיף את הגדרת הכיוון? תלוי.
נתחיל ממסמך HTML פשוט:
<!DOCTYPE html>
<html lang="he">
<head>
<meta charset="utf-8" />
<title>דף בעברית</title>
</head>
<body>
<h3>אני משתמש ב- WebMatrix לפיתוח אתרים</h3>
<p>אני מפתח בשפת C# כשאני רוצה לכתוב תוכניות</p>
</body>
</html>
אם נציג את הדף הזה בדפדפן, נקבל את התוצאה הבאה:
נשים לב לכמה דברים:
- כתיבת עברית בתוך דף ה- HTML היא לא דבר פשוט, וכשיש טקסט שמשלב גם עברית וגם אנגלית מתחילות הבעיות.
- הטקסט כברירת מחדל מוצמד לשמאל, ומילה באנגלית גורמת לשבירת הטקסט, מיקום לא נכון של חלקי המשפט ושל סימני הקישור (-).
- שם השפה #C כתוב בצורה תקינה.
שינוי כיוון ה- HTML או ה- BODY
הדרך הפשוטה ביותר להגדיר שהמסמך כולו יהיה מימין לשמאל הוא להוסיף את ההגדרה dir=rtl לתגית HTML או לתגית BODY. לדוגמא:
<!DOCTYPE html>
<html lang="he">
<head>
<meta charset="utf-8" />
<title>דף בעברית</title>
</head>
<body dir="rtl">
<h3>אני משתמש ב- WebMatrix לפיתוח אתרים</h3>
<p>אני מפתח בשפת C# כשאני רוצה לכתוב תוכניות</p>
</body>
</html>
במקרה הזה, נקבל את התוצאה:
כעת, כיוון הטקסט הוא מימין לשמאל והמשפטים הכוללים מילים באנגלית מוצגים באופן תקין, אך המילה C# מוצגת לא נכון. כדי לפתור את הבעיה, נעטוף את הטקסט הזה בתגית כמו SPAN ונגדיר רק עליה כיוון משמאל לימין:
<!DOCTYPE html>
<html lang="he">
<head>
<meta charset="utf-8" />
<title>דף בעברית</title>
</head>
<body dir="rtl">
<h3>אני משתמש ב- WebMatrix לפיתוח אתרים</h3>
<p>אני מפתח בשפת
<span dir="ltr">C#</span>
כשאני רוצה לכתוב תוכניות</p>
</body>
</html>
ולבסוף נקבל את התוצאה הרצויה, בה שם השפה #C כתוב בצורה תקינה.
2. שימוש בהגדרות direction ב- CSS
במידה ולא רוצים להגדיר בצורה מפורשת את כיוון הטקסט בתוך מסמך ה- HTML, ניתן לעשות זאת ע”י הגדרות עיצוב ב- CSS. כדי ללמוד עוד על CSS כדאי לקרוא את מדריך CSS באתר זה.
כדי לשנות את הכיוון של אלמנט מסויים להיות מימין לשמאל ע”י שימוש ב- CSS, נגדיר:
<style type="text/css">
.rtl {
direction: rtl;
}
</style>
לדוגמא – עבור מסמך ה- HTML הבא:
<!DOCTYPE html>
<html lang="he">
<head>
<meta charset="utf-8" />
<title>דף בעברית</title>
</head>
<body>
<h3>אני משתמש ב- WebMatrix לפיתוח אתרים</h3>
<p>אני מפתחי בשפת C# כשאני רוצה לכתוב תוכניות</p>
</body>
</html>
נוסיף את הגדרת העיצוב direction כדי לשנות את כיוון הטקסט:
<!DOCTYPE html>
<html lang="he">
<head>
<meta charset="utf-8" />
<title>דף בעברית</title>
<style type="text/css">
body {
direction: rtl;
}
</style>
</head>
<body>
<h3>אני משתמש ב- WebMatrix לפיתוח אתרים</h3>
<p>אני מפתחי בשפת C# כשאני רוצה לכתוב תוכניות</p>
</body>
</html>
נשים לב שכאן הוספנו את הגדרת העיצוב בתוך תגית style בתוך דף ה- HTML, אך ניתן היה לעשות זאת ע”י בכל אחת הדרכים המפורטות במדריך הוספת CSS ל- HTML.
נקבל את התוצאה:
נשים לב שגם בשיטה הזו – כיוון הטקסט הוא מימין לשמאל, אולם עלינו לתקן את האופן שבו נכתב שם השפה C#.
מתי נשתמש בכל אחת מהשיטות?
הדרך הנכונה ביותר ליצור דפי HTML בעברית מימין לשמאל גם מבחינה סמנטית וגם מבחינת נגישות האתר היא להשתמש בשיטה הראשונה ולהוסיף dir=rtl לאלמנטים. בדרך זו אנחנו מגדירים שמשמעות הטקסט הוא טקסט מימין לשמאל.
בפועל, לא תמיד נוכל לשנות את דף ה- HTML עצמו (למשל אם אנחנו רוצים לאפשר שינוי תבניות עיצוב דינמי לאתר), או שהמערכת תומכת במספר שפות. במקרים אלו – נגדיר את כיוון הטקסט ע”י שימוש בהגדרות עיצוב של CSS.
תגובות בפייסבוק