Remove Choices superscript and RTL $textlabel

[salbatarni]

Hello,

I am exploring label-studio and trying to design the labeling interface.
I have two issues:
First, how to remove the superscript that are on each label?
Second, how to make the text to be labeled from right to left?

I think these are simple things but I have not found anything about them in the documnetation or the issues here.

this is my code:

<View>
  <Header value="المقالة" style="direction: rtl; text-align: right;"></Header>
  <Text name="text" value="$textlabel" style="direction: rtl; text-align: right;"></Text>
  <Header value="Organization"></Header>
  <Choices name="organization" toName="text" choice="single" showInLine="true">
    <Choice value="0" showLabel="False"/>
    <Choice value="1"/>
    <Choice value="2"/>
    <Choice value="3"/>
    <Choice value="4"/>
    <Choice value="5"/>
  </Choices>

  <Header value="Relevance"></Header>
  <Choices name="relevance" toName="text" choice="single" showInLine="true">
    <Choice value="0"/>
    <Choice value="1"/>
    <Choice value="2"/>
    <Choice value="3"/>
    <Choice value="4"/>
    <Choice value="5"/>
  </Choices>
</View>

[heidi-humansignal]

Hi there!

Thank you for reaching out and for exploring Label Studio.
1. How to remove the superscript on each label?
The superscript numbers on each choice represent the hotkeys assigned to them by default. You can disable these numbers by setting showHotkeys="false" in your Choices tag.
Here's how you can modify your labeling configuration:

<View> <Header value="المقالة" style="direction: rtl; text-align: right;"></Header> <Text name="text" value="$textlabel" style="direction: rtl; text-align: right;"></Text> <Header value="Organization"></Header> <Choices name="organization" toName="text" choice="single" showInLine="true" showHotkeys="false"> <Choice value="0"/> <Choice value="1"/> <Choice value="2"/> <Choice value="3"/> <Choice value="4"/> <Choice value="5"/> </Choices> <Header value="Relevance"></Header> <Choices name="relevance" toName="text" choice="single" showInLine="true" showHotkeys="false"> <Choice value="0"/> <Choice value="1"/> <Choice value="2"/> <Choice value="3"/> <Choice value="4"/> <Choice value="5"/> </Choices></View>

By adding showHotkeys="false" to your Choices tags, the superscript numbers will be hidden.
2. How to make the text to be labeled display from right to left?
To display your text from right to left, especially for languages like Arabic, you can define a CSS class that includes direction: rtl; and unicode-bidi: bidi-override;. This helps ensure proper rendering of RTL text.
Here's how you can update your labeling configuration:

<View> <Style> .rtl-text { direction: rtl; unicode-bidi: bidi-override; text-align: right; } </Style> <Header value="المقالة" className="rtl-text"></Header> <Text name="text" value="$textlabel" className="rtl-text"></Text> <Header value="Organization"></Header> <Choices name="organization" toName="text" choice="single" showInLine="true" showHotkeys="false"> <Choice value="0"/> <Choice value="1"/> <Choice value="2"/> <Choice value="3"/> <Choice value="4"/> <Choice value="5"/> </Choices> <Header value="Relevance"></Header> <Choices name="relevance" toName="text" choice="single" showInLine="true" showHotkeys="false"> <Choice value="0"/> <Choice value="1"/> <Choice value="2"/> <Choice value="3"/> <Choice value="4"/> <Choice value="5"/> </Choices></View>

In this example:

• The <Style> tag defines a CSS class .rtl-text with the necessary styles for RTL text.
• We apply this class to the <Header> and <Text> tags using className="rtl-text".
  Using unicode-bidi: bidi-override; helps to correctly display the text when mixing RTL and LTR characters.
  If you continue to experience issues with the text display, please let me know, and I'll be happy to assist further.

Thanks,

Tyler Conlee
Head of Support
HumanSignal

Comment by Tyler Conlee
Workflow Run