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