"unicode-bidi" css 属性 中的 "embed" 和 "isolate" 值有什么区别?

what is the difference between "embed" and "isolate" values in "unicode-bidi" css property?

请看例子。我在那里为这两个值编写了代码,结果相同。

<!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>

结果是`

---embed----编程在!!Html和CSs是学习编码的最简单方法。

----隔离---- !!Html和CSs中的编程是学习编码的最简单方法。

这是一个他们给出不同结果的例子。

.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>

您可以看到,在嵌入情况下,外部跨度的单词被视为 right-to-left 个,而在孤立情况下,right-to-left 单词被内部跨度打断。