When displaying Urdu text in an HTML tag (span), the text is supposed to be written from right to left. To achieve this, I added direction:rtl to the CSS styling. However, there seems to be an issue as on the last line, it leaves empty space on the right. Let me provide a clearer example.
.r2l {
direction: rtl;
}<html>
<head>
</head>
<body>
<span class='r2l'>خدا کرے کے میری عرض پاک پے اترے</span>
<span class='r2l'>وہ فصل گل جسے </span>
<span class='r2l'>اندیشہ زوال نہ ہویہاں جو پھول کھلے کھلا رہےصدیوں یہاں
سے خزاں کو گزارنے کی مجال نہ ہو</span>
<span class='r2l'>یہاں جو سبزہ اگے ہمیشہ سبز رہے</span>
<span class='r2l'>اور ایسا سبز کے جسکیکوئی مثال نہ ہوخدا کرے کے نہ خام
ہو سر وقار وطن اور اس کے حسن کو تشوش ماہ وسا ل نہ ہو ہر ایک فرد ہو
تہذیب و فن کا</span>
<span class='r2l'> اوج و کمال کوئی ملول نہ ہو کوئی خستہ حال نہ ہوخدا کرے
میرے ایک بھی ہم وطن کے لئےحیات جرم نہ ہو، زندگی وبال نہ ہو</span>
</body>
</html>Upon running the snippet and observing the last line, you will notice that it does not align correctly from the right side but rather leaves empty space.
Edit The actual scenario includes adding different attributes to each span which are displayed when hovering over them. This helps in showing the attribution of the time the text was added to the database.