قوائم RTL المرقمة أو ذات النقاط تتعطل

مثال من العالم الحقيقي: ההנחיות בוויקי לגבי שמות - ישראל (Israel) - OpenStreetMap Community Forum

يجب ترقيم هذا القسم، لكنه غير مرقم - ربما بسبب تنسيق CSS سيئ.

العرض مختلف قليلاً على سطح المكتب ولكنه لا يزال معطلاً.

سأحاول توضيح ذلك هنا أيضًا. لا أعرف ما إذا كان يعتمد على إعدادات المنتدى. القوائم التالية متطابقة باللغتين الإنجليزية والعبرية.

مرقم:

  1. واحد
  2. اثنان
    1. اثنان نقطة واحد
    2. اثنان نقطة اثنان
    3. اثنان نقطة ثلاثة
  3. ثلاثة
    • ثلاثة نقطة واحد
    • ثلاثة نقطة اثنان

نقاط:

  • نقطة واحدة
  • نقطة اثنان
    1. نقطة اثنان رقم واحد
    2. نقطة اثنان رقم اثنان
  • نقطة ثلاثة
    • نقطة ثلاثة نقطة واحدة
    • نقطة ثلاثة نقطة اثنان

ממוספר:

  1. אחת
  2. שתיים
    1. שתיים נקודה אחת
    2. שתיים נקודה שתיים
    3. שתיים נקודה שלוש
  3. שלוש
    • שלוש פריט אחת
    • שלוש פריט שתיים

פריטים:

  • פריט אחת
  • פריט שתיים
    1. פריט שתיים מספר אחת
    2. פריט שתיים מספר שתיים
  • פריט שלוש
    • פריט שלוש פריט אחת
    • פריט שלוש פריט שתיים

بناءً على المعاينة - نعم، إنها معطلة هنا أيضًا. (تعديل: تمت إضافة لقطة شاشة أدناه)

إعجابَين (2)

الإصلاح المقترح:

إعجاب واحد (1)

شكرًا لك، آمل أن يتم قبول هذا! لقد فتحت طلبًا لتقديم هذه الرقعة إلى منتدى OSM مباشرة أيضًا: Fix list CSS for RTL languages - This forum issues and requests - OpenStreetMap Community Forum

ملاحظة: يبدو أن المنشور الأصلي لهذا الموضوع تمت ترجمته تلقائيًا إلى الإنجليزية بالنسبة لي ولا يمكنني العثور على طريقة لرؤيته بالأصل في واجهة الهاتف المحمول. ما الذي يحدث هناك؟ من الواضح أن المشكلة لم تعد مرئية في هذه الحالة. من الجيد أنني التقطت تلك اللقطة في وقت سابق!

قد يكون هذا صحيحًا يا أودي، لكنني أعتقد أن هذه القاعدة تتعلق فقط بالمعاينة. قد يكون بعض هذا خطأ في عكس CSS الذي نستخدمه.

@أسامة أي أفكار حول هذا؟

أنا متأكد من أننا نستطيع حل هذه المشكلة، مع إعطاء الأولوية لهذا الخطأ.

القاعدة الكاملة (انظر السطر #92) هي:

.cooked,
.d-editor-preview {
  ul,
  ol {
     ...
  }
}

لذلك فهي تنطبق على .cooked أيضًا (وليس فقط على المعاينة).

قد يكون هذا خطأ في العاكس، ولكن للمضي قدمًا، فإن خصائص start و end هي أفضل حل.

أودي

إعجاب واحد (1)

بالطبع، لقد دمجت، أخبرني كيف يعمل ذلك؟

رائع!

إعجاب واحد (1)

أفترض أن وظيفة العكس تُطبَّق فقط عندما يكون لغة واجهة المستخدم مضبوطة على العبرية/العربية/إلخ، وهذا ليس هو الحال هنا. يمكن أن يظهر النص من اتجاه اليمين إلى اليسار في المحتوى حتى عندما تكون لغة واجهة المستخدم من اليسار إلى اليمين.

كما ذكر أودي، غالبًا ما يكون من الأفضل استخدام -inline-start/end بدلاً من -left/right في أوراق الأسلوب، وعدم استخدام عاكِس يُحتمل أن يكون خاطئًا. هذا سيعمل بشكل صحيح لكل من النصوص المضمنة من اتجاه اليمين إلى اليسار (في محتوى المنشورات) بالإضافة إلى تخطيط النص من اليمين إلى اليسار (اعتمادًا على لغة واجهة المستخدم المختارة)، مع ورقة أسلوب واحدة فقط. قد ترغب في النظر في التحول إلى ذلك وتقاعد rtlcss. ولكن بالطبع، لست مضطرًا لذلك، إذا لم تكن هناك مشكلة حقيقية لإيجاد حل لها.

إعجاب واحد (1)

نعم أنا أتفق، يجب أن يكون لدينا ورقة أنماط CSS قوية للمحتوى المختلط، إذا صادفت أي أمثلة أخرى تحتاج للتحسين فبالطبع يُرحب بـ PR :احتضان:

إعجاب واحد (1)

@nat فكرة جيدة لإضافة العلامة. قد ترغب في إضافتها هنا أيضًا: Wrong -> arrow direction in RTL text contexts (لا يمكنني تعديلها لسبب ما). سأنشر بعض المعلومات ذات الصلة في هذا الموضوع بعد ثانية (ولكن باختصار، لا يزال الأمر يتطلب جهدًا أكبر بكثير مما ينبغي، وما كتبته في المنشور الأصلي لا يزال صحيحًا).

إعجاب واحد (1)

كنت ألعب قليلاً بهذه القطعة الأثرية للذكاء الاصطناعي لتعلم هذه الأشياء:

https://meta.discourse.org/discourse-ai/ai-bot/artifacts/248/2

يبدو أن هناك قائمة طويلة من التغييرات والأنماط التي سنحتاج إلى إجرائها لتكون أكثر ملاءمة للغة من اليمين إلى اليسار.

إنها قطعة مثيرة للاهتمام لفكها وتعليم الناس عنها. حشو الحدود مثير للاهتمام أيضًا.

إعجاب واحد (1)

يسعدني أنك تجد الأمر مثيرًا للاهتمام! أنا أيضًا :slight_smile:

سأذكر أنني على حد علمي، -top و -bottom جيدان. من النادر جدًا ألا يتم تعيين -block-start و -block-end لهما على التوالي، وهذا لا يحدث إلا عند استخدام تخطيط من الأعلى إلى الأسفل. شخصيًا، ليس لدي أي خبرة مع هذه التخطيطات على الإطلاق، وأعتقد أن الموقع بأكمله سيحتاج على الأرجح إلى إعادة تصميمه لاستيعاب مثل هذه التخطيطات، لذلك لن تكون هذه التعديلات البسيطة على CSS كافية. ولكن بكل تأكيد قد أكون مخطئًا، لا تأخذ كلامي كحقيقة مطلقة!

تعديل: https://stackoverflow.com/questions/510068/how-do-i-make-text-run-top-to-bottom-in-css#53576895

إعجاب واحد (1)

الأسئلة التي أفكر فيها هنا هي:

  • هل من الممكن أن نصل إلى حالة في CSS حيث لم يعد من الضروري تشغيل أداة rtlcss؟
  • هل يستحق الأمر ذلك؟
  • هل يوجد حالة وسيطة صحية؟

من المثير للاهتمام أن هذه الصفحة توضح مشكلة شائعة أخرى مع الاتجاهات المختلطة - التمرير في الاتجاه الخاطئ:

للأسف، لم أبحث في هذا الأمر مطلقًا، لذلك لا يمكنني إخبارك بما يسببه وكيفية تجنبه.

إعجاب واحد (1)

هل هو ممكن - بالتأكيد، لكنه قد يتطلب بعض التعديلات في HTML للتوافق مع CSS (يمكنني إعطائك أمثلة لاحقًا).

الحالة الوسطية الصحية - أعتقد أنه إذا قمت بتغيير بعض الأشياء فقط إلى -inline-start، فإن rtlcss سيتجاهلها، ولكنه لا يزال يحول -left. هذا يعني أنه يمكنك تدريجيًا تحويل المزيد والمزيد من الأشياء حتى يتوقف rtlcss عن التغيير. عند هذه النقطة، يمكن التخلص من rtlcss.

هل الأمر يستحق ذلك - لا أدري. فكر في ما إذا كان هذا سيجعل Discourse أكثر استقرارًا في الاتجاه من اليمين إلى اليسار، وما إذا كان أسهل في الصيانة على المدى الطويل. أنا حقًا لا أعلم.

بالطبع - لا شك في ذلك - ربما يكون ضروريًا - بالنسبة ل CSS المطبقة على المحتوى الذي ينشئه المستخدم والذي يمكن أن يكون في كلا الاتجاهين (عادةً باستخدام dir="auto").

أيضًا، على الرغم من أنني لا أستطيع التفكير في مثال على الفور، أحيانًا تريد حقًا تعيين خاصية left بشكل صريح لشيء ما بغض النظر عن اتجاه التخطيط. في تلك الحالات، rtlcss سيفعل الشيء الخطأ، إلا إذا قمت بعمل استثناءات لذلك بطريقة ما.

إعجاب واحد (1)

إليك مثال: Fix display of RTL tag and role values in element info table by jake-low · Pull Request #790 · OSMCha/osmcha-frontend · GitHub

العناصر الإضافية <span> داخل العناصر <td> ضرورية لجعل الجدول يعرض بالتخطيط المطلوب. في سياق من اليمين إلى اليسار (RTL)، يأتي العنصر الزائف ::before على اليمين، لذلك إذا كان td نفسه من اليمين إلى اليسار، فإن علامة = التي تفصل المفتاح والقيمة ستأتي بدلاً من ذلك في نهاية صف الجدول (الجانب الأيمن).

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

إعجابَين (2)

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

3 إعجابات

تم إغلاق هذا الموضوع تلقائيًا بعد 14 ساعة. لم يعد يُسمح بردود جديدة.