וובמאסטר - תיכנות ובניית אתרים

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

גיא בורשטיין ,‏ מיקרוסופט‏ ‏/‏ 28 מרץ, 2003
F+
F-

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

גיא בורשטיין, מיקרוסופט

גיא בורשטיין הוא מומחה טכנולוגיות פיתוח בחברת מיקרוסופט ואחראי על הקשר בין מיקרוסופט לקהילת המפתחים בארץ.
תגיות: מדריך‏  /  HTML‏  /  בניית אתרים‏  /  עברית‏  

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

תגובות למאמר



תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות