文本竖排组合 | text-combine-upright (Writing Modes) - CSS 中文开发手册 - Break易站

2021-01-28 02:14

阅读:598


  • ??CSS 中文开发手册

    文本竖排组合 | text-combine-upright (Writing Modes) - CSS 中文开发手册

    text-combine-upright CSS属性将多个字符的组合指定到单个字符的空间中。如果组合文本宽于1em,则用户代理必须调整到1em内的内容。所得到的组合物被视为用于布局和装饰的单个直立字形。此属性仅在垂直书写模式下有效。

    这是用来产生一个在日语中称为“中横”(tate-chū-yoko)的效果,或者是以直书横向(Chinese)的方式产生的效果。

    /* Keyword values */
    text-combine-upright: none;
    text-combine-upright: all;
    
    /* Digits values */
    text-combine-upright: digits;     /* fits 2 consecutive digits horizontally inside vertical text */
    text-combine-upright: digits 4;   /* fits up to 4 consecutive digits horizontally inside vertical text */
    
    /* Global values */
    text-combine-upright: inherit;
    text-combine-upright: initial;
    text-combine-upright: unset;

    Initial value

    none

    Applies to

    non-replaced inline elements

    Inherited

    yes

    Media

    visual

    Computed value

    specified keyword, plus integer if ‘digits‘

    Animation type

    discrete

    Canonical order

    the unique non-ambiguous order defined by the formal grammar

    句法

    可能值

    none——没有特别的处理。

    all——尝试将水平方框内的所有连续字符排版,以便它们占据框的垂直线内的单个字符的空间。

    digits ?——尝试显示一个连续的ASCII数字(U + 0030-U + 0039),该数字与指定的整数具有相同或更少的字符数目,从而占用垂直线框内单个字符的空间。如果省略整数,则计算出的值最大为2。范围之外的整数是无效的。

    形式语法

    none | all | [ digits ? ]

    实例(数字)

    当数字被组合时,数字值(digital value)比所有值(all value)所需的标记要少,但是目前并没有得到浏览器的广泛支持。

    平成20年4月16日に

    .exampleText {
      writing-mode: vertical-lr;
      text-combine-upright: digits 2;
      font: 36px serif;
    }

    Screenshot

    Live sample

    ?

    ?

    实例(全部)

    all value需要标记每个水平文本片段,但相较数字值, 目前它得到更多浏览器的支持。

    民國105429

    html { writing-mode: vertical-rl; font: 24px serif }
    .num { text-combine-upright: all }

    Screenshot

    Live sample

    ?

    ?

    规范

    Specification

    Status

    Comment

    CSS Writing Modes Module Level 3The definition of ‘text-combine-upright‘ in that specification.

    Candidate Recommendation

    Initial definition

    UnknownThe definition of ‘text-combine-upright‘ in that specification.

    Unknown

    Add digits value

    浏览器兼容性

    Feature

    Chrome

    Edge

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari (WebKit)

    Basic support

    (Yes)-webkit1 48.0

    (Yes)

    48.0 (48.0)2

    11.0-ms3

    (Yes)-webkit1

    (Yes)-webkit1

    digits

    No support

    ?

    No support4

    11.0-ms3

    No support

    ?

    Feature

    Android

    Android Webview

    Edge

    Chrome for Android

    Firefox Mobile (Gecko)

    IE Phone

    Opera Mobile

    Safari Mobile

    Basic support

    No support

    48.0

    (Yes)

    48.0

    48.0 (48.0)2

    No support

    No support

    No support

    digits

    ?

    ?

    ?

    No support4

    ?

    ?

    ?

    ?

    
    
  • ??CSS 中文开发手册

  • 评论


    亲,登录后才可以留言!