CODEWITHSUNDEEP
css
Salvation
Salvation

Reputation: 129

switch two different texts places

I want to change 2 texts places with CSS when I have one that translated to a lang that uses the LTR direction and the second with RTL direction.

This CSS is applied for an email.

this is my code:

'<span style="font-weight:bold; text-align: center;">US Cop</span> ' +curIfr.Name

curIfr.Name can be RTL lang or LTR lang, and I want to display it on the right side if it RTL and on the left side if it LTR.

The texts are centered inside a card, So I want to keep it centered and just switch the places.

I tried to use 

'<p style="float:right;"><span style="font-weight:bold; text-align: center;">US Cop</span></p>' +curIfr.Name

but since my text is centered, It takes it to the extreme right side and it not keeping it centered.

I also tried to use the direction attribute - But Its do nothing.

Thanks!

enter image description here

enter image description here

Upvotes: 0

Views: 159

Answers (1)

Alan Kael Ball
Alan Kael Ball

Reputation: 680

CSS has a direction property that sets the direction of the content flow within block-level elements. Values include rtl or ltr

There's also a HTML element <bdo> that can be used like so <bdo dir="rtl">Some stuff</bdo>

These are pretty easy to change with Javascript depending on the input. For example, by changing the value of the direction property on your span, or the dir attribute on the <bdo> element.

Edit:

Example:

<div style="direction: rtl;">
  <div>Name 1</div>
  <div>Name 2</div>
</div>

Upvotes: 1

Related Questions