Align Arabic text in table to the right if there is a line break-CodePudding

How to align the second span text to the right? First span is already aligned but after the line break second span starts from the left

<td align="right">
  <span>${arabicLabels.DVD_NAV}</span> <br /> 
  <span>${arabicLabels.SCREEN}</span>
</td>

Output:

I want both of spans be aligned right. In the picture there is one TR and two TD, left side english and right side arabic. We care about the right TD which is mentioned above.

CodePudding user response：

Use the `direction` property

You can achieve this goal by setting the direction property to rtl (right to left).

.right{
  direction: rtl;
}

<table>
<tr>
<td >
  <span>DVD_NAV</span> <br> 
  <span>SCREEN</span>
</td>
<td >
  <span>ا..............العربیة</span><br>  
  <span>بسم اللہ</span>
</td></tr>

</table>

CodePudding user response：

You can simply set the text-align style property to right. However, Arabic is a rigtht-to-left language (I assume that's why you want it right-aligned) and should be styled accordingly with direction: rtl; which will automatically align things correctly.

.arabic {
  direction: rtl;
}

<table>
  <tr>
    <td>
      <span>DVD_NAV</span><br>
      <span>SCREEN</span>
    </td>
    <td >
      <span>DVD_NAV</span><br>
      <span>SCREEN</span>
    </td>
  </tr>
</table>

CodePudding user response：

It's not exactly clear what you are asking but flex is a great way to position elements

#t1{
display:flex;
flex-direction:column;
text-align:right;
}

<table>
<tr>
<td id='t1'>
  <span>DVD_NAV</span>  
  <span>SCREEN</span>
</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>
  test
</td>
<td>test</td>
<td>test</td>
</tr>
</table>

Use the direction property

Use the `direction` property