CODEWITHSUNDEEP
htmlcss
Mahdi Aslami Khavari
Mahdi Aslami Khavari

Reputation: 1985

Change direction inside a p tag html

I want to change direction of a tag inside another tag but it does not work correctly.

in the following example i want to see aslami @ exactly as i writed but in result it show @ before a not after i.

<p style="width: 100%; direction: rtl; text-align: right;">
  مهدی
  <em style="direction: ltr; text-align: left;">aslami @</em>
  خاوری
</p>

Upvotes: 1

Views: 918

Answers (3)

Temani Afif
Temani Afif

Reputation: 272703

You need to add unicode-bidi:isolate;ref

<p style="width: 100%; direction: rtl; text-align: right;">
  مهدی
  <em style="direction: ltr;unicode-bidi:isolate; text-align: left;">aslami @</em>
  خاوری
</p>

But as also stated in the specification, you should better use dir than direction

Because HTML UAs can turn off CSS styling, we recommend HTML authors to use the HTML dir attribute and <bdo> element to ensure correct bidirectional layout in the absence of a style sheet. Authors should not use direction in HTML documents.

You should also note that there is a slight difference between dir and direction.

For direction we have:

ltr

This value sets inline base direction (bidi directionality) to line-left-to-line-right. ref

For dir we have:

The ltr keyword, which maps to the ltr state

Indicates that the contents of the element are explicitly directionally isolated left-to-right text. ref

So usiing dir=ltr is equivalent to direction: ltr;unicode-bidi:isolate; and not only direction: ltr;

See answer of @Ori Drori

You can also consider bdi tag to do the same:

<p style="width: 100%; direction: rtl; text-align: right;">
  مهدی
  <bdi><em style="direction: ltr; text-align: left;">aslami @</em></bdi>
  خاوری
</p>

The bdi element represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting ref

Upvotes: 3

Ori Drori
Ori Drori

Reputation: 191946

The css direction property is used mainly to set layout direction (see the 1st example in the link). Use the html dir attribute to set the text direction:

<p dir="rtl" style="direction: rtl;">
  مهدی
  <em dir="ltr">aslami @</em>
  خاوری
</p>

Upvotes: 1

Adekunbi Adefolarin
Adekunbi Adefolarin

Reputation: 205

To shorten your code you can just use the attribute of dir alone on your HTML tag. Something like this. `

<p dir="rtl" style="width: 100%; text-align: right;">
مهدی<em dir="ltr">aslami @</em>خاوری
</p>

`

Upvotes: 0

Related Questions