الصفحة الرئسيةتعلمhtml

ماهي Attributes text direction في html؟

السلام عليكم ورحمة الله تعالى وبركاته . قبل البدء في الشرح نود ان نرحب بزوارنا الأعزاء ونشكركم جزيل الشكر على الثقة التي تضعونها فينا ومتابعة ماننشره، وفي هذا المقال سنقوم بتغطية خاصية في html ، هذه الخاصية تسمى text direction وبالعربية اتجاه النص و الآن لننتقل إلى الأهم و هو الشرح.

شرح وظيفة direction:

يتم اختصار text direction الى dir ثم يضاف عليه = ثم يتم اعطاء dir قيمة , وهي من السمات global attributes ,تاخذ ال dir ثلاث قيم.

  1. ltr اي left to right بالعربية من اليساري الى اليمين.
  2. rtl اي right to left بالعربية من اليمين الى اليسار.
  3. auto هي وطريقة تتيح لوكيل المستخدم اتخاذ القرار ,يتم استخدام خورزميات اساسية لتحليل الاحرف التي تم وضعها دخل العنصر.

امثلة عملية لفهم direction بشكل جيد:

صورة من المقال السابق انظر الى body:

شرح العنصر strikethrough

نلاحظ وجود dir Attribute يسوي rtl ,قمنا باعطاء dir هذه القيمة ,لجعل النص محاكي للغة العربية اي يبدا من اليمين الى اليسار, لو اردنا الكتابة باللغة الانجلزية لقمنا بوضع القيمة بي ltr اي من اليساري الى اليمين ,اذا اردنا الكتابة على الجهتين نستخدم القيمة auto.

على سبيل المثال:

استخدام Attribute dir = ltr:

نلاحظ ان النص يبدا من اليسار الى اليمين.

استخدام Attribute dir = rtl:

نلاحظ ان النص يبدا من اليمين الى اليسار.

استخدام Attribute dir = auto:

نلاحظ ان النص محاكي للغة.

تنبيه:

اذا قمنا باعطاء ال body (dir = “auto”) ثم انزلناها من العناصر.

على سبيل المثال:

نلاحظ ان النص اصبح من اليمين الى اليسار, عندما نستخدم القيمة auto للاب الخاص بالعناصر يتم النظر الى اول حرف ,ثم يتم تطبيق كل شيء عليه ,هذه الطريقة لا تنطبق على العنصر body فحسب يمكنك جعل الاب على سبيل المثال div, ثم تجرب مافعلت ولكن النتيجة واحدة.

حل هذه المشكلة تحتاج لتخصيص نوع الصفحة, على سبيل المثال لنتخيل اني اقوم ببناء موقع والموقع باللغة العربية.

اولا اقوم باعطاء body (dir=”rtl”) ,ثم اذا احتجت الى البدا من اليسار الى اليمين ,في الدرجة الاولى استخدم css في الامر, اذ كنت لا اعرف شيء عن css استخدم ltr في العنصر نفسه.

على سبيل المثال:

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

الوسوم

مقالات ذات صلة

شاهد أيضاً

إغلاق
إغلاق
Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock