1

Please see examples. There I wrote code for these two values which give the same result.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>hayti</title>
  <style>
   p
    {
       direction: ltr;
    }
   span
    {
       background-color: yellow;
       direction: rtl;
       unicode-bidi: embed;
    }
    
   .p01
    {
       direction: ltr;
    }
   .span01
    {
       background-color: yellow;
       direction: rtl;
       unicode-bidi: isolate;
    }
  </style>
 </head>
 <body>
    <h1>Two samples </h1>
    <p> Programming in <span>Html and CSs!!</span> is the easiest way to learn coding. </p>
    <p class="p01"> Programming in <span class="span01">Html and CSs!!</span> is the easiest 
    way to learn coding. </p>
 </body>
</html>

Result is`

---embed---- Programming in !!Html and CSs is the easiest way to learn coding.

----isolate---- Programming in !!Html and CSs is the easiest way to learn coding.

Vopshm Vopshmm
  • 31
  • 6

1 Answers1

1

Here's an example where they give different results.

.ex1 span
{
  direction: rtl;
  unicode-bidi: embed;
}

.ex2 span
{
  direction: rtl;
  unicode-bidi: isolate;
}
<h1>Two samples </h1>
<p class=ex1> Programming in <span>Html <span>and</span> CSS!!</span> is the easiest way to learn coding. </p>
<p class=ex2> Programming in <span>Html <span>and</span> CSS!!</span> is the easiest way to learn coding. </p>

You can see that in the embed case the words of the outer span are treated as right-to-left as one, whereas in the isolate case the right-to-left words are broken by the inner span.

Alohci
  • 78,296
  • 16
  • 112
  • 156
  • in mdn.mozilla web site is written that- This keyword indicates that the element's container directionality should be calculated without considering the content of this element. The element is therefore isolated from its siblings. When applying its bidirectional-resolution algorithm, its container element treats it ..... like an image. Could you explain this based on your example??? – Vopshm Vopshmm Apr 12 '22 at 09:17
  • @VopshmVopshmm - Sorry, I'm really not a bidi expert. You'd need to pick your way through the unicode bidi algorithm step by step to see how the algorithm was affected by the replacement character versus the original characters that the embed logic uses. – Alohci Apr 12 '22 at 09:29