unicode-bidi各个属性值的作用对比示意实例页面

展示

代码

• HTML：

  <h4>正常direction</h4>
  <p><button>button按钮？</button><span>span标签？</span>匿名内联元素？</p>
  
  <h4>normal，默认</h4>
  <p dir="rtl"><button>button按钮？</button><span>span标签？</span>匿名内联元素？</p>
  
  <h4>embed</h4>
  <p dir="rtl"><button class="embed">button按钮？</button><span class="embed">span标签？</span>匿名内联元素？</p>
  
  <h4>bidi-override</h4>
  <p dir="rtl"><button class="bidi-override">button按钮？</button><span class="bidi-override">span标签？</span>匿名内联元素？</p>
  
  <h4>plaintext</h4>
  <p dir="rtl"><button class="plaintext">button按钮？</button><span class="plaintext">span标签？</span>匿名内联元素？</p>
  
  <h4>isolate</h4>
  <p dir="rtl"><button class="isolate">button按钮？</button><span class="isolate">span标签？</span>匿名内联元素？</p>
  
  <h4>isolate-override</h4>
  <p dir="rtl"><button class="isolate-override">button按钮？</button><span class="isolate-override">span标签？</span>匿名内联元素？</p>

• CSS：

  span {
      background-color: skyblue;
  }   
  .embed {
      unicode-bidi: embed; 
  }
  .bidi-override {
      unicode-bidi: bidi-override; 
  }
  .plaintext {
      unicode-bidi: plaintext; 
  }
  .isolate {
      unicode-bidi: isolate;
  }
  .isolate-override {
      unicode-bidi: isolate-override;
  }