تحديد إتجاه المحتوى في HTML

تحديد إتجاه المحتوى في HTML

في عالم الويب، المحتوى مش دايماً بيمشي من الشمال لليمين (LTR). فيه لغات كتير زي العربية والعبرية بتبدأ من اليمين لليسار (RTL). كمهندس HTML محترف، لازم تعرف إزاي تتحكم في إتجاه المحتوى ده عشان موقعك يبان صح في كل اللغات.

خاصية dir

دي أهم خاصية بتحدد إتجاه المحتوى لأي عنصر HTML. ممكن تحطها على الـ نفسه عشان تحدد الإتجاه الافتراضي للصفحة كلها، أو على أي عنصر تاني زي

أو

عشان تغير الإتجاه لعنصر معين.

القيم اللي ممكن تاخدها:

  • ltr: إتجاه من الشمال لليمين (Left-to-Right). ده الإتجاه الافتراضي لمعظم المتصفحات.
  • rtl: إتجاه من اليمين لليسار (Right-to-Left). للغات زي العربية.
  • auto: المتصفح بيحاول يكتشف الإتجاه بناءً على أول حرف قوي في المحتوى. مفيدة جداً لما يكون عندك محتوى جاي من المستخدم ومش عارف إتجاهه.

ملاحظة: دايماً الأفضل إنك تحدد الـ dir على عنصر الـ وكمان تحدد الـ lang عشان المتصفحات ومحركات البحث تفهم لغة واتجاه الصفحة صح.

مثال:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحة RTL</title>
</head>
<body>
    <h1>مرحباً بالعالم!</h1>
    <p>هذا النص مكتوب باللغة العربية ويتجه من اليمين لليسار.</p>
    <div dir="ltr">
        This div content is forced to be LTR.
    </div>
</body>
</html>

عنصر <bdo>

عنصر الـ <bdo> (Bi-Directional Override) بيسمحلك تعمل override أو إلغاء مؤقت لاتجاه النص في جزء معين. لازم تستخدم معاه خاصية dir (بقيمة ltr أو rtl).

مثال:

<p dir="rtl">
    هذا النص عربي، لكن الكلمة التالية <bdo dir="ltr">HELLO</bdo> ستظهر من اليسار لليمين.
</p>

خاصية direction في CSS

ممكن تتحكم في الإتجاه باستخدام CSS بخاصية direction. القيم هي ltr و rtl. لكن خلي بالك، الـ CSS بتأثر على الـ presentation مش على الـ semantics (معنى المحتوى). عشان كده الأفضل دايماً تستخدم خاصية dir في HTML.

مثال CSS:

<style>
    .rtl-text {
        direction: rtl;
        unicode-bidi: embed; /* مهم جداً عشان CSS direction تشتغل صح */
    }
</style>

<p class="rtl-text">
    هذا نص عربي تم تحديد اتجاهه بـ CSS.
</p>

نصيحة ذهبية: استخدم خاصية dir في HTML لتحديد إتجاه المحتوى الأساسي والـ lang لتحديد اللغة. خلي الـ CSS لضبط التنسيقات الجمالية بس، إلا في حالات نادرة جداً لما تحتاج تتحكم في الإتجاه ديناميكياً بـ JavaScript مثلاً.

متى تستخدم dir="auto"؟

دي مفيدة جداً في حقول إدخال النص (text areas) أو في أي محتوى جاي من قاعدة بيانات أو API ومش ضامن إتجاهه. المتصفح هيحلل أول حروف قوية في النص ويحدد الإتجاه بناءً عليها.

مثال:

<label for="user-input">أدخل نصاً هنا:</label>
<textarea id="user-input" dir="auto"></textarea>

بس كده، عرفت إزاي تتحكم في إتجاه المحتوى في HTML. طبق الكلام ده عشان موقعك يكون قوي ومرن لكل المستخدمين حول العالم!