• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • unicode-bidi

    CSS unicode-bidi 属性,和 direction 属性,决定如何处理文档中的双书写方向文本(bidirectional text)。比如,如果一块内容同时包含有从左到右书写和从右到左书写的文本,那么用户代理(the user-agent)会使用复杂的 Unicode 算法来决定如何显示文本。unicode-bidi 属性会覆盖此算法,允许开发人员控制文本嵌入(text embedding)。

    示例

    /* 关键字值 */
    unicode-bidi: normal;
    unicode-bidi: embed;
    unicode-bidi: isolate;
    unicode-bidi: bidi-override;
    unicode-bidi: isolate-override;
    unicode-bidi: plaintext;
    /* 全局值 */
    unicode-bidi: inherit;
    unicode-bidi: initial;
    unicode-bidi: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持unicode-bidi

    语法:

    unicode-bidi:normal | embed | bidi-override | isolate | isolate-override | plaintext

    取值:

    • normal对双向算法,此元素不提供额外的嵌入级别。对于内联元素,隐式的重新排序在元素的边界上起作用。
    • embed对于内联元素,该值会为双向算法打开一个额外的嵌入级别。嵌入级别的方向是由direction属性给出的。
    • bidi-override对于内联元素,该值会创建一个覆盖;对于块容器元素,该值将为不在另一个块容器元素内的内联级别的后代创建一个覆盖。这意味着在元素内部,根据direction属性,重新排序是严格按照顺序排列的;双向算法的隐式部分被忽略。
    • isolate这个关键字表示计算元素容器的方向时,不考虑这个元素的内容。因此,这个元素就从它的兄弟姐妹中分离出来了。当应用它的双向分辨算法的时候,它的容器元素将其视为一个或多个U+FFFC Object Replacement Character,即像 image 一样。
    • isolate-override这个关键字将isolate关键字的隔离行为应用于周围的内容,并将bidi-override关键字的覆盖行为应用于内部内容。
    • plaintext这个关键字在计算元素方向的时候,不考虑父元素的双向状态,也不考虑direction属性的值。它是使用 Unicode 双向算法的P2和P3规则计算的。
      这个值允许按照 Unicode 双向算法显示已经格式化的数据。
    初始值normal
    适用元素all elements, though some values have no effect on non-inline elements
    是否是继承属性
    适用媒体visual
    计算值as specified
    Animation typediscrete
    正规顺序the unique non-ambiguous order defined by the formal grammar

    例子

    div{
     direction:rtl;
     unicode-bidi:bidi-override;
    }
    
    //CSS
    .bible-quote {
      direction: rtl; 
      unicode-bidi: embed; 
    }
    
    //HTML
    <div class="bible-quote">
      a line of text
    </div>
    <div>
      another line of text
    </div>
    

    上篇:direction

    下篇:writing-mode