מדריך HTML – עברית בדפי HTML

‏ • Microsoft

ישנם שתי דרכים עיקריות לכתוב דפי 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 - עברית

נשים לב לכמה דברים:

  • כתיבת עברית בתוך דף ה- 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
>

במקרה הזה, נקבל את התוצאה:

מדריך 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 כתוב בצורה תקינה.

מדריך HTML - עברית

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.

נקבל את התוצאה:

image

נשים לב שגם בשיטה הזו – כיוון הטקסט הוא מימין לשמאל, אולם עלינו לתקן את האופן שבו נכתב שם השפה C#.

מתי נשתמש בכל אחת מהשיטות?

הדרך הנכונה ביותר ליצור דפי HTML בעברית מימין לשמאל גם מבחינה סמנטית וגם מבחינת נגישות האתר היא להשתמש בשיטה הראשונה ולהוסיף dir=rtl לאלמנטים. בדרך זו אנחנו מגדירים שמשמעות הטקסט הוא טקסט מימין לשמאל.

בפועל, לא תמיד נוכל לשנות את דף ה- HTML עצמו (למשל אם אנחנו רוצים לאפשר שינוי תבניות עיצוב דינמי לאתר), או שהמערכת תומכת במספר שפות. במקרים אלו – נגדיר את כיוון הטקסט ע”י שימוש בהגדרות עיצוב של CSS.

תגיות: , , ,

גיא בורשטיין

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

תגובות בפייסבוק

חדש! אחסון אתרים של וובמאסטר

שירות אחסון אתרים
המקצועי של וובמאסטר!

מומחים באירוח אתרי
WordPress, Joomla, Drupal

  • שרתי לינוקס עם CloudLinux, LiteSpeed
  • 1GB דיסק SSD, 10GB תעבורה חודשית
  • ממשק ניהול cPanel, תעודת SSL חינם

עכשיו במחיר היכרות:
רק 420 ש"ח לשנה!