سلوك عرض غير متناسق عند تداخل العلامات بترتيب خاطئ

لقد حاولتُ مؤخرًا جعل ميزة «إخفاء التفاصيل» بخط عريض، وظهر لي هذا الخطأ. بمجرد استخدام <b> لجعل النص عريضًا ثم استخدام </b> داخل الأقواس، يتغير اسم العنوان. هذا سلوك غريب، وأفضل طريقة لوصفه هي إعادة إنتاجه أدناه:

<b>

[details="مثال"]

</b>

مرحبًا!

[/details]

النتيجة:

<b>

مثال

</b>

مرحبًا!

لقد عثرتُ على مشكلة أخرى. بمجرد أن تقوم بمحاذاة النص في المنتصف ثم تستخدم </div> لإعادة المحاذاة داخل القوس، يتم وضع النص أسفل الأمر خارج ميزة التفاصيل:

&lt;div align=center&gt;


[details="مرحباً!"]

أنا في المنتصف

&lt;/div&gt;

مرحباً!

[/details]

النتيجة:

<div align=center>

مرحباً!

أنا في المنتصف

</div>

مرحباً!

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

هذا يعمل بشكل صحيح:

<details dir="rtl">
<summary dir="rtl"><b>مثال</b></summary>
<p dir="rtl">مرحبًا!</p>
</details>
مثال

مرحبًا!

مطابق تمامًا لما كنت أبحث عنه. كثيرًا ما نقدر ذلك!