How to align Arabic text data from right to left for annotation?

[fkd04]

Hey there,

I am trying to use Labelbox to annotate my Arabic sentence pairs based on a predefined criteria. I added the data rows, and I could read the data just fine, aligned from right to left, just how it is supposed to be. But when I added the data row to my annotation project, the alignment becomes from left to right, ana the text is no longer readable to annotators as it should be. Is there a way to solve this?

Thanks

[PT]

something like this I assume (I took this as sample so not sure what the text means)

• Also are you using txt file or conversational type?

[fkd04]

Thank you for your reply!

I am using text data (“media_type”: “TEXT”).
In your screenshot, the Arabic text looks aligned correctly from right to left. Did you do anything specific to make that happen, or was it like this by default?

In my case (see screenshot), Arabic is being aligned left to right, so it’s not readable. To make it clearer, here’s a simple example with English:

Correct alignment: How are you?

Incorrect alignment: ?uoy era woH

This is what’s happening with Arabic on my side.

I’m still new to LabelBox, so I’d really appreciate it if you could walk me through how you got this working, or point me to what I might be missing.

Thanks again for your help!

[fkd04]

Hello, I am still stuck on the same issue. I’d appreciate any support on this!

[PT]

I am still checking, one of the solution I had is not working all the time - for ref

# Add Right-to-Left Mark (U+200F)
rtl_text = "\u200F تَتَحَدَّث اَلْأَبْيَات عَنْ لَحْظَة وَدَاع يَسْتَغْرِب فِيهَا اَلشَّاعِر أَنْ لَا يَبْكِي مِنْ أَلَم اَلْفِرَاق، وَيَصِف حَالَة اَلْمُودِعِينَ وَبَعْضهمْ يَتَكَلَّم فِي حِين يَكْتَفِي اَلْمُحِبُّونَ بِالصَّمْتِ، لِأَنَّ حَالهمْ تَظْهَر عِشْقهمْ أَكْثَر مِمَّا يَسْتَطِيعُونَ اَلتَّعْبِير عَنْهُ بِالْكَلَامِ. وَيُقَسِّم فِي آخَر اَلْأَبْيَات عَلَى أَنَّ تَوَقُّف دَمْعه لَا يَعْنِي نِهَايَة حَيّه.\u200F"

with open("sample.txt", "w", encoding="utf-8") as f:
    f.write(rtl_text)

[fkd04]

That’s right, I tried this but it is not working. I appreciate your time looking into this!

[PT]

Took me longer, we don’t have a build it solution but using Stylus could help - Using Stylus will allow you to overwrite the style within the HTML style element.

pre.sc-dfzyxB.fXSLCG.notranslate {
  direction: rtl !important;
}

It will most likely be another class name in your case, open the dev tools (F12) in your browser, select the text to search for the right class in your editor
We render this in an Iframe so this will also work for the data rows tab also.

Hope this helps!