RTL language Support

[muhnashX]

Hi,
i'm not sure whether this should be a feature request or a bug (apologies in advance),
but the annotations boxes in sequence labeling tasks get wrong positions and doesn't align with the actual order of the words, in case of a RTL language.
more specifically i'm using doccano for Arabic project and here's an example:

original text rendered right(correct order)

after adding a label:

hope this example makes it clear (focus on the order of the words and the part "جملة اختبار")

Thanks!

[icoxfog417]

Thank you for using the doccano! Do you mean the order of the word become opposite if you add the annotation?

[muhnashX]

yes!
another way to say it is like if we have the words having numeric labels, so the Arabic sentence would be:
1 2 3 4 5 6
after annotating words 4,5 we get
6 (4 5 annotated) 1 2 3

[Hironsan]

doccano uses Vuetify to implement the frontend and the framework supports RTL. So if we use the feature, the problem will may be solved.

• https://vuetifyjs.com/en/customization/rtl/

If you give some Arabic test cases, they will help to analyze the problem.

[muhnashX]

@Hironsan apologies for replying late,
i think RTL is indeed supported by default because the sentences is rendered correctly, both in the dataset view and initially in the annotation view.

the problem appears when i start by annotating an entity,
with inspection i found that the way the annotation box its structured is via a div containing a span with the sentence text in it:

when an annotation for an entity is added, that span is then divided to multiple spans, one for text before the entity annotation box, one for the entity annotation box itself and one for the text afterwards.

the problem comes from the order of those spans, by default they are ordered left to right, therefore the sentence gets out of order after the annotation:

when i add those properties to the parent div (source)

-webkit-flex-direction: row-reverse;  // disabled
  flex-direction: row-reverse;

i get the order correct, but it also breaks it for English likewise.

Finally, i don't have enough experience in front-end though, so i might be doing something wrong here of course ✋

Regarding the test cases, i don't know how to provide such cases in a helpful way, because it's mainly UI thing.
the example i'm using in this issue is the sentence:
"هذه جملة اختبار أولى، وهذه ثانية"
and the correct annotation should appear as follows:

Thanks!

[muhnashX]

Forgot to mention that i tried to enable the RTL feature as instructed, and tried also editing nuxt config to pass the flag rtl=true to Vuetify and didn't have any difference.

[Hironsan]

Thank you for your information. The row-reverse information will especially helpful. If we have an RTL switch and change row-reverse value according to the RTL switch state, we will be able to annotate text correctly on both English and Arabic.

[muhnashX]

Forgot to mention that i tried to enable the RTL feature as instructed, and tried also editing nuxt config to pass the flag rtl=true to Vuetify and didn't have any difference.

Well, this is quite inaccurate, configuring rtl=true for Vuetify worked but by turning the whole app to RTL (which isn't a good solution). it was just me using the production docker compose file, therefore any changes i make wasn't reflected 😞

On the other hand, after some tinkering i managed to get it to work well for both English and Arabic for the sequence labeling task (the one i'm currently using)

on a fork i modified EntityItemBox component such that:

• the CSS style classes is defined in a list in the data section, and used in the template rather than writing them explicitly.

• then i define CSS class: rtl with just direction: rtl; property
  (this to control the order of all the children spans)

• finally, i used the beforeUpdate hook to do the logic:
  get the text and check whether it's Arabic or not (the first char only)
  if it's, append it to the style classes (if not already there)
  if it's not, remove it from the style classes (if already there)

if this seems to be an acceptable solution, i can open a pull request and review it further.

[robvanderg]

FYI: We've found that in the meantime, <1.0 versions handle RTL languages pretty well. You can most easily run these by using:
docker pull chakki-works/doccano

[ofersabo]

Thanks to @muhnashX it is easy to adjust code so it would handle other RTL languages, simply change in:
"frontend/components/organisms/annotation/EntityItemBox.vue"
To include the UTF of your language.

[bakrianoo]

Did you try to set the RTL setting by yourself in frontend/nuxt.config.js like this

vuetify: {
    rtl: true,  // add RTL support
    theme: {
      primary: colors.blue.darken2,
       ..

[muhnashX]

Apologies for late reply!
well, it's been a while since i last used doccano :)), @ofersabo 👋 glad you managed to solve it!
could you detail more what worked for you? is it different than my last answer/fork? a snippet or line reference would do.

@bakrianoo 👋
as far as i remember yes i tried that, but got the whole UI to be right-to-left

Forgot to mention that i tried to enable the RTL feature as instructed, and tried also editing nuxt config to pass the flag rtl=true to Vuetify and didn't have any difference.

Well, this is quite inaccurate, configuring rtl=true for Vuetify worked but by turning the whole app to RTL (which isn't a good solution). it was just me using the production docker compose file, therefore any changes i make wasn't reflected

while my main problem was to get sentences of both languages AR/EN displayed correctly on the same doccano instance.

[Maroussia]

Thanks a lot @muhnashX for opening this issue and documenting your steps to solve it!

I am having a similar problem, although I am annotating only Arabic (no English). I followed your instructions on the web inspector of my browser and was able to fix it for the div I am looking at. But how to carry over this fix to the rest of the application? I could not find a local file called EntityItemBox.vue or even (@bakrianoo) nuxt.config.js.

Unfortunately I don't have experience with JS, is there still something I can do?
Thanks!

[muhnashX]

@Maroussia glad those steps did a bit of help!
it's been a year now, and i'm not sure i'm remembering all the details (JS/frontend noob too :D )
First things off, the EntityItemBox.vue mentioned in the workaround is located here and the nuxt configuration @bakrianoo referred to is here

and in order for a fix to be persistent, you have to do it into the code itself, the browser inspector is kind a test/playground if we can say, and changes made there are volatile and will go away whenever you close the page.

so roughly you would clone the doccanno repo, do some changes, then build/run docanno from your own clone.

Second, back to your problem, Since you only annotating Arabic, i'd say setting the whole UI to rtl (@bakrianoo comment) is straight forward and simpler solution for that task, but i think it'd look a bit odd (and maybe discouraging?)

the other option is to try the workaround i used, you will have the UI as it is, with Arabic handled with no problems

[muhnashX]

Forgot to mention that i tried to enable the RTL feature as instructed, and tried also editing nuxt config to pass the flag rtl=true to Vuetify and didn't have any difference.

Well, this is quite inaccurate, configuring rtl=true for Vuetify worked but by turning the whole app to RTL (which isn't a good solution). it was just me using the production docker compose file, therefore any changes i make wasn't reflected

On the other hand, after some tinkering i managed to get it to work well for both English and Arabic for the sequence labeling task (the one i'm currently using)

on a fork i modified EntityItemBox component such that:

• the CSS style classes is defined in a list in the data section, and used in the template rather than writing them explicitly.
• then i define CSS class: rtl with just direction: rtl; property
  (this to control the order of all the children spans)
• finally, i used the beforeUpdate hook to do the logic:
  get the text and check whether it's Arabic or not (the first char only)
  if it's, append it to the style classes (if not already there)
  if it's not, remove it from the style classes (if already there)

if this seems to be an acceptable solution, i can open a pull request and review it further.

here's EntityItemBox.vue, with those steps applied back then

[Maroussia]

Thank you @muhnashX for your quick reply. It's great to find people like you when learning!

Unfortunately (it took me a while to find out what was happening) the EntityItemBox.vue was deleted (910c6eb) just as I was asking. This is why I couldn't find it.

Maybe @Hironsan you know whether the changes from @muhnashX could successfully be applied elsewhere?

I tried the newest version (1.2.2) to check whether there were any improvements for RTL, but no luck...

[Hironsan]

Solved in #1511 (only sequence labeling project)